Microsoft Clarity in Webflow einrichten, sauber mit Consent

Google Analytics sagt Dir, wie viele Leute auf einer Seite waren und wie viele wieder gegangen sind. Es sagt Dir nicht, warum. Dafür nutze ich Microsoft Clarity. Clarity zeigt, wo Besucher klicken, wie weit sie scrollen und wo sie hängen bleiben. Seit November 2026 läuft es auf sxlvx.de. Hier steht, wie ich es in Webflow eingebaut habe, und zwar so, dass es nur mit Zustimmung startet.

Was Clarity kann, das Google Analytics nicht kann

Beide Werkzeuge sind kostenlos und ergänzen sich. Google Analytics liefert die Zahlen, Clarity liefert die Bilder dazu.

• Heatmaps: Wo wird geklickt, getrennt nach Handy und Desktop.
• Scroll-Maps: Wie viele Besucher kommen bis zu Deinem Kontaktformular, und wie viele hören vorher auf.
• Aufzeichnungen: Einzelne Besuche als Video, ohne dass Eingaben in Formulare sichtbar werden.
• Frust-Signale: Rage Clicks, also wildes Klicken auf eine Stelle, und Dead Clicks, also Klicks auf etwas, das gar kein Link ist.

Warum Consent bei Clarity Pflicht ist

Clarity setzt Cookies und erfasst Nutzungsdaten. In Deutschland brauchst Du dafür eine Einwilligung, also ein Cookie-Banner. Seit dem 31. Oktober 2025 achtet auch Microsoft selbst darauf: Für Besucher aus der EU, dem Vereinigten Königreich und der Schweiz erwartet Clarity ein Consent-Signal.

Fehlt dieses Signal, läuft Clarity nur eingeschränkt. Das merkst Du an den Daten:

• Jeder Seitenaufruf zählt als eigene Sitzung.
• Jeder Besucher erscheint als neu, wiederkehrende Besucher gibt es nicht mehr.
• Wege über mehrere Seiten brechen ab, Funnels zeigen an jedem Schritt einen Absprung.

Du brauchst also zwei Dinge: ein Banner, das Clarity erst nach Zustimmung lädt, und eine Zeile Code, die Clarity diese Zustimmung meldet.

So baue ich Clarity in Webflow ein

Ich nutze den Cookie-Banner von Finsweet. Der lädt Scripts erst, wenn die passende Kategorie erlaubt ist. Mit einem anderen Banner funktioniert das Prinzip genauso, nur die Attribute heißen anders.

1. Projekt anlegen: Melde Dich bei clarity.microsoft.com an, leg ein neues Projekt mit Deiner Domain an und kopiere die Projekt-ID unter Settings, Setup.
2. Code einfügen: In Webflow öffnest Du die Site Settings, dann Custom Code, und fügst den Code unten in den Head Code ein. Die Projekt-ID ersetzt Du durch Deine.
3. Banner anpassen: Im Text der Kategorie Analyse nennst Du Clarity beim Namen. Wer zustimmt, soll wissen, wozu.
4. Datenschutzerklärung ergänzen: Ein eigener Abschnitt zu Clarity mit Anbieter, erfassten Daten, Cookies und Widerruf.
5. Maskierung prüfen: In Clarity unter Settings, Masking steht der Modus auf Balanced oder Strict. Dann sind Formulareingaben in den Aufzeichnungen nicht lesbar.
6. Veröffentlichen und testen: Öffne die Seite im privaten Fenster und lehne ab. In den Entwicklertools darf unter Netzwerk keine Anfrage an clarity.ms auftauchen. Dann stimmst Du zu und schaust in Clarity unter Live, ob Dein Besuch ankommt.

<!-- Microsoft Clarity, nur mit Cookie-Consent (Kategorie: analytics) -->
<script type="fs-cc" fs-cc-categories="analytics">
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "DEINE_PROJEKT_ID");
  window.clarity('consentv2', { ad_Storage: 'denied', analytics_Storage: 'granted' });
</script>

Zwei Dinge sind hier wichtig. Das Attribut type="fs-cc" sorgt dafür, dass der Browser das Script erst ausführt, wenn Finsweet es nach der Zustimmung freigibt. Und die Zeile mit consentv2 meldet Clarity, dass für Analyse eine Einwilligung vorliegt. Werbe-Cookies bleiben ausgeschaltet, weil ich sie nicht brauche.

Wenn Clarity vorher schon auf anderem Weg eingebunden war, etwa auf einer einzelnen Seite oder über eine App, nimm es dort raus. Sonst läuft es doppelt, und eine Version davon ohne Zustimmung.

Was Clarity speichert und wie lange

Aufzeichnungen bewahrt Clarity 30 Tage auf. Heatmaps und die Zahlen im Dashboard bleiben 9 Monate, ebenso Aufzeichnungen, die Du als Favorit markierst. Danach löscht Microsoft die Daten. Wenn Du also eine Aufzeichnung als Beispiel behalten willst, markier sie rechtzeitig.

Mein Trick: Sitzungen markieren

Am meisten lerne ich aus Besuchen, bei denen etwas Bestimmtes passiert. Auf meinem Website-Kosten-Rechner markiere ich deshalb die Sitzung, sobald jemand das Ergebnis sieht oder das Formular abschickt:

// Ergebnis erreicht: Sitzung in Clarity markieren
if (window.clarity) clarity('set', 'rechner', 'ergebnis');

// Formular abgeschickt
if (window.clarity) clarity('set', 'rechner', 'anfrage');

In Clarity filtere ich danach unter dem Merkmal rechner. So sehe ich gezielt die Besuche, in denen jemand den Rechner bis zum Ende benutzt hat, und wo die anderen vorher ausgestiegen sind. Das if davor ist wichtig: Ohne Zustimmung gibt es kein Clarity, und der Code soll dann einfach nichts tun.

Was ich mir als Erstes anschaue

Daten sammeln ist leicht. Die richtigen Fragen stellen ist die Arbeit. Bei jeder Website, die ich auswerte, fange ich mit diesen vier an:

1. Kommen die Leute bis zum Kontakt? Die Scroll-Map zeigt, wie viele den Button am Ende überhaupt sehen.
2. Wo wird geklickt, obwohl nichts passiert? Dead Clicks verraten Bilder oder Texte, die wie ein Link aussehen und keiner sind.
3. Was passiert auf dem Handy? Oft kommt der größere Teil der Besucher mobil. Was auf dem Desktop funktioniert, ist dort manchmal versteckt.
4. Wo kommt Frust auf? Rage Clicks auf ein Element heißen fast immer: Hier stimmt etwas nicht.

Die ersten echten Zahlen von sxlvx.de kommen in einem eigenen Beitrag, sobald genug Besuche zusammen sind. Mit Vorher und Nachher, damit Du siehst, was eine Änderung bringt.

Wenn Du Clarity auf Deiner Webflow-Website haben willst, richte ich es Dir ein, mit Banner, Datenschutztext und den Merkmalen, die für Deine Ziele zählen. Wie ich als Webflow Agentur in Ulm arbeite, steht hier. Was eine neue Website kostet, rechnest Du im Website-Kosten-Rechner aus. Oder schreib mir. Ich bin kein Anwalt: Für die Formulierung Deiner Datenschutzerklärung nimm im Zweifel einen Generator wie eRecht24 oder frag Deinen Datenschutzbeauftragten.

Zahlen sagen Dir, dass etwas nicht stimmt. Clarity zeigt Dir, wo.