Wat Microsoft Clarity is en hoe je het integreert met Google Analytics 4

Laatst legde ik je uit hoe je de volledige user journey van een gebruiker in GA4 kunt “zien”.

Ik zet “zien” tussen aanhalingstekens omdat je in werkelijkheid een lijst zag met alle events en pagina’s die een gebruiker op je website had bekeken. Maar je zag de navigatie zelf niet, dus geen opname van wat die persoon had gedaan.

Maar ook dat kan, alleen niet met GA4.

Er zijn verschillende alternatieven en in dit artikel vertel ik je over een van de beste: Microsoft Clarity.

Hier leg ik alles uit in een video:

En hieronder heb je het als tekst.

Wat is Microsoft Clarity?

Het is Microsofts tool voor analyse van gebruikersgedrag .

Dat betekent dat het je helpt begrijpen hoe gebruikers met je website omgaan, dus je zou kunnen zeggen dat het bijna meer een UX-tool is dan een tool voor digitale analytics.

Het is erg goed, eenvoudig te implementeren en te gebruiken en bovendien gratis.

Oftewel: het heeft alles.

Het is wel geen vervanging voor GA4 maar een aanvulling, omdat het functies biedt die GA4 niet heeft.

Waar MS Clarity voor dient

Ja, ik heb net uitgelegd wat Clarity is en welke functies het heeft, maar waar is het nu echt voor bedoeld?

Het helpt je te zien en terug te kijken wat gebruikers op je website hebben gedaan.

En je kunt dat geaggregeerd bekijken, met heatmaps of één voor één, met de sessie-opname van elke gebruiker.

Functionaliteiten

Zoals ik al zei heeft de tool de twee belangrijkste functies die ik net noemde.

Ik leg beide nog wat verder uit.

Heatmaps

Dit zijn weergaven van een specifieke pagina van de website waarop vooral het volgende te zien is:

• De elementen waarop gebruikers het meest klikken.
• De delen van de pagina die de meeste aandacht trekken.
• De scrolldiepte (hoe ver gebruikers naar beneden gaan).

Ik denk dat het duidelijk is hoe nuttig dit is voor dingen als menu’s (welke links het meest worden aangeklikt), of er niet-klikbare elementen zijn die gebruikers wel klikbaar denken te zijn, of wat interesse wekt (een afbeelding? Een copy? Een specifiek product?).

Kliks op links kun je zonder probleem met GA4 meten, maar voor de andere twee heb je een tool als deze nodig.

Om de heatmap te bekijken hoef je alleen op het kleine vlam-icoontje van een element te klikken:

Je kunt ook naar het betreffende onderdeel in het bovenste menu gaan en daar filteren:

Sessie-opname

Het concept lijkt op het GA4-rapport Gebruikersverkenner waar ik het laatst over had, alleen zie je nu de sessie zelf en niet een lijst met events:

Door te zien hoe de gebruiker met je pagina omgaat, kun je direct zien of die doet wat jij wilt / verwacht of niet.

En als dat niet zo is, kun je bedenken waarom. En je website aanpassen, als dat nodig is.

Pas op met sessie-opnames, ze zijn verslavend. Je bekijkt er twee en ineens zit je een halfuur lang video na video te kijken, net als op TikTok.

Om de opnames te bekijken heb je dezelfde twee opties als hiervoor:

• Klik op het camera-icoon van een willekeurig element in de grafieken.
• Ga naar het betreffende onderdeel in het menu.

Er is zelfs iets wat maar heel weinig tools toestaan: in realtime bekijken wat de gebruiker op dit moment op je website doet:

Links mijn huidige sessie op de website. Rechts wat ik doe (met ongeveer één seconde vertraging)

Geweldig.

Vooral wanneer IT iets vreemds ontdekt en jij het ze vervolgens realtime laat zien XD.

Belangrijkste use cases

Goed, je weet nu wat het kan, maar wanneer is het aan te raden en met welk doel?

Naar mijn mening zijn er verschillende behoorlijk nuttige use cases, en dit zijn ze.

Checkout

Het kroonjuweel.

Als je een ecommerce hebt of een dienst verkoopt waarvoor vrij lange formulieren nodig zijn (telecom, banken…) raad ik je aan twee dingen te doen:

1. Begin met het bekijken van de opnames van deze pagina (inclusief gebruikers op mobiele en desktopapparaten). Analyseer de belangrijkste problemen waar je gebruikers tegenaan lopen. Stel verbeteringen voor.
2. Bereken conversieratio’s van de checkout (gebruikers die kopen / gebruikers die binnenkomen) met een tool als GA4. Zo kun je controleren of de voorgestelde verbeteringen ook echt verbeteringen zijn.

Optioneel, en iets complexer, kun je fout-events versturen telkens wanneer er een fout optreedt in een checkout-veld. Zo kun je kwantificeren welke velden niet duidelijk zijn voor je gebruikers.

Belangrijkste landingpages / Verkooppagina’s

Deze pagina’s zijn om verschillende redenen belangrijk:

• Landingpages omdat ze het eerste contact van een gebruiker met je website zijn. Als ze niet werken en gebruikers afhaken, is elke advertentie-investering eigenlijk weggegooid geld.
• Verkooppagina’s omdat die de gebruiker moeten overtuigen om zijn kaart tevoorschijn te halen. Of zich op zijn minst te registreren.

Met dit in gedachten raad ik in beide gevallen opnieuw twee dingen aan, en beide in deze tool:

1. Bekijk de opnames van deze pagina’s. Net als bij de checkout.
2. Bekijk de Heatmaps: klikken gebruikers waar je verwacht? Kijken ze waar jij wilt dat ze kijken? Zo niet, waarom? Wat kun je veranderen?

Observeer, analyseer, pas aan en meet —bounce en conversieratio’s bijvoorbeeld—.

Nieuwe functionaliteiten of belangrijke wijzigingen

Wanneer je een belangrijke wijziging op de website doorvoert of iets nieuws lanceert, heb je geen idee hoe het gaat werken.

Nog minder als je geen gebruikerstest hebt gedaan, wat meestal het geval is.

Dus na een paar dagen kun je het beste —naast de behaalde resultaten vergelijken met de doelen— de heatmaps en gebruikersopnames van dat nieuwe onderdeel bekijken. Vooral als het niet werkt zoals verwacht.

Zo kun je dingen controleren zoals:

• Of er verkeer binnenkomt of niet.
• Of er verkeer binnenkomt maar niet doet wat je verwacht.
• Of de gebruiker leest en scrollt.
• Mogelijke fouten.

Met andere woorden: je beperkt de mogelijke redenen waarom het niet werkt zoals je had verwacht.

Met Microsoft Clarity is dit soort analyse heel eenvoudig.

Trouwens, als je leuk vindt wat je leest maar nog niet hebt besloten het op je website te implementeren, kun je het ook proberen zonder het te installeren hier.

Pagina’s met fouten

Misschien heb je al een vorm van foutmeting in GA4 geïmplementeerd. De meest voorkomende zijn JavaScript-fouten of fout-events in formulieren.

Wat je dan moet doen, is in GA4 bekijken op welke pagina’s die fouten optreden en of dat gebeurt bij een bepaald type browser / apparaat.

Daarna probeer je het zelf te reproduceren.

Als dat niet lukt, moet je gebruikersopnames bekijken met dat type apparaat of browser om te zien wat ze doen waardoor de website fout gaat.

Zodra je de fout hebt gevonden, komt het makkelijke deel: hem oplossen. XD

Menu’s

Hoewel je events kunt maken om klikken op elk menu-item in GA4 te meten, is een heatmap hiervoor veel sneller.

Zo zie je snel welke onderdelen de meeste interesse bij je gebruikers wekken.

Handig op elke website en ideaal om links naar verschillende categorieën in een ecommerce te analyseren.

Filters in ecommerce

En als we het over ecommerce hebben: het gebruik van filters tracken in GA4 is niet zo gebruikelijk. Daarom zal een heatmap je weliswaar vaak niet vertellen welke opties een gebruiker heeft gekozen, maar wel welke filters het meest worden gebruikt.

Handig wanneer je veel filters hebt en ze in twee niveaus wilt verdelen: de gebruikelijke —op het eerste niveau— en de geavanceerde —verborgen achter een klik op een link—.

Voordelen van Microsoft Clarity

Je weet nu wat je met de tool kunt meten, wat hij je kan bieden en waarom ik aanraad zo snel mogelijk te beginnen.

Maar voor het geval ik je nog steeds niet heb overtuigd, hier zijn de voordelen die ik het belangrijkst vind:

• Het is heel eenvoudig te installeren en te gebruiken. Het is krachtig. En gratis.
• Het heeft geen invloed op de prestaties van je website.
• Het biedt onbeperkte gebruikersopnames en heatmaps.
• Er zijn geen verkeerslimieten, dus het werkt voor elk soort project.
• Je kunt het aan een onbeperkt aantal projecten toevoegen.
• Er is geen datasampling. Dat wil zeggen: je ziet alle opnames van je gebruikers en de heatmaps zijn gebaseerd op niet-gesamplede data.
• Het voldoet aan GDPR en CCPA.
• Je hoeft niet voor elke pagina die je wilt tracken aparte heatmaps te maken. Dat gebeurt automatisch.
• Je kunt twee versies van dezelfde webpagina analyseren door hun heatmaps naast elkaar te vergelijken.
• Je kunt filters toepassen op sessie-opnames (landen, pagina’s…). Zo kun je precies afbakenen wat je wilt zien.
• Je kunt Microsoft Clarity ook integreren met GA4. Dan kun je GA4-data in Clarity bekijken. Ik leg je nu uit hoe.
• Tot slot, hoewel ik het minder gebruik dan ik zou moeten: je kunt Microsofts AI vragen stellen over Clarity-data. Die probeert je te antwoorden en de juiste conclusies te trekken. Daardoor hoef je niet alle sessies te bekijken, wat ik tegelijk goed vind (het bespaart tijd) en slecht (je mist details):

Microsoft Clarity implementeren op je website

Om de tool te gebruiken hoef je maar twee dingen te doen.

Stap 1. Een account aanmaken

Het eerste is een account aanmaken via:

https://clarity.microsoft.com

Je kunt het rechtstreeks aanmaken met je Google- of Microsoft-account.

Stap 2. De code aan je website toevoegen

Je hebt drie alternatieven, allemaal vrij eenvoudig.

#1. Directe integratie met bepaalde (veel) CMS’en:

Je weet wel, de typische plugin die je bijvoorbeeld in WordPress installeert en waarin je alleen je account-ID hoeft in te voeren.

Makkelijk, maar er is een probleem: je hebt niet eenvoudig controle over de cookies en mogelijk plaats je al een cookie voordat de gebruiker de banner accepteert.

Ja, het kan, door cookies in de toolinstellingen uit te schakelen en JavaScript toe te voegen, maar dat is niet voor iedereen eenvoudig.

#2. Via GTM

Daarom geef ik de voorkeur aan deze tweede optie, zodat je kunt bepalen wanneer cookies worden geplaatst, bijvoorbeeld via Consent Mode.

En natuurlijk heeft Google Tag Manager een template hiervoor:

Er zijn eigenlijk nog een paar templates, maar die hierboven is de officiële van Microsoft.

Als je liever geen templates gebruikt, kun je ook een HTML-tag maken en de eerdere code erin plakken.

#3. De code handmatig toevoegen

Ofwel door de bestanden van je website direct te bewerken, of via een functie van het CMS-thema of een plugin waarmee je de code kunt toevoegen.

Persoonlijk vind ik dit de minst prettige optie. Maar het is een optie.

Volgende stappen

Zodra je de tool op een van de drie manieren op je website hebt geïnstalleerd, begint Clarity data van je hele website te verzamelen, tenzij je bewust iets anders hebt ingesteld (zoals alleen bepaalde pagina’s selecteren in GTM).

Daarna kun je de sessies van je gebruikers en de heatmaps gaan bekijken.

Makkelijker kan niet.

Alternatieven voor Clarity

Goed, nu je de tool kent, weet wat hij biedt en hoe je hem implementeert, kan het nog steeds zijn dat je hem om een of andere reden niet prettig vindt.

Voor het geval dat zo is, geef ik je de drie die ik in verschillende projecten het vaakst heb gebruikt.

Hotjar

Erg goed en met een behoorlijk degelijk gratis abonnement. Maar natuurlijk lang niet zo onbeperkt als Clarity. Daarom is het inmiddels mijn tweede keuze.

Het biedt wel extra functies, zoals de mogelijkheid om gebruikers om feedback te vragen via een klein formulier dat in de website wordt ingebed.

Yandex Metrica

De Russische versie van Google bood een platform voor digitale analytics dat bijna net zo krachtig was als zijn Amerikaanse rivaal. Naast functies die vergelijkbaar waren met Google Analytics bood het in de gratis versie ook opnames en heatmaps.

Het was niet ongewoon om websites te zien die deze tool samen met die van Google gebruikten.

Maar de gebruikte technologie werkte in hun nadeel. Bij steeds meer projecten kon het niet of moeilijk worden geïmplementeerd, waardoor het langzaam in verval raakte.

CrazyEgg

De eerste die ik gebruikte, dus ik heb er een speciaal zwak voor.

Destijds was het echt top, omdat het abonnement vrij goedkoop was. Het richt zich op heatmaps en heeft (in januari 2024) geen optie voor opnames.

Naast deze drie zijn er nog veel meer alternatieven. Duur en goedkoop, met meer en minder functies. Dus als je niet blij wordt van wat Microsoft Clarity biedt (echt niet?), kijk dan wat rond op internet.

Bonus: Microsoft Clarity gebruiken met Google Analytics 4

Het wordt niet erg nadrukkelijk geadverteerd en misschien wist je het daarom niet, maar Clarity en GA4 kunnen aan elkaar worden gekoppeld.

Microsoft Clarity koppelen aan GA4

Daarvoor —ervan uitgaande dat GA4 al op je website is geïmplementeerd— moet je inloggen op je Clarity-account en naar Instellingen > Instellingen gaan en op de knop Aan de slag klikken:

Je wordt gevraagd in te loggen op het Google-account waarmee je toegang hebt tot GA4:

De benodigde machtigingen te geven:

En tot slot de GA4-property te selecteren waaraan je hem wilt koppelen:

Daarna zijn beide accounts gekoppeld:

En kun je GA4-data in Clarity bekijken:

Maar er ontbreekt nog één laatste stap: we gaan een aangepaste dimensie in GA4 maken zoals hier (als Clarity die niet automatisch heeft aangemaakt, wat soms gebeurt):

Belangrijk is dat het type event is en dat de parameter “claritydimension” is. Als naam voor de dimensie kun je gebruiken wat je wilt.

Voordelen van GA4 en Clarity koppelen

Goed, zodra je ze hebt gekoppeld wil je natuurlijk weten wat de voordelen daarvan zijn.

Naast het voordeel dat ik net noemde —GA4-data in Clarity zien en makkelijker de gebruikerssegmenten filteren die je wilt analyseren; je hoeft alleen op een element in de grafieken te klikken en onderaan verschijnt de optie om de bijbehorende heatmap of opnames te bekijken— vind ik het omgekeerde eigenlijk nog nuttiger: Clarity-data in GA4 bekijken.

Daarvoor hebben we die aangepaste dimensie in GA4 gemaakt.

Je kunt deze dimensie gebruiken in standaardrapporten of Verkenningen:

Wat je ziet is de Clarity-URL waarin het bijbehorende Analytics-gebruikerssegment is opgenomen.

Dat betekent dat je de volledige journey van de gebruiker waarin je geïnteresseerd bent op de website kunt bekijken:

• Diegene die een enorme bestelling plaatste.
• Of die andere die zei dat er iets niet werkte.

Niet slecht, toch?

Belangrijk, om de URL’s te zien moet je de tabel op deze dimensie sorteren:

Een ander klein nadeel is dat de URL geen link is, dus je moet hem zelf kopiëren en plakken in een browsertab. Voor Google zou dit niet moeilijk te verbeteren zijn, al weet ik niet of ze daar echt belang bij hebben…

Eindconclusies

Dat was alles wat ik over Microsoft Clarity wilde vertellen.

In deze meer dan 2500 woorden heb ik me gericht op de belangrijkste dingen die ik wilde dat je wist: wat Clarity is, de voordelen, de belangrijkste use cases en de manieren om het in je project te implementeren.

Ik heb enkele meer geavanceerde opties niet opgenomen omdat ik eerlijk gezegd niet denk dat dat nodig is. Met wat ik je heb uitgelegd heb je meer dan genoeg om er een hele tijd mee te spelen.

Want ik neem aan dat je het inmiddels hebt geïmplementeerd, toch?

Zo niet, dan wordt het tijd.

Het is nuttig, gratis en krachtig. Wat wil je nog meer?