Heatmap e Session Recording con Hotjar e Microsoft Clarity: Guida Operativa alla CRO Comportamentale

Hai installato Google Analytics, guardi le metriche, ma non sai perché gli utenti abbandonano il carrello o non compilano il form. I numeri ti dicono il cosa, non il perché. È qui che entrano in gioco heatmap e session recording: strumenti che ti mostrano il comportamento reale dei visitatori, non solo il dato aggregato. Noi, di Meteora Web, li usiamo ogni giorno per capire dove un sito perde conversioni e cosa fare per recuperarle.

Perché heatmap e session recording sono indispensabili per la CRO

I dati quantitativi (visite, bounce rate, tempo medio) ti danno una fotografia statica. Quelli qualitativi (clic, scroll, movimenti del mouse) ti raccontano il film. Un esempio concreto: un nostro cliente e-commerce aveva un tasso di abbandono del carrello del 78%. Guardando le session recording, abbiamo scoperto che gli utenti cliccavano ripetutamente su un pulsante 'Continua' che non era cliccabile perché coperto da un banner. Una heatmap lo avrebbe mostrato come una zona calda su un elemento non interattivo.

Differenza tra dati quantitativi e qualitativi

Google Analytics risponde a 'quanti?', 'quando?', 'da dove?'. Heatmap e recording rispondono a 'dove cliccano?', 'cosa ignorano?', 'dove si bloccano?'. Non sono strumenti alternativi, ma complementari. Senza il dato qualitativo, ottimizzi alla cieca.

Esempi reali che abbiamo visto

• Un form di contatto convalidava l'email solo dopo l'invio: gli utenti scrivevano, cliccavano, niente. Rage click sulla pagina.
• Un call-to-action nascosto sotto il fold su mobile: nessuno lo vedeva, ma la heatmap di scroll mostrava che arrivavano solo al 40% della pagina.
• Un menu a tendina con voci troppo piccole: gli utenti cliccavano a vuoto intorno alle voci. Dead click.

Heatmap: clic, scorrimento e movimento

Le heatmap sono rappresentazioni visive dell'interazione. I colori caldi (rosso, arancione) indicano zone ad alta attività, quelli freddi (blu, grigio) zone ignorate. Non limitarti alla heatmap dei clic: quella di scroll ti mostra fino a che punto gli utenti leggono, quella di movimento (mouse tracking) rivela dove l'occhio segue il cursore.

Tipi di heatmap

• Click heatmap: dove gli utenti cliccano con il mouse o toccano su mobile. Attenzione: su mobile il tap conta come click. Ideale per verificare se i pulsanti sono raggiungibili.
• Scroll heatmap: percentuale di utenti che raggiungono ogni punto della pagina. Se il 70% esce prima della sezione 'Prezzi', devi spostare informazioni chiave più in alto.
• Move heatmap: traccia il movimento del mouse. Su desktop è correlato all'attenzione visiva. Utile per capire se il layout guida l'occhio verso il CTA.

Leggere una heatmap

Non basta vedere zone calde: chiediti perché. Un'area calda su un elemento non cliccabile segnala frustrazione. Una zona fredda sul pulsante principale significa che non è abbastanza visibile o che il contesto non invoglia al click. Correggi spostando, ridimensionando o cambiando colore del CTA.

Session recording: vedere lo schermo dell'utente

Una sessione registrata è un video della navigazione di un utente reale. Non vedi i dati sensibili (se lo strumento è configurato correttamente), ma vedi clic, scroll, compilazione dei form, esitazioni. È come guardare dalla spalla dell'utente.

Cosa cercare

• Rage click: clic ripetuti e veloci su un elemento che non risponde. Segno di errore o di un elemento non interattivo.
• Dead click: clic su un'area che non è un link o un pulsante. Indica che l'utente si aspetta interattività lì.
• U-turn: l'utente torna indietro subito dopo essere arrivato. Possibile confusione o mancata corrispondenza con le aspettative.
• Form abandonment pattern: compila un campo, si ferma, va avanti e indietro, abbandona. Spesso un campo obbligatorio non chiaro o un errore di validazione.

Privacy e GDPR

Entrambi gli strumenti offrono anonimizzazione: nascondono automaticamente i campi input sensibili (password, email, numeri di carta). Configura sempre l'opzione di mascheramento prima di iniziare a registrare. Inoltre, assicurati di avere il consenso dell'utente tramite cookie banner. La normativa è chiara: i dati comportamentali sono dati personali se riconducibili a un utente.

Hotjar vs Microsoft Clarity: quando usare cosa

La scelta dipende dal budget, dal volume di traffico e dal livello di dettaglio che ti serve.

Hotjar

Più maturo, offre heatmap, session recording, feedback poll e survey. Il piano gratuito è limitato (35 sessioni al giorno, 3 heatmap attive). I piani a pagamento partono da circa 39 €/mese. Ideale se hai bisogno di analisi avanzate, filtri complessi e integrazioni con Google Analytics. Noi lo usiamo per clienti con traffico medio-alto che vogliono segmentare per dispositivo, fonte o comportamento.

Microsoft Clarity

Completamente gratuito, senza limiti di sessioni o heatmap. Si integra nativamente con Google Analytics (puoi vedere le metriche affiancate). Offre segmenti di base (per fonte, dispositivo, paese). È spinto dalla community, ma ha meno funzionalità di Hotjar (nessun feedback poll, meno opzioni di filtering). Perfetto per PMI che vogliono iniziare a zero costo. Lo consigliamo come primo strumento.

Consiglio pratico

Parti con Clarity: installalo in 5 minuti, gratis. Quando senti il bisogno di filtrare per eventi personalizzati o di analizzare segmenti molto specifici, passa a Hotjar. Oppure usa entrambi: Clarity per la massa, Hotjar per le sessioni critiche.

Guida operativa all'implementazione

Vediamo come installare entrambi gli strumenti, partendo da Clarity perché è il più semplice.

Installare Microsoft Clarity

1. Vai su clarity.microsoft.com e crea un progetto.
2. Copia il codice di tracking (un tag JavaScript).
3. Incollalo nel <head> del tuo sito o tramite Google Tag Manager (consigliato).

Ecco il codice base da inserire (sostituisci PROJECT_ID con il tuo):

<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", "PROJECT_ID");
</script>

Installare Hotjar

Registrati su hotjar.com, crea un sito e ottieni il codice di tracking. Lo inserisci nello stesso modo (tag GTM o direttamente). Attenzione: Hotjar richiede di specificare quali pagine registrare e quante sessioni al giorno (nel piano gratuito). Configura subito le opzioni di privacy (mascheramento campi sensibili).

Configurare obiettivi e filtri

Non raccogliere tutto indiscriminatamente. Segmenta per:

• Pagine chiave (checkout, contatto, landing page).
• Dispositivo (mobile spesso ha pattern diversi).
• Fonte del traffico (organico vs a pagamento).

Imposta obiettivi (es. 'completamento form' o 'clic su CTA') in Clarity (come 'Event') o in Hotjar (come 'Goal'). Così puoi filtrare le sessioni in cui l'obiettivo è stato raggiunto o mancato.

Come analizzare i dati e prendere decisioni

L'analisi non è teoria: è un ciclo continuo di ipotesi, test e implementazione.

Dalla heatmap all'ipotesi

Vedi una zona calda su un'immagine non cliccabile? Ipotizzi: 'Se rendo cliccabile quell'immagine, gli utenti la useranno come navigazione'. Apri una sessione recording per confermare: gli utenti cliccano davvero lì, poi si fermano delusi? Se sì, trasformi l'ipotesi in una modifica e la testi con un A/B test.

Dai recording al test A/B

Identifica un pattern di abbandono (es. utenti che arrivano alla pagina del carrello e tornano indietro). Guarda 5-10 sessioni per capire il motivo comune. Poi crea una variante della pagina (es. semplifica il form, aggiungi rassicurazioni) e lancia un test con Google Optimize o strumenti simili. Misura la differenza nel tasso di completamento.

Errori comuni da evitare

• Guardare troppe sessioni senza un focus: ti perdi nei dettagli. Definisci un obiettivo prima di iniziare (es. 'perché il tasso di conversione della pagina prodotto è sotto il 2%?').
• Ignorare il contesto: una heatmap sulla pagina desktop non vale per mobile. Segmenta sempre per dispositivo.
• Non collegare i dati agli obiettivi di business: una zona calda su un'immagine non è un problema se quella immagine genera lead. Chiediti sempre: 'Questo comportamento aiuta o ostacola la conversione?'.

In sintesi — cosa fare adesso

1. Installa Clarity sul tuo sito. È gratuito e ti dà subito dati. Se sei già oltre le 35 sessioni/giorno, valuta Hotjar.
2. Identifica le 3 pagine più critiche per le conversioni (es. home, prodotto, checkout). Attiva heatmap e recording solo su quelle.
3. Guarda 5-10 sessioni al giorno per una settimana. Prendi appunti su rage click e abbandoni.
4. Crea una lista di ipotesi di miglioramento basate su quello che hai visto. Prioritizza per impatto e sforzo.
5. Testa una modifica alla volta con un A/B test, misurando la conversione. Non fidarti dell'intuito: i dati comportamentali guidano le decisioni.

Per approfondire come integrare queste analisi in una strategia CRO completa, leggi la nostra Guida Pillar alla CRO.