Che cos’è Microsoft Clarity e come integrarlo con Google Analytics 4

L’altro giorno ti spiegavo come “vedere” il percorso completo di un utente in GA4.

Metto “vedere” tra virgolette perché in realtà quello che vedevi era un elenco di tutti gli eventi e le pagine visitate da un utente sul tuo sito. Ma non visualizzavi la navigazione vera e propria, cioè una registrazione di ciò che aveva fatto quella persona.

Ma si può ottenere anche questo, solo non con GA4.

Ci sono diverse alternative e in questo articolo ti parlerò di una delle migliori: Microsoft Clarity.

Qui ti spiego tutto in video:

E sotto trovi tutto in testo.

Che cos’è Microsoft Clarity?

È lo strumento di analisi del comportamento degli utenti di Microsoft.

Questo significa che ti aiuta a capire l’interazione dell’utente con il tuo sito web, quindi potremmo dire che è quasi più uno strumento UX che di digital analytics.

È molto valido, facile da implementare e da usare e, inoltre, è gratuito.

Insomma, ha tutto.

Detto questo, non sostituisce GA4: è un complemento, perché offre funzionalità che GA4 non ha.

A cosa serve MS Clarity

Sì, ti ho appena spiegato che cos’è Clarity e quali funzionalità ha, ma a cosa serve davvero?

Ti serve per vedere e rivedere quello che hanno fatto gli utenti sul tuo sito.

E puoi vederlo in forma aggregata, con le mappe di calore oppure anche uno per uno, con la registrazione della sessione di ogni utente.

Funzionalità

Come ti dicevo, lo strumento ha le due funzionalità principali già citate.

Ti spiego un po’ meglio ciascuna.

Mappe di calore

Sono rappresentazioni di una pagina specifica del sito in cui ci vengono mostrati soprattutto:

• Gli elementi più cliccati dagli utenti.
• Le parti della pagina che attirano più attenzione.
• Il livello di scroll (fin dove scendono gli utenti).

Credo sia evidente quanto sia utile per cose come i menu (quali link vengono cliccati di più), capire se ci sono elementi non cliccabili che l’utente pensa lo siano o che cosa genera interesse (un’immagine? Un copy? Un prodotto specifico?).

I clic sui link si possono misurare con GA4 senza problemi, ma per le altre due cose serve uno strumento come questo.

Per vedere la mappa di calore basta cliccare sull’icona a forma di fiammella di uno qualsiasi degli elementi:

Puoi anche andare nella sezione corrispondente del menu superiore e filtrare da lì:

Registrazione della sessione

Il concetto è simile al report Esplorazione utente di GA4 di cui ti parlavo l’altro giorno, solo che adesso vedi la sessione vera e propria, non un elenco di eventi:

Vedendo come l’utente interagisce con la tua pagina puoi capire direttamente se fa quello che vuoi / ti aspetti oppure no.

E se non lo fa, ragionare sul perché. E cambiare il sito, se serve.

Occhio alle registrazioni delle sessioni, creano dipendenza. Ne guardi un paio e all’improvviso è passata mezz’ora a vedere video uno dopo l’altro come su TikTok.

Per vedere le registrazioni hai le stesse due opzioni di prima:

• Cliccare sull’icona a forma di videocamera di qualsiasi elemento nei grafici.
• Andare nella sezione corrispondente del menu.

In più, c’è una cosa che pochissimi strumenti permettono: visualizzare in tempo reale quello che l’utente sta facendo sul tuo sito in questo momento:

A sinistra, la mia sessione attuale sul sito. A destra, quello che sto facendo (con un ritardo di circa un secondo)

Una figata.

Soprattutto quando IT rileva qualcosa di strano e tu glielo mostri in tempo reale XD.

Principali casi d’uso

Bene, adesso sai cosa può fare, ma quando conviene usarlo e con quale obiettivo?

Secondo me ci sono diversi casi d’uso molto consigliabili, e sono questi.

Checkout

Il fiore all’occhiello.

Se hai un ecommerce o vendi un servizio che richiede moduli abbastanza lunghi (telefonia, banca…) ti consiglio di fare due cose:

