Was Microsoft Clarity ist und wie du es mit Google Analytics 4 integrierst

Neulich habe ich dir erklärt, wie du die vollständige User Journey eines Nutzers in GA4 „sehen“ kannst.

Ich setze „sehen“ in Anführungszeichen, weil du tatsächlich nur eine Liste mit allen Events und Seiten gesehen hast, die ein Nutzer auf deiner Website aufgerufen hatte. Die Navigation selbst, also eine Aufzeichnung dessen, was diese Person getan hatte, hast du aber nicht gesehen.

Das geht ebenfalls, nur eben nicht mit GA4.

Es gibt mehrere Alternativen, und in diesem Artikel stelle ich dir eine der besten vor: Microsoft Clarity.

Hier erkläre ich dir alles im Video:

Und darunter findest du es als Text.

Was ist Microsoft Clarity?

Es ist Microsofts Tool zur Analyse des Nutzerverhaltens .

Das bedeutet, dass es dir hilft, die Interaktion der Nutzer mit deiner Website zu verstehen. Man könnte also sagen, es ist fast eher ein UX-Tool als ein Tool für digitale Analyse.

Es ist sehr gut, einfach zu implementieren und zu nutzen und außerdem kostenlos.

Kurz gesagt: Es hat alles.

Allerdings ist es kein Ersatz für GA4, sondern eine Ergänzung, denn es bietet Funktionen, die GA4 nicht hat.

Wofür MS Clarity nützlich ist

Ja, ich habe dir gerade erklärt, was Clarity ist und welche Funktionen es hat, aber wofür ist es wirklich gut?

Damit kannst du sehen und überprüfen, was Nutzer auf deiner Website gemacht haben.

Und du kannst das aggregiert sehen, mit Heatmaps oder auch einzeln, mit der Sitzungsaufzeichnung jedes Nutzers.

Funktionen

Wie gesagt, das Tool hat die beiden bereits erwähnten Hauptfunktionen.

Ich erkläre dir beide noch etwas genauer.

Heatmaps

Das sind Darstellungen einer bestimmten Website-Seite, auf denen uns hauptsächlich Folgendes gezeigt wird:

• Die Elemente, auf die Nutzer am häufigsten klicken.
• Die Bereiche der Seite, die am meisten Aufmerksamkeit auf sich ziehen.
• Die Scrolltiefe (wie weit Nutzer nach unten scrollen).

Ich denke, es ist offensichtlich, wie nützlich das für Dinge wie Menüs ist (welche Links am häufigsten angeklickt werden), ob es nicht anklickbare Elemente gibt, die Nutzer für anklickbar halten, oder was Interesse weckt (ein Bild? Ein Copy-Text? Ein bestimmtes Produkt?).

Klicks auf Links lassen sich mit GA4 problemlos messen, für die anderen beiden Punkte brauchst du aber ein Tool wie dieses.

Um die Heatmap zu sehen, musst du nur auf das kleine Flammensymbol eines beliebigen Elements klicken:

Du kannst auch zum entsprechenden Bereich im oberen Menü gehen und dort filtern:

Sitzungsaufzeichnung

Das Konzept ähnelt dem GA4-Nutzerexplorer-Bericht, den ich dir neulich erklärt habe. Nur siehst du jetzt die Sitzung selbst und nicht nur eine Liste von Events:

Wenn du siehst, wie der Nutzer mit deiner Seite interagiert, erkennst du direkt, ob er das tut, was du willst / erwartest, oder nicht.

Und wenn nicht, kannst du darüber nachdenken, warum. Und deine Website gegebenenfalls ändern.

Vorsicht mit Sitzungsaufzeichnungen, die machen süchtig. Du schaust dir zwei an und plötzlich sitzt du eine halbe Stunde da und siehst ein Video nach dem anderen wie bei TikTok.

Für die Aufzeichnungen hast du dieselben zwei Möglichkeiten wie zuvor:

