Eine kurze Anleitung, wie Sie mit Google Tag Manager und Microsoft Clarity kostenlose Heatmaps und Sitzungsaufzeichnungen zu Ihrer Website hinzufügen, der kostenlosen Alternative zu Hotjar.
Vorab: Um mitzumachen, brauchen Sie Google Tag Manager und ein Microsoft-Clarity-Konto. Falls Sie noch keinen Tag Manager haben, lesen Sie unseren Beitrag zur Installation von Tag Manager auf Webflow, unserer Plattform der Wahl. Milk Moon Studio ist in erster Linie ein Webflow-Studio, und Webflow-Designer mögen es Low-Code und sauber. Selbst wenn Sie ein Webflow-Profi sind und Tag Manager bisher nicht nutzen, probieren Sie ihn aus. Er hält Ihr Projekt schön aufgeräumt, denn im <head> steht nur das Tag-Manager-Skript, und die Skriptverwaltung wird dadurch sehr einfach.
Damit Ihre Website schnell bleibt, empfehlen wir außerdem, für das Microsoft-Clarity-Tag, das wir gleich im Tag Manager anlegen, unsere Anleitung für verzögert ausgelöste Tags zu nutzen.
Nebenbei bemerkt: Wenn Sie es richtig technisch mögen, ist Hotjar eine hervorragende Lösung für das Problem, das wir hier angehen. Sie können Aufzeichnungen rund um bestimmte Abläufe und Conversion-Ereignisse ansehen, was ein klein wenig Programmierung erfordert (ganz zu schweigen von Extras wie Kurzumfragen). Wer aber einfach sehen will, was die Nutzer auf der Website tun, und ein paar Schwachstellen aufspüren möchte, ist mit Clarity bestens bedient, und es ist kostenlos. Sie erhalten die üblichen Heatmaps und Sitzungsaufzeichnungen ohne Kosten, und Probleme wie tote Klicks und Wutklicks lassen sich damit sehr leicht sichtbar machen. Clarity lässt sich sogar mit Ihrem Google-Analytics-Konto verknüpfen, um genauere Daten zu liefern. Als wir diesen Beitrag geschrieben haben, war damit ein Universal-Analytics-Konto (UA) gemeint, und wir haben auf unsere UA-Anleitung verwiesen. UA wurde inzwischen abgeschaltet, nutzen Sie stattdessen unsere Anleitung zu Google Analytics 4 mit Zaraz. Die ursprüngliche UA-Anleitung bleibt zur Dokumentation erhalten: Hilfe zur Einrichtung von UA im Tag Manager finden Sie in diesem Beitrag.
Update 2026: Clarity ist weiterhin kostenlos. In den FAQ von Microsoft heißt es: „Clarity ist ein dauerhaft kostenloser Dienst. Es gibt keine Traffic-Limits, und Sie werden nie zu einem kostenpflichtigen Upgrade gedrängt.“ Inzwischen unterstützt Clarity auch Google Analytics 4 und bietet eine offizielle Tag-Manager-Vorlage, die wir in Schritt 2 behandeln. Außerdem braucht Clarity in Ländern mit Einwilligungspflicht die gültige Einwilligung der Besucher, um den vollen Funktionsumfang zu nutzen, darunter Sitzungsaufzeichnungen. Was das für Ihre Daten bedeutet, zeigen wir in The Cookie Consent Dilemma.
Schritt 1: Ein Microsoft-Clarity-Projekt anlegen
Sobald Sie sich bei Clarity angemeldet haben, öffnen Sie „My Projects“ und klicken Sie auf „Add new project“.
Geben Sie dem Projekt einen Namen, tragen Sie Ihre URL ein, wählen Sie eine Kategorie und klicken Sie auf „Create“.
Verbinden Sie nun Google Analytics, um genauere Einblicke zu erhalten.
Klicken Sie auf „Get Started“ und wählen Sie dann das Google-Konto aus, das Sie für GA nutzen.
Erteilen Sie Clarity den Zugriff.
Wählen Sie nun das Analytics-Konto aus, das Sie verknüpfen möchten. Zu diesem Zeitpunkt unterstützte Microsoft Clarity nur Google-Analytics-UA-Konten und noch kein GA4. Hilfe zur Einrichtung und zum Hinzufügen zum Tag Manager finden Sie in diesem Beitrag.
Update 2026: UA hat am 1. Juli 2023 aufgehört, Daten zu verarbeiten (Google: „All standard Universal Analytics properties will stop processing new hits on July 1, 2023“). Die Screenshots oben zeigen daher den alten Ablauf. Clarity unterstützt GA4, aber Sie verbinden es, indem Sie Ihre GA4-Konto-ID, Mess-ID und Property-ID eingeben, statt ein Konto aus einer Liste auszuwählen. Clarity sendet die Wiedergabe-URL nicht an GA4 und unterstützt keine GA-Segmente in GA4 (Quelle: Microsoft Learn, Google Analytics 4 integration with Clarity). Unsere Anleitung zu GA4-Events passt gut zu Clarity-Aufzeichnungen.
Schritt 2: Das Tag installieren
Kopieren Sie den Code-Schnipsel.
Öffnen Sie den Tag Manager und legen Sie ein neues Tag an.
Geben Sie dem Tag nun einen Namen, wählen Sie als Tag-Typ „Custom HTML“ und fügen Sie den Schnipsel ein.
Als Trigger können Sie einfach „All Pages“ wählen, wir verwenden jedoch unseren Fully-Loaded-Trigger. Das ist der verzögerte Trigger, den wir in diesem Beitrag eingerichtet haben. Der Trigger „All Pages“ ist völlig in Ordnung. Der verzögerte Trigger gibt der Seite lediglich Zeit, zuerst alles zu laden, für ein etwas besseres PageSpeed-Ergebnis, mit dem Google ein klein wenig zufriedener ist.
Update 2026: Microsoft empfiehlt inzwischen einen einfacheren Weg als das Einfügen des Schnipsels. Öffnen Sie in Clarity Settings, dann Setup, dann Google Tag Manager, und wählen Sie „Finish setup“. Melden Sie sich an, wählen Sie Ihr GTM-Konto und Ihren Container und klicken Sie auf „Create and publish“. Oder wählen Sie im Tag Manager „Discover more tags“ in der Community Template Library, suchen Sie nach Clarity, fügen Sie die offizielle Microsoft-Clarity-Vorlage hinzu und geben Sie Ihre Clarity-Projekt-ID ein. Custom HTML, wie hier gezeigt, funktioniert weiterhin. Quelle: Microsoft Learn, How to install Clarity on Google Tag Manager. Welchen Weg Sie auch wählen, das Clarity-Tag kann weiterhin den oben beschriebenen verzögerten Trigger nutzen.
Klicken Sie nun auf „Submit“ und „Publish“, und Sie sind fertig. Die Ergebnisse erscheinen nach ein paar Stunden und sollten in etwa so aussehen:
Fragen zur Einrichtung von Verhaltensanalysen? Schreiben Sie uns in den Kommentaren, und weitere Anleitungen finden Sie jederzeit hier.
Häufig gestellte Fragen
Ist Microsoft Clarity wirklich kostenlos?
Ja. Laut den Clarity-FAQ von Microsoft ist es „ein dauerhaft kostenloser Dienst“, ohne Traffic-Limits und ohne kostenpflichtiges Upgrade. Heatmaps, Sitzungsaufzeichnungen und Erkenntnisse wie tote Klicks und Wutklicks erhalten Sie ohne Kosten.
Wie installiere ich Clarity mit Google Tag Manager?
Legen Sie ein Clarity-Projekt an. Danach können Sie es entweder auf der Clarity-Seite Settings, Setup, Google Tag Manager verbinden, die offizielle Microsoft-Clarity-Vorlage im Tag Manager hinzufügen oder den Tracking-Code wie oben gezeigt in ein Custom-HTML-Tag einfügen. Setzen Sie den Trigger auf „All Pages“ oder auf einen verzögerten Trigger, klicken Sie dann auf „Submit“ und „Publish“.
Funktioniert Microsoft Clarity mit GA4?
Ja. Als wir diesen Beitrag geschrieben haben, ließ sich Clarity nur mit Universal Analytics verknüpfen, das inzwischen abgeschaltet wurde. Clarity verbindet sich jetzt mit GA4, über Ihre GA4-Konto-ID, Mess-ID und Property-ID. Microsoft weist darauf hin, dass die Wiedergabe-URL der Aufzeichnung nicht an GA4 gesendet wird.
