Come funziona Clarity? Breve viaggio nel tool di web analytics di Microsoft
comprESSE I: una dose mensile di coding
Da qualche anno, Microsoft Clarity si è proposto con un certo successo come alternativa ai tool più popolari per l’analisi e l’ottimizzazione di siti web, tra tutti il gratuito Google Analytics e, per funzionalità, il potente Hotjar.
Ma a cosa serve esattamente Microsoft Clarity? E perché se hai un sito probabilmente potrebbe essere vantaggioso utilizzarlo?
Per prima cosa, Microsoft Clarity è un servizio online che, sebbene potentissimo, è completamente gratuito, il che farà piacere al tuo conto in banca.
Una volta iscritto, cosa semplicissima (basta registrarsi su clarity.microsoft.com indicando il dominio su cui installarlo), il tool fornisce un codice da inserire tra i tag <head></head> del tuo sito. Eseguita questa operazione, accedendo al pannello di controllo dopo poche ore, Microsoft Clarity inizierà a tracciarlo.
(la home di Microsoft Clarity: il servizio, nonostante la presenza della pagina "prezzi", è gratis "per sempre")
Da quel momento, potrai eseguire un numero strabiliante di attività, tra cui:
-
registrare le sessioni utente: Microsoft Clarity registra le sessioni degli utenti sul tuo sito per poter rivedere (in un formato percepibile come "video", anche se per farne video veri e propri occorre un software di cattura a parte) come interagiscono. Questa funzionalità è particolarmente utile per identificare problemi di usabilità e migliorare l’ergonomia del sito;
-
usare le heatmap: Clarity offre heatmap interattive che mostrano in modo visuale le aree più cliccate e “scrollate” dai visitatori del sito. Questo può aiutarti a comprendere quali parti sono più attraenti e dove, al contrario, gli utenti potrebbero avere difficoltà;
-
registrare i clic: il pannello di controllo del tool mostra esattamente dove gli utenti cliccano sul sito web, consentendoti di valutare l’efficacia dei tuoi collegamenti, pulsanti e menu di navigazione;
-
analizzare i movimenti del mouse: Clarity registra i movimenti del mouse degli utenti, consentendo di visualizzare come si spostano e interagiscono con la pagina. Ciò può aiutarti a rilevare errori, comportamenti anomali o confusione durante l’uso del sito.
Inoltre, Microsoft Clarity offre funzioni come filtri e segmentazioni per esaminare il comportamento degli utenti in base a diversi criteri quali la provenienza geografica, il dispositivo utilizzato, il percorso di navigazione e altro ancora. In più, consente di tracciare il feedback degli utenti e include strumenti di analisi e reportistica.
Last but not least, Microsoft Clarity è progettato per rispettare la privacy, raccogliendo i dati in formato aggregato e anonimizzato, ed è integrato con Microsoft Azure per gestirli al meglio.
Come già accennato, queste caratteristiche lo rendono molto utile (a nostro avviso fondamentale!), soprattutto in chiave UXO (user experience optimization) proprio perché, a differenza di Google Analytics – i cui report richiedono capacità di data analysis non alla portata di tutti –, con Microsoft Clarity anche senza tali skill è possibile “vedere” come interagiscono gli utenti, facendosi un’idea molto chiara di ciò che funziona e di ciò che invece non funziona.
In questo modo, è possibile mettersi nelle condizioni di intervenire prontamente per migliorare l’usabilità e diminuire il “bounce rate”, ovvero il tasso di rimbalzo del sito. In parole povere, le ottimizzazioni scaturite in particolare dalla lettura della registrazione delle sessioni utente e delle heatmap sono in grado di aumentare i tempi di percorrenza degli utenti sul sito.
Alla lunga, quindi, anche aspetti importantissimi come reputazione e, nel caso si tratti di un e-commerce, vendite.
(la sessione di registrazione di un utente sul nostro sito)
Ma come funziona?
Oltre al “coding puro”, tra i servizi offerti da ESSE I ci sono anche business intelligence e analisi dei dati, attività che eseguiamo con approccio data-driven, cioè prendendo decisioni in massima parte non sulla base di “secondo me” ma di dati.
Ad esempio, quando progettiamo un software o una piattaforma web per conto di un cliente, eseguiamo una raccolta dati preventiva per comprendere meglio le esigenze dei suoi utenti e clienti. Si tratta di un’attività nella maggior parte dei casi coordinata con il marketing board del cliente o partner esterno, se presente.
Così facendo, offriamo consulenza e soluzioni migliori per l’archiviazione, l’estrazione e l’analisi dei dati, nonché per l’ottimizzazione delle attività di business intelligence e di analisi aziendale. E, se necessario, anche di tipo personalizzato. Ciò significa che quando non usiamo tool già “pronti e disponibili” come Google Analytics e lo stesso Microsoft Clarity, ovvero quando le esigenze sono più specifiche, sviluppiamo software proprietario in modalità “tailor made”, in grado cioè di tracciare gli utenti in modo ancora più completo e senza appoggiarci a piattaforme esterne, preferendo quelle esclusivamente in insourcing, di cui controlliamo totalmente anche la gestione dei dati.
Questo è il motivo per cui crediamo che spiegare, anche solo per sommi capi, il funzionamento di Microsoft Clarity sia utilissimo per accrescere la consapevolezza sia di chi si limiterà a usare questa già ottima piattaforma, sia di chi sta pensando di costruirsi il proprio sistema di tracciamento super personalizzato. Magari – momento reclame! – ingaggiando il nostro team.
Grazie JavaScript!
Quindi, come funziona questo genere di tool?
Il linguaggio che consente “la magia” di tracciare attività dinamiche come scrolling, tapping, movimento del mouse e relativi tempi funziona ovviamente lato client ed è il buon vecchio JavaScript.
Usando come cavia Microsoft Clarity, diciamo che quest’ultimo utilizza JavaScript per registrare il movimento del mouse degli utenti sul sito web attraverso la funzione “mousemove”: un evento che viene attivato ogni volta che il mouse si sposta all’interno della finestra del browser. Ecco un esempio di come potrebbe funzionare.
document.addEventListener('mousemove', function (event) {
// Registra le coordinate del movimento del mouse
var x = event.clientX;
var y = event.clientY;
// Invia le coordinate a Clarity per l’analisi
clarity('track', 'mousemove', { x: x, y: y });
});
Spiegazione: quando un utente sposta il mouse all’interno della finestra del browser, la funzione “mousemove” cattura le coordinate del movimento (x e y) e le invia, insieme al tempo che intercorre (attraverso un’altra funzione qui non presentata), ai server di Clarity per l’analisi che, attraverso apposite chiamate al database, le archivia. In questo modo, si registrano i movimenti del mouse degli utenti per generare dati che, successivamente, possono essere visualizzati tramite mappe termiche o registrazioni delle sessioni degli utenti.
Ecco qui invece il codice che, come dicevamo all’inizio, deve essere inserito nel sito web per controllarlo in modo asincrono (il valore alfanumerico “xxxxxxxxxx” si riferisce all’account Microsoft Clarity del sito in oggetto):
<script type="text/javascript">
(function (c, l, a, r, i, t, y) {
c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
t = l.createElement(r); t.async = 1; t.src = 'https://www.clarity.ms/tag/'+i;
y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
})(window, document, "clarity", "script", "xxxxxxxxxx");
</script>
Questa non è la sede giusta per analizzare i codici sul server Microsoft a cui quella funzione si riferisce (e in ogni caso non sarebbe utile allo scopo didattico di questo articolo), ma una cosa curiosa vogliamo farla notare: il team Microsoft ha usato come suoi “argomenti” le sette lettere della parola Clarity!
Il termine “clarity”, tra l’altro, in inglese significa “trasparenza” e “limpidezza”, e può essere interpretato proprio come l’obiettivo del suo servizio: aiutare le aziende a ottenere una visione chiara e comprensibile del comportamento degli utenti sul loro sito web.
Una visione “clientecentrica” che ovviamente condividiamo. Anche perché crediamo possa andare a braccetto con quella che avremmo sviluppato noi:
function (h, a, r, m, o, n, y).