• Auf das kameraförmige Symbol eines beliebigen Elements in den Diagrammen klicken.
• Zum entsprechenden Bereich im Menü gehen.

Außerdem gibt es etwas, das nur sehr wenige Tools ermöglichen, nämlich in Echtzeit zu sehen, was der Nutzer gerade auf deiner Website macht:

Links meine aktuelle Sitzung auf der Website. Rechts, was ich gerade mache (mit etwa einer Sekunde Verzögerung)

Ziemlich beeindruckend.

Vor allem, wenn IT etwas Seltsames entdeckt und du es ihnen dann in Echtzeit zeigst XD.

Wichtigste Anwendungsfälle

Gut, du weißt jetzt, was es kann. Aber wann ist es sinnvoll und mit welchem Ziel?

Meiner Meinung nach gibt es mehrere ziemlich empfehlenswerte Anwendungsfälle. Das sind diese.

Checkout

Das Kronjuwel.

Wenn du einen Ecommerce hast oder eine Dienstleistung verkaufst, für die etwas längere Formulare nötig sind (Telekommunikation, Banken…), empfehle ich dir zwei Dinge:

1. Sieh dir zunächst die Aufzeichnungen dieser Seite (einschließlich Nutzern auf Mobil- und Desktop-Geräten) an. Analysiere die wichtigsten Probleme deiner Nutzer. Schlage Verbesserungen vor.
2. Ermittle Checkout-Conversion-Raten (Nutzer, die kaufen / Nutzer, die eintreten) mit einem Tool wie GA4. So kannst du prüfen, ob die vorgeschlagenen Verbesserungen tatsächlich Verbesserungen sind.

Optional und etwas komplexer kannst du Fehler-Events senden, sobald in einem Checkout-Feld ein Fehler auftritt. So kannst du quantifizieren, welche Felder für deine Nutzer unklar sind.

Wichtigste Landingpages / Verkaufsseiten

Diese Seiten sind aus mehreren Gründen wichtig:

• Landingpages, weil sie der erste Kontakt eines Nutzers mit deiner Website sind. Wenn sie nicht funktionieren und die Nutzer abspringen, ist jede Werbeinvestition praktisch rausgeworfenes Geld.
• Verkaufsseiten, weil sie den Nutzer dazu bringen müssen, seine Karte herauszuholen. Oder sich zumindest zu registrieren.

Mit diesem Wissen empfehle ich dir in beiden Fällen wieder zwei Dinge, diesmal beide in diesem Tool:

1. Sieh dir die Aufzeichnungen dieser Seiten an. Genau wie beim Checkout.
2. Sieh dir die Heatmaps an: Klicken die Nutzer dort, wo du es erwartest? Schauen sie dorthin, wo du es willst? Wenn nicht, warum? Was kannst du ändern?

Beobachte, analysiere, ändere etwas und miss —zum Beispiel Absprungrate und Conversion-Raten—.

Neue Funktionen oder wichtige Änderungen

Wenn du eine wichtige Änderung auf der Website umsetzt oder etwas Neues startest, hast du keine Ahnung, wie es funktionieren wird.

Erst recht nicht, wenn du keinen Nutzertest gemacht hast, was meistens der Fall ist.

Deshalb ist es nach ein paar Tagen am besten, zusätzlich zum Vergleich der Ergebnisse mit den Zielen die Heatmaps und Nutzeraufzeichnungen dieses neuen Bereichs anzusehen. Vor allem, wenn er nicht wie erwartet funktioniert.

So kannst du Dinge prüfen wie:

• Ob überhaupt Traffic ankommt.
• Ob Traffic ankommt, aber nicht das passiert, was du erwartest.
• Ob der Nutzer liest und scrollt.
• Mögliche Fehler.

Mit anderen Worten: Du grenzt die Gründe ein, warum das Ganze nicht so funktioniert, wie du erwartet hast.

Mit Microsoft Clarity ist diese Art von Analyse sehr einfach.

Übrigens: Wenn dir gefällt, was du liest, du dich aber noch nicht dazu durchringen kannst, es auf deiner Website zu implementieren, kannst du es auch ausprobieren, ohne es zu installieren hier.

Seiten mit Fehlern

Vielleicht hast du bereits eine Fehlermessung in GA4 implementiert. Die häufigsten sind JavaScript-Fehler oder Fehler-Events in Formularen.

Dann musst du in GA4 prüfen, auf welchen Seiten diese Fehler auftreten und ob sie bei einem bestimmten Browser / Gerätetyp vorkommen.

Danach versuchst du als Nächstes, das Problem selbst zu reproduzieren.

Wenn das nicht klappt, musst du dir Nutzeraufzeichnungen mit diesem Gerätetyp oder Browser ansehen, um zu sehen, was sie tun, damit die Website fehlschlägt.

Wenn der Fehler gefunden ist, kommt der einfache Teil: ihn beheben. XD

Menüs

Du kannst zwar Events erstellen, um die Klicks auf jedes Menüelement in GA4 zu quantifizieren, aber mit einer Heatmap geht das deutlich schneller.

So siehst du schnell, welche Bereiche bei deinen Nutzern das größte Interesse erzeugen.

Großartig für jede Website und ideal, um Links zu verschiedenen Kategorien in einem Ecommerce zu analysieren.

Filter im Ecommerce

Und wenn wir schon von Ecommerce sprechen: Die Nutzung von Filtern in GA4 zu tracken, ist nicht besonders üblich. Deshalb zeigt dir eine Heatmap zwar oft nicht, welche Optionen ein Nutzer gewählt hat, aber sehr wohl, welche Filter am häufigsten verwendet werden.

Perfekt, wenn du viele Filter hast und sie in zwei Ebenen aufteilen willst: die üblichen —auf erster Ebene— und die erweiterten —hinter einem Klick auf einen Link versteckt—.

Vorteile von Microsoft Clarity

Du weißt jetzt, was du mit dem Tool messen kannst, was es dir bietet und warum ich empfehle, möglichst bald damit anzufangen.

Falls ich dich immer noch nicht überzeugt habe, hier die Vorteile, die ich für die wichtigsten halte:

• Es ist sehr einfach zu installieren und zu nutzen. Es ist leistungsstark. Und kostenlos.
• Es beeinträchtigt die Performance deiner Website nicht.
• Es bietet dir unbegrenzt Nutzeraufzeichnungen und Heatmaps.
• Es gibt keine Traffic-Limits, deshalb eignet es sich für alle Arten von Projekten.
• Du kannst es zu unbegrenzt vielen Projekten hinzufügen.
• Es gibt kein Datensampling. Das heißt, es zeigt dir alle Aufzeichnungen deiner Nutzer und die Heatmaps basieren auf nicht gesampelten Daten.
• Es erfüllt GDPR und CCPA.
• Du musst nicht für jede Seite, die du tracken willst, eigene Heatmaps erstellen. Das passiert automatisch.
• Du kannst zwei Versionen derselben Webseite analysieren, indem du ihre Heatmaps nebeneinander vergleichst.
• Du kannst Filter auf Sitzungsaufzeichnungen anwenden (Länder, Seiten…). So kannst du genau eingrenzen, was du sehen willst.
• Du kannst Microsoft Clarity auch mit GA4 integrieren. Dann kannst du GA4-Daten in Clarity sehen. Ich erkläre dir gleich, wie.
• Und zuletzt, obwohl ich es weniger nutze, als ich sollte: Du kannst Microsofts KI Fragen zu Clarity-Daten stellen. Sie versucht, dir zu antworten und richtige Schlussfolgerungen zu ziehen. Dadurch musst du nicht alle Sitzungen ansehen, was ich zugleich gut (spart Zeit) und schlecht (du verpasst Details) finde:

So implementierst du Microsoft Clarity auf deiner Website

Um das Tool zu nutzen, musst du nur zwei Dinge tun.

Schritt 1. Ein Konto erstellen

Als Erstes erstellst du hier ein Konto:

https://clarity.microsoft.com

Du kannst es direkt mit deinem Google- oder Microsoft-Konto erstellen.

Schritt 2. Den Code zu deiner Website hinzufügen

Du hast drei Alternativen, alle ziemlich einfach.

#1. Direkte Integration mit bestimmten (vielen) CMS:

Du weißt schon, das typische Plugin, das du zum Beispiel in WordPress installierst und bei dem du nur deine Konto-ID eingibst und fertig.

Einfach, aber mit einem Problem: du kannst die Cookies nicht leicht kontrollieren und möglicherweise setzt du beim Nutzer schon eines, bevor er das Banner akzeptiert.

Ja, es geht, indem du die Cookies in den Tool-Einstellungen deaktivierst und JavaScript hinzufügst, aber das ist nicht für jeden einfach.

#2. Über GTM

Deshalb bevorzuge ich diese zweite Option, damit du kontrollieren kannst, wann Cookies gesetzt werden, zum Beispiel über Consent Mode.

Und natürlich hat Google Tag Manager eine Vorlage dafür:

Eigentlich gibt es noch ein paar andere Vorlagen, aber die oben gezeigte ist die offizielle von Microsoft.

Wenn du keine Vorlagen verwenden möchtest, kannst du auch ein HTML-Tag erstellen und den vorherigen Code einfügen.

#3. Code manuell hinzufügen

Entweder indem du die Dateien deiner Website direkt bearbeitest oder über eine Funktion des CMS-Themes bzw. ein Plugin, mit dem du ihn hinzufügen kannst.

Persönlich mag ich diese Option am wenigsten. Aber sie ist eine Option.

Nächste Schritte

Sobald du das Tool auf eine der drei Arten auf deiner Website installiert hast, beginnt Clarity, Daten von deiner gesamten Website zu sammeln, sofern du nicht absichtlich etwas anderes eingestellt hast (zum Beispiel nur bestimmte Seiten in GTM ausgewählt hast).

Danach kannst du die Sitzungen deiner Nutzer und die Heatmaps beobachten.

Einfacher geht’s nicht.

Alternativen zu Clarity

Gut, jetzt kennst du das Tool, weißt, was es bietet und wie du es implementierst. Vielleicht gefällt es dir trotzdem aus irgendeinem Grund nicht.

Falls das so ist, hier die drei, die ich in verschiedenen Projekten am häufigsten verwendet habe.

Hotjar

Sehr gut und mit einem ziemlich ordentlichen kostenlosen Plan. Aber natürlich nicht annähernd unbegrenzt wie Clarity. Deshalb ist es inzwischen meine zweite Wahl.

Es bietet allerdings zusätzliche Funktionen, zum Beispiel die Möglichkeit, Nutzer über ein kleines eingebettetes Formular um Feedback zu bitten.

Yandex Metrica

Die russische Version von Google bot eine Plattform für digitale Analyse, die fast so leistungsstark war wie ihr amerikanischer Konkurrent. Neben ähnlichen Funktionen wie Google Analytics gab es in der kostenlosen Version auch Aufzeichnungen und Heatmaps.

Es war nicht ungewöhnlich, Websites zu finden, die dieses Tool zusammen mit Googles Lösung einsetzten.

Doch die verwendete Technologie wurde zum Nachteil. In immer mehr Projekten ließ sich das Tool gar nicht oder nur schwer implementieren, weshalb es nach und nach an Bedeutung verlor.

CrazyEgg

Das erste Tool, das ich verwendet habe, deshalb habe ich eine besondere Schwäche dafür.

Damals war es ziemlich top, weil der Tarif recht günstig war. Es konzentriert sich auf Heatmaps und bietet (Stand Januar 2024) keine Aufzeichnungen.

Neben diesen drei gibt es noch viele weitere Alternativen. Teure und günstige, mit mehr oder weniger Funktionen. Wenn dir also nicht gefällt, was Microsoft Clarity bietet (wirklich?), schau dich ein bisschen im Netz um.

Bonus: Microsoft Clarity mit Google Analytics 4 verwenden

Das wird nicht besonders groß beworben, deshalb wusstest du es vielleicht nicht: Clarity und GA4 lassen sich miteinander verknüpfen.

So verknüpfst du Microsoft Clarity mit GA4

Dafür —unter der Annahme, dass GA4 bereits auf deiner Website implementiert ist— musst du dich bei Clarity anmelden und zu Einstellungen > Einstellungen gehen und auf die Schaltfläche Starten klicken:

Du wirst aufgefordert, dich bei dem Google-Konto anzumelden, mit dem du Zugriff auf GA4 hast:

Die erforderlichen Berechtigungen zu erteilen:

Und schließlich die GA4-Property auszuwählen, mit der du es verknüpfen möchtest:

Danach sind beide Konten miteinander verknüpft:

Und du kannst GA4-Daten in Clarity sehen:

Ein letzter Schritt fehlt aber noch: Wir werden eine benutzerdefinierte Dimension in GA4 erstellen und zwar so (falls Clarity sie nicht automatisch erstellt hat, was manchmal passiert):

Wichtig ist, dass sie vom Typ Event ist und der Parameter “claritydimension”. Als Namen der Dimension kannst du nehmen, was du möchtest.

Vorteile der Verknüpfung von GA4 und Clarity

Gut, nachdem du beide verknüpft hast, willst du natürlich wissen, welche Vorteile das hat.

Neben dem eben erwähnten Vorteil —GA4-Daten in Clarity zu sehen und Nutzersegmente leichter zu filtern; es reicht, auf ein Element in den Diagrammen zu klicken, damit unten die Option erscheint, die entsprechende Heatmap oder die Aufzeichnungen anzusehen— halte ich den umgekehrten Weg für den größeren Vorteil: Clarity-Daten in GA4 sehen.

Dafür haben wir die benutzerdefinierte Dimension in GA4 erstellt.

Diese Dimension kannst du in Standardberichten oder in explorativen Berichten verwenden:

Sie zeigt dir die Clarity-URL, in der das entsprechende Analytics-Nutzersegment enthalten ist.

Das bedeutet, dass du die komplette Journey des Nutzers, der dich interessiert, auf der Website sehen kannst:

• Derjenige, der eine riesige Bestellung aufgegeben hat.
• Oder der andere, der meinte, irgendetwas funktioniere nicht.

Nicht schlecht, oder?

Wichtig, um die URLs zu sehen, musst du die Tabelle nach dieser Dimension sortieren:

Ein weiterer kleiner Nachteil: Die URL ist kein Link, du musst sie also selbst kopieren und in einen Browser-Tab einfügen . Für Google wäre das nicht schwer zu beheben, aber ich weiß nicht, ob sie daran überhaupt Interesse haben…

Fazit

Das war alles, was ich zu Microsoft Clarity sagen wollte.

In diesen mehr als 2500 Wörtern habe ich mich auf die wichtigsten Punkte konzentriert, die du kennen solltest: was Clarity ist, seine Vorteile, die wichtigsten Anwendungsfälle und die Möglichkeiten, es in deinem Projekt zu implementieren.

Einige fortgeschrittenere Optionen habe ich nicht aufgenommen, weil ich ehrlich gesagt nicht glaube, dass das nötig ist. Mit dem, was ich dir erklärt habe, hast du mehr als genug, um dich eine ganze Weile damit zu beschäftigen.

Ich gehe nämlich davon aus, dass du es schon implementiert hast, oder?

Falls nicht, wird’s Zeit.

Es ist nützlich, kostenlos und leistungsstark. Was willst du mehr?