1. Inizia a guardare le registrazioni di questa pagina (includendo utenti da dispositivi mobili e desktop). Analizza i principali problemi che affrontano i tuoi utenti. Proponi miglioramenti.
2. Calcola i tassi di conversione del checkout (utenti che acquistano / utenti che entrano) con uno strumento come GA4. Così verificherai se i miglioramenti proposti sono davvero miglioramenti.

In via opzionale, e in modo un po’ più complesso, puoi inviare eventi di errore ogni volta che se ne verifica uno in un campo del checkout. In questo modo potrai quantificare quali campi non risultano chiari ai tuoi utenti.

Landing page principali / Pagine di vendita

Queste pagine sono importanti per diversi motivi:

• Le landing page perché sono il primo contatto di un utente con il tuo sito. Se non funzionano e gli utenti rimbalzano, qualsiasi investimento pubblicitario sarà come buttarlo nella spazzatura.
• Le pagine di vendita perché devono convincere l’utente a tirare fuori la carta. O almeno a registrarsi.

Sapendo questo, in entrambi i casi ti suggerisco di nuovo due cose, entrambe in questo strumento:

1. Guarda le registrazioni di queste pagine. Proprio come nel checkout.
2. Guarda le mappe di calore: gli utenti cliccano dove ti aspetti? Guardano dove vuoi che guardino? Se non lo fanno, perché? Che cosa puoi cambiare?

Osserva, analizza, fai modifiche e misura —rimbalzo e tassi di conversione, per esempio—.

Nuove funzionalità o cambiamenti importanti

Quando implementi un cambiamento importante sul sito, o lanci qualcosa di nuovo, non hai idea di come funzionerà.

Ancora meno se non hai fatto test con gli utenti, che di solito è la norma.

Quindi, dopo qualche giorno, la cosa migliore da fare —oltre a confrontare i risultati ottenuti con gli obiettivi— è guardare le mappe di calore e le registrazioni degli utenti di quella nuova sezione. Soprattutto se non sta funzionando come previsto.

Così potrai verificare cose come:

• Se sta arrivando traffico oppure no.
• Se arriva traffico, ma non fa quello che ti aspetti.
• Se l’utente legge e fa scroll.
• Possibili errori.

In altre parole, restringerai i motivi per cui la cosa non sta funzionando come ti aspettavi.

Con Microsoft Clarity è molto semplice fare questo tipo di analisi.

A proposito, se ti piace quello che stai leggendo ma non hai ancora deciso di implementarlo sul tuo sito, sappi che puoi provarlo senza installarlo qui.

Pagine con errori

Potresti avere già implementato qualche misurazione degli errori in GA4. Le più comuni sono gli errori JavaScript o gli eventi di errore nei moduli.

Bene, quello che devi fare è guardare in GA4 su quali pagine si verificano questi errori e se accadono con un browser / dispositivo specifico.

Fatto questo, il passo successivo è provare a replicarlo tu.

Se non ci riesci, dovrai guardare le registrazioni degli utenti con quel tipo di dispositivo o browser, per vedere cosa fanno che manda in errore il sito.

Una volta scoperto l’errore, arriva la parte facile: correggerlo. XD

Menu

Anche se puoi creare eventi per quantificare i clic su ogni elemento di un menu in GA4, è molto più rapido usare una mappa di calore.

Così vedrai rapidamente quali sezioni generano più interesse nei tuoi utenti.

Ottimo su qualsiasi sito e ideale per analizzare i link alle diverse categorie in un ecommerce.

Filtri nell’ecommerce

E se parliamo di ecommerce, non è così comune tracciare l’uso dei filtri in GA4. Per questo una mappa di calore, anche se in molti casi non ti dirà quali opzioni ha scelto l’utente, ti mostrerà quali filtri vengono usati di più.

Ottimo quando hai molti filtri e vuoi dividerli in due livelli: quelli abituali —al primo livello— e quelli avanzati —nascosti dietro un clic su un link—.

Vantaggi di Microsoft Clarity

Adesso sai cosa puoi iniziare a misurare con lo strumento, che cosa può offrirti e perché ti consiglio di iniziare il prima possibile.

Ma se ancora non ti ho convinto, ecco un riepilogo dei vantaggi che considero più importanti:

• È molto facile da installare e usare. È potente. Ed è gratuito.
• Non influisce sulle prestazioni del tuo sito.
• Ti offre registrazioni degli utenti e mappe di calore illimitate.
• Non ci sono limiti di traffico, quindi va bene per ogni tipo di progetto.
• Puoi aggiungerlo a progetti illimitati.
• Non c’è campionamento dei dati. Cioè, ti mostra tutte le registrazioni dei tuoi utenti e le mappe di calore si basano su dati non campionati.
• È conforme a GDPR e CCPA.
• Non è necessario creare mappe per ogni pagina che vuoi tracciare. Lo fa automaticamente.
• Puoi analizzare due versioni della stessa pagina web confrontando le due mappe di calore fianco a fianco.
• Puoi applicare filtri alle registrazioni delle sessioni (paesi, pagine…). Così puoi delimitare quello che vuoi vedere.
• Puoi anche integrare Microsoft Clarity con GA4. Così puoi vedere i dati di GA4 in Clarity. Adesso ti spiego come.
• Infine, anche se la uso meno di quanto dovrei, sappi che puoi fare domande sui dati di Clarity all’IA di Microsoft, che cercherà di risponderti e trarre conclusioni corrette. Così non devi guardare tutte le sessioni, cosa che considero insieme positiva (fa risparmiare tempo) e negativa (ti perderai dei dettagli):

Come implementare Microsoft Clarity sul tuo sito

Per iniziare a usare lo strumento devi fare solo due cose.

Passo 1. Creare un account

La prima cosa è creare un account da qui:

https://clarity.microsoft.com

Puoi crearlo direttamente con il tuo account Google o Microsoft.

Passo 2. Aggiungere il codice al tuo sito

Hai tre alternative, tutte abbastanza semplici.

#1. Integrazione diretta con alcuni (molti) CMS:

Sai, il classico plugin che installi in WordPress (per esempio) e in cui devi solo inserire l’ID dell’account e hai finito.

Facile, ma c’è un problema: non controlli facilmente i cookie e potresti impostarne qualcuno sull’utente prima che accetti il banner.

Sì, si può fare, togliendo i cookie dalla configurazione dello strumento e aggiungendo JavaScript, ma non è semplice per tutti.

#2. Tramite GTM

Per questo preferisco questa seconda opzione, così puoi controllare quando vengono impostati i cookie, per esempio tramite Consent Mode.

E naturalmente Google Tag Manager ha un template per farlo:

In realtà ci sono anche altri template, ma quello che ti mostro sopra è quello ufficiale di Microsoft.

Se non ti piace usare template, puoi anche creare un tag di tipo HTML e incollare il codice di prima.

#3. Aggiungere il codice manualmente

Sia modificando direttamente i file del tuo sito, sia tramite qualche funzione del tema del CMS o un plugin che ti permetta di aggiungerlo.

Personalmente è l’opzione che mi piace meno. Ma è un’opzione.

Passi successivi

Una volta installato lo strumento sul tuo sito in uno dei tre modi, Clarity inizierà a raccogliere dati da tutto il sito, a meno che tu non abbia fatto apposta qualcosa di diverso (come selezionare solo alcune pagine in GTM).

E potrai iniziare a osservare le sessioni dei tuoi utenti e le mappe di calore.

Più facile di così, impossibile.

Alternative a Clarity

Bene, ora che conosci lo strumento, ciò che offre e come implementarlo, potrebbe comunque non piacerti per qualche motivo.

Se è così, ti lascio le tre alternative che ho usato di più in progetti diversi.

Hotjar

Molto valido e con un piano gratuito piuttosto decente. Ma ovviamente non quasi illimitato come Clarity. Per questo è diventato la mia seconda scelta.

Detto questo, offre funzionalità extra come la possibilità di chiedere feedback agli utenti tramite un piccolo modulo incorporato nel sito.

Yandex Metrica

La versione russa di Google offriva una piattaforma di digital analytics quasi potente quanto il suo rivale americano. Oltre a funzionalità simili a Google Analytics, offriva registrazioni e mappe di calore nella versione gratuita.

Non era raro trovare siti che implementavano questo strumento insieme a quello di Google.

Ma la tecnologia utilizzata li ha penalizzati, e sempre più progetti non riuscivano a implementarlo o lo trovavano complicato, così è andato in declino.

CrazyEgg

Il primo che ho usato, quindi gli sono particolarmente affezionato.

All’epoca era molto top, perché il piano era piuttosto economico. Si concentra sulle mappe di calore e non ha (a gennaio 2024) l’opzione delle registrazioni.

Oltre a queste tre, ci sono molte altre alternative. Costose ed economiche, con più o meno funzionalità. Quindi, se non ti piace ciò che offre Microsoft Clarity (davvero?), fatti un giro in rete.

Bonus: come usare Microsoft Clarity con Google Analytics 4

Non è una cosa molto pubblicizzata e quindi forse non lo sapevi, ma Clarity e GA4 possono essere collegati.

Come collegare Microsoft Clarity a GA4

Per farlo —dando per scontato che GA4 sia già implementato sul tuo sito— devi entrare nel tuo account Clarity e andare su Impostazioni > Impostazioni e cliccare sul pulsante Inizia:

Ti chiederà di accedere all’account Google con cui hai accesso a GA4:

Di concedere le autorizzazioni necessarie:

E infine di selezionare la proprietà GA4 a cui vuoi collegarlo:

Fatto questo, i due account saranno collegati:

E potrai vedere i dati di GA4 dentro Clarity:

Ma manca un ultimo passaggio: andiamo a creare una dimensione personalizzata in GA4 così (se Clarity non l’ha creata automaticamente, cosa che a volte fa):

L’importante è che sia di tipo evento e che il parametro sia “claritydimension”. Come nome della dimensione puoi mettere quello che preferisci.

Vantaggi di collegare GA4 e Clarity

Bene, una volta collegati, vorrai sapere quali vantaggi ci sono.

Oltre a quello che ti ho appena detto —vedere i dati di GA4 in Clarity e filtrare più facilmente i segmenti di utenti che vuoi analizzare; basta cliccare su qualsiasi elemento dei grafici perché compaia sotto l’opzione di vedere la mappa di calore o le registrazioni corrispondenti— credo che il vantaggio migliore sia l’opposto: vedere in GA4 i dati di Clarity.

Per questo abbiamo creato la dimensione personalizzata in GA4.

Puoi usare questa dimensione nei report standard o nelle Esplorazioni:

Quello che ti mostra è l’URL di Clarity in cui è incluso il segmento di utenti Analytics corrispondente.

Questo significa che potrai visualizzare il journey completo dell’utente che ti interessa sul sito:

• Quello che ha fatto un ordine enorme.
• O quell’altro che diceva che qualcosa non funzionava.

Niente male, eh?

Importante, per vedere gli URL dovrai ordinare la tabella in base a questa dimensione:

Un altro piccolo inconveniente è che l’URL non è un link, quindi dovrai copiarlo e incollarlo tu stesso in una scheda del browser. Non sarebbe difficile per Google correggerlo, anche se non so quanto gli interessi farlo…

Conclusioni finali

Questo è tutto ciò che volevo raccontarti su Microsoft Clarity.

In queste oltre 2500 parole mi sono concentrato sugli aspetti principali che volevo conoscessi: che cos’è Clarity, i suoi vantaggi, i casi d’uso fondamentali e i modi per implementarlo nel tuo progetto.

Non ho incluso alcune opzioni più avanzate perché, sinceramente, non credo sia necessario. Con quello che ti ho spiegato hai più che abbastanza per giocarci per parecchio tempo.

Perché immagino che tu l’abbia già implementato, vero?

Se non è così, è ora di muoverti.

È utile, gratuito e potente. Che altro vuoi?