Vad Microsoft Clarity är och hur du integrerar det med Google Analytics 4

Häromdagen förklarade jag hur du kan “se” en användares hela resa i GA4.

Jag sätter “se” inom citattecken eftersom det du faktiskt såg var en lista över alla events och sidor som en användare hade besökt på din webbplats. Men du såg inte själva navigeringen, alltså en inspelning av vad personen hade gjort.

Men det går också att få, bara inte med GA4.

Det finns flera alternativ och i den här artikeln ska jag berätta om ett av de bästa: Microsoft Clarity.

Här förklarar jag allt i video:

Och nedanför har du det i text.

Vad är Microsoft Clarity?

Det är Microsofts verktyg för analys av användarbeteende .

Det betyder att det hjälper dig att förstå hur användaren interagerar med din webbplats, så man kan nästan säga att det är mer ett UX-verktyg än ett verktyg för digital analys.

Det är väldigt bra, enkelt att implementera och använda och dessutom gratis.

Kort sagt, det har allt.

Det är dock inte en ersättning för GA4 utan ett komplement, eftersom det erbjuder funktioner som GA4 inte har.

Vad MS Clarity är till för

Ja, jag har precis förklarat vad Clarity är och vilka funktioner det har, men vad är det egentligen till för?

Det hjälper dig att se och granska vad användarna har gjort på din webbplats.

Och du kan se det aggregerat, med heatmaps eller en användare i taget, med sessionsinspelningen för varje användare.

Funktioner

Som sagt har verktyget de två huvudfunktionerna som redan nämnts.

Jag ska förklara lite mer om var och en.

Heatmaps

Det är visualiseringar av en specifik sida på webbplatsen där vi främst ser:

• De element som användarna klickar mest på.
• De delar av sidan som drar till sig mest uppmärksamhet.
• Scroll-djupet (hur långt ner användarna går).

Jag tycker att det är uppenbart hur användbart det här är för saker som menyer (vilka länkar som klickas mest), om det finns element som inte går att klicka på men som användaren tror är klickbara, eller vad som väcker intresse (en bild? En copy? En viss produkt?).

Klick på länkar kan mätas utan problem med GA4, men för de andra två behöver du ett verktyg som detta.

För att se heatmapen behöver du bara klicka på den lilla flam-ikonen på något av elementen:

Du kan också gå till motsvarande avsnitt i toppmenyn och filtrera därifrån:

Session recording

Konceptet liknar GA4-rapporten User Explorer som jag berättade om häromdagen, men nu ser du själva sessionen, inte en lista över events:

Genom att se hur användaren interagerar med din sida kan du direkt se om personen gör det du vill / förväntar dig eller inte.

Och om inte kan du fundera på varför. Och ändra webbplatsen, om det behövs.

Se upp med sessionsinspelningar, de är beroendeframkallande. Du tittar på ett par och plötsligt har du suttit en halvtimme och sett video efter video som på TikTok.

För att se inspelningarna har du samma två alternativ som tidigare:

• Klicka på kameraikonen på valfritt element i diagrammen.
• Gå till motsvarande avsnitt i menyn.

Dessutom finns det en sak som väldigt få verktyg låter dig göra, nämligen att se i realtid vad användaren gör på din webbplats just nu:

Till vänster min aktuella session på webbplatsen. Till höger vad jag gör (med ungefär en sekunds fördröjning)

Riktigt häftigt.

Särskilt när IT upptäcker något konstigt och du går dit och visar det i realtid XD.

Viktigaste användningsfallen

Bra, nu vet du vad det kan göra, men när är det lämpligt att använda det och med vilket syfte?

Enligt mig finns det flera ganska rekommenderade användningsfall, och de är dessa.

Checkout

Kronjuvelen.

Om du har en ecommerce eller säljer någon tjänst som kräver ganska långa formulär (telekom, bank…) rekommenderar jag att du gör två saker:

1. Börja titta på inspelningarna av den här sidan (inklusive användare på mobila enheter och desktop). Analysera de viktigaste problemen som dina användare möter. Föreslå förbättringar.
2. Ta fram konverteringsgrader för checkout (användare som köper / användare som kommer in) med ett verktyg som GA4. Då kan du kontrollera om de föreslagna förbättringarna faktiskt är förbättringar.

Som ett valfritt och lite mer komplext steg kan du skicka fel-events varje gång ett fel uppstår i ett checkout-fält. På så sätt kan du kvantifiera vilka fält som är otydliga för dina användare.

Viktigaste landing pages / Försäljningssidor

De här sidorna är viktiga av flera skäl:

• Landing pages eftersom de är användarens första kontakt med din webbplats. Om de inte fungerar och användarna studsar bort är varje annonsinvestering i princip pengar i sjön.
• Försäljningssidor eftersom det är de som ska övertyga användaren att plocka fram kortet. Eller åtminstone registrera sig.

Med det i åtanke föreslår jag återigen två saker i båda fallen, och båda i det här verktyget:

1. Titta på inspelningarna av de här sidorna. Precis som i checkout.
2. Titta på värmekartorna: klickar användarna där du förväntar dig? Tittar de där du vill att de ska titta? Om inte, varför? Vad kan du ändra?

Observera, analysera, gör ändringar och mät —bounce och konverteringsgrader till exempel—.

Nya funktioner eller viktiga ändringar

När du implementerar en viktig ändring på webbplatsen eller lanserar något nytt har du ingen aning om hur det kommer att fungera.

Ännu mindre om du inte har gjort användartester, vilket oftast är fallet.

Så efter några dagar är det bästa du kan göra —utöver att jämföra resultaten med målen— att titta på heatmaps och användarinspelningar för den nya delen. Särskilt om den inte fungerar som du förväntar dig.

Då kan du kontrollera saker som:

• Om trafik kommer in eller inte.
• Om trafik kommer in men inte gör det du förväntar dig.
• Om användaren läser och scrollar.
• Möjliga fel.

Med andra ord kan du ringa in orsakerna till att det inte fungerar som du hade tänkt.

Med Microsoft Clarity är den här typen av analys väldigt enkel.

Förresten, om du gillar det du läser men ännu inte har bestämt dig för att implementera det på din webbplats kan du testa det utan att installera det här.

Sidor med fel

Du kanske redan har någon form av felmätning implementerad i GA4. Vanligast är JavaScript-fel eller fel-events i formulär.

Då behöver du titta i GA4 på vilka sidor felen uppstår och om det händer med någon särskild webbläsare / enhet.

Efter det är nästa steg att försöka återskapa det själv.

Om du inte lyckas får du titta på användarinspelningar med den typen av enhet eller webbläsare för att se vad de gör som får webbplatsen att fallera.

När felet väl är hittat kommer den enkla delen: att fixa det. XD

Menyer

Även om du kan skapa events för att mäta klicken på varje menyelement i GA4 är det mycket snabbare att använda en heatmap.

På så sätt ser du snabbt vilka delar som skapar mest intresse hos användarna.

Perfekt på alla webbplatser och särskilt bra för att analysera länkar till olika kategorier i en ecommerce.

Filter i ecommerce

Och på tal om ecommerce är det inte särskilt vanligt att tracka användningen av filter i GA4. Därför kommer en heatmap, även om den ofta inte visar exakt vilka alternativ användaren valde, att visa vilka filter som används mest.

Perfekt när du har många filter och vill dela dem i två nivåer: de vanliga —på första nivån— och de avancerade —dolda bakom ett klick på en länk—.

Fördelar med Microsoft Clarity

Nu vet du vad du kan börja mäta med verktyget, vad det kan ge dig och varför jag rekommenderar att du börjar så snart som möjligt.

Men om jag fortfarande inte har övertygat dig kommer här de fördelar som jag tycker är viktigast:

• Det är väldigt enkelt att installera och använda. Det är kraftfullt. Och gratis.
• Det påverkar inte prestandan på din webbplats.
• Det ger dig obegränsat med användarinspelningar och heatmaps.
• Det finns inga trafikgränser, så det fungerar för alla typer av projekt.
• Du kan lägga till det i obegränsat antal projekt.
• Det finns ingen datasampling. Det innebär att du ser alla användarnas inspelningar och att heatmaps bygger på osamplad data.
• Det följer GDPR och CCPA.
• Du behöver inte skapa en heatmap för varje sida du vill tracka. Det görs automatiskt.
• Du kan analysera två versioner av samma webbsida genom att jämföra deras heatmaps sida vid sida.
• Du kan använda filter på sessionsinspelningar (länder, sidor…). Så du kan avgränsa exakt vad du vill se.
• Du kan också integrera Microsoft Clarity med GA4. Då kan du se GA4-data i Clarity. Nu ska jag förklara hur.
• Till sist, även om jag använder det mindre än jag borde, kan du ställa frågor om Clarity-data till Microsofts AI, som försöker svara och dra rätt slutsatser. Då slipper du titta på alla sessioner, vilket jag tycker är både bra (sparar tid) och dåligt (du missar detaljer):

Så implementerar du Microsoft Clarity på din webbplats

För att börja använda verktyget behöver du bara göra två saker.

Steg 1. Skapa ett konto

Det första är att skapa ett konto här:

https://clarity.microsoft.com

Du kan skapa det direkt med ditt Google- eller Microsoft-konto.

Steg 2. Lägg till koden på din webbplats

Du har tre alternativ, alla ganska enkla.

#1. Direkt integration med vissa (många) CMS:

Du vet, den typiska pluginen som du installerar i WordPress (till exempel) där du bara behöver ange ditt konto-ID och sedan är det klart.

Enkelt, men det finns ett problem: du kan inte enkelt styra cookies och det är möjligt att du sätter någon cookie innan användaren har accepterat bannern.

Ja, det går, genom att stänga av cookies i verktygets inställningar och lägga till JavaScript, men det är inte enkelt för alla.

#2. Via GTM

Därför föredrar jag det här andra alternativet, så att du kan styra när cookies sätts, till exempel via Consent Mode.

Och självklart har Google Tag Manager en mall för det:

Det finns faktiskt några fler mallar, men den jag visar ovan är Microsofts officiella.

Om du inte gillar att använda mallar kan du också skapa en HTML-tagg och klistra in koden från tidigare.

#3. Lägg till koden manuellt

Antingen genom att ändra webbplatsens filer direkt eller via någon funktion i CMS-temat eller en plugin som låter dig lägga till den.

Personligen är det alternativet jag gillar minst. Men det är ett alternativ.

Nästa steg

När du har installerat verktyget på webbplatsen på något av de tre sätten börjar Clarity samla in data från hela webbplatsen, om du inte medvetet gjort något annat (som att bara välja vissa sidor i GTM).

Sedan kan du börja titta på användarnas sessioner och heatmaps.

Enklare går inte.

Alternativ till Clarity

Bra, nu när du känner till verktyget, vad det ger och hur det implementeras kanske du ändå inte gillar det av någon anledning.

Om så är fallet får du här de tre jag har använt mest i olika projekt.

Hotjar

Väldigt bra och med en ganska vettig gratisplan. Men förstås inte nästan obegränsad som Clarity. Därför har det blivit mitt andrahandsval.

Det erbjuder dock extra funktioner, som att be användarna om feedback via ett litet formulär som bäddas in på webbplatsen.

Yandex Metrica

Den ryska versionen av Google erbjöd en plattform för digital analys som nästan var lika kraftfull som den amerikanska konkurrenten. Förutom funktioner liknande Google Analytics erbjöd gratisversionen inspelningar och heatmaps.

Det var inte ovanligt att se webbplatser som använde det här verktyget tillsammans med Googles.

Men tekniken de använde blev en nackdel. I allt fler projekt gick det inte att implementera eller var krångligt, och därför tappade det gradvis mark.

CrazyEgg

Det första jag använde, så jag har en särskild förkärlek för det.

På den tiden var det riktigt top eftersom planen var ganska billig. Det fokuserar på heatmaps och har (i januari 2024) inget alternativ för inspelningar.

Utöver de här tre finns det många fler alternativ. Dyra och billiga, med fler och färre funktioner. Så om du inte gillar det Microsoft Clarity erbjuder (på riktigt?), kika runt lite på nätet.

Bonus: så använder du Microsoft Clarity med Google Analytics 4

Det marknadsförs inte särskilt mycket, så du kanske inte visste det, men Clarity och GA4 kan kopplas ihop.

Så kopplar du Microsoft Clarity till GA4

För att göra det —förutsatt att du redan har GA4 implementerat på webbplatsen— måste du logga in på ditt Clarity-konto och gå till Inställningar > Inställningar och klicka på knappen Kom igång:

Du blir ombedd att logga in på det Google-konto där du har åtkomst till GA4:

Ge de behörigheter som behövs:

Och slutligen välja den GA4-property som du vill koppla det till:

När det är klart är båda kontona kopplade:

Och du kan se GA4-data inne i Clarity:

Men en sista liten detalj återstår: vi ska skapa en anpassad dimension i GA4 så här (om Clarity inte redan har skapat den automatiskt, vilket händer ibland):

Det viktiga är att typen är event och att parametern är “claritydimension”. Som namn på dimensionen kan du använda vad du vill.

Fördelar med att koppla GA4 och Clarity

Bra, när du väl har kopplat dem vill du förstås veta vilka fördelar det ger.

Förutom den jag nyss nämnde —att se GA4-data i Clarity och enklare filtrera de användarsegment du vill analysera; det räcker att klicka på ett element i diagrammen så visas alternativet att se motsvarande heatmap eller inspelningar nedanför— tycker jag att den större fördelen är det omvända: se Clarity-data i GA4.

Det är därför vi skapade den anpassade dimensionen i GA4.

Du kan använda den här dimensionen i standardrapporter eller Utforskningar:

Det den visar är Clarity-URL:en som innehåller motsvarande Analytics-användarsegment.

Det betyder att du kan visualisera hela journey för användaren du är intresserad av på webbplatsen:

• Den som gjorde en jättestor beställning.
• Eller den andra som sa att något inte fungerade.

Inte illa, eller hur?

Viktigt, för att se URL:erna måste du sortera tabellen efter den här dimensionen:

En annan liten nackdel är att URL:en inte är en länk, så du måste kopiera och klistra in den själv i en webbläsarflik. Det skulle inte vara svårt för Google att fixa, även om jag inte vet om de är särskilt intresserade av att göra det…

Slutsatser

Det var allt jag ville säga om Microsoft Clarity.

I de här drygt 2500 orden har jag fokuserat på de viktigaste sakerna jag ville att du skulle känna till: vad Clarity är, dess fördelar, de viktigaste användningsfallen och hur du kan implementera det i ditt projekt.

Jag har inte tagit med vissa mer avancerade alternativ eftersom jag ärligt talat inte tycker att det behövs. Med det jag har förklarat har du mer än tillräckligt för att leka med det ett bra tag.

För jag antar att du redan har implementerat det, eller hur?

Om inte är det hög tid.

Det är användbart, gratis och kraftfullt. Vad mer kan man begära?