Heatmap e-commerce: Hotjar/Clarity setup

Heatmap e-commerce: Hotjar/Clarity setup

Le heatmap permettono di vedere come gli utenti interagiscono realmente con il sito: dove cliccano, scrollano, si fermano e abbandonano. Per un'e-commerce sono uno strumento essenziale per identificare problemi UX non visibili dai soli numeri di Google Analytics. Vediamo i principali tool e come configurarli efficacemente.

Hotjar vs Microsoft Clarity

Hotjar è il leader storico con piano gratuito limitato e piani a pagamento da 32 euro al mese. Offre heatmap, session recording, feedback widget, sondaggi e funnel analysis. Microsoft Clarity è totalmente gratuito, senza limiti di sessioni o pageview, lanciato nel 2020. Offre heatmap, recording e dashboard insight. Per partire Clarity è imbattibile come rapporto qualità-prezzo, mentre Hotjar resta superiore per funzionalità avanzate come funnel multistep.

Procedura passo-passo

  1. Crea un'account su Hotjar o Clarity registrando il dominio del sito.
  2. Installa lo script di tracking nell'head del sito tramite Google Tag Manager.
  3. Configura il consenso cookie integrato per rispettare il GDPR.
  4. Imposta heatmap sulle pagine più importanti: home, listing, scheda prodotto, carrello.
  5. Attiva session recording filtrando le sessioni di valore (lunghe, con eventi specifici).
  6. Definisci segmenti per dispositivo, canale traffico e tipo utente.
  7. Analizza i dati dopo aver raccolto almeno 1.000 sessioni per pagina.
  8. Identifica pattern di abbandono e click su elementi non interattivi.

Errori comuni e come risolverli

  • Analizzare poche sessioni: serve un campione statisticamente significativo, almeno 1.000-2.000 per pagina.
  • Heatmap aggregata: senza segmentazione per dispositivo si perdono insight chiave (mobile e desktop hanno comportamenti diversi).
  • Ignorare le rage click: click ripetuti su un'elemento indicano frustrazione, vanno indagati subito.
  • Privacy non gestita: i session recording catturano dati sensibili, configurare mascheramento input.

Domande frequenti

D: Quale tool conviene di più?
R: Clarity per iniziare gratis senza limiti, Hotjar per analisi avanzate e funzionalità premium.

D: Le heatmap rallentano il sito?
R: Marginalmente, soprattutto se ben configurate con caricamento asincrono dello script.

D: Servono ancora con Google Analytics 4?
R: Sì, GA4 dice cosa fanno gli utenti, le heatmap dicono come e perché.

Recording e privacy

I session recording catturano i movimenti del mouse, click e scroll degli utenti. Privacy by design vuole che gli input testuali (nome, email, password, dati pagamento) siano automaticamente mascherati. Configura le regole di mascheramento in Hotjar/Clarity: tutti i campi input di default, eventuali elementi sensibili nella tua UX (es. saldi punti loyalty, importo carrello). Inserisci il tracking dei recording nella cookie policy con consenso preventivo. Senza queste accortezze, i recording catturano dati personali violando il GDPR.

Surveys e Feedback widget

Hotjar e tool simili offrono survey on-site contestualizzate per momento: domande in uscita ("perché stai abbandonando?"), feedback post-acquisto ("come migliorare?"), valutazione UX ("trovi facile la navigazione?"). I tassi di risposta variano 1-5% ma le risposte sono qualitativamente preziose. Combinare survey con session recording dà insight quantitativo e qualitativo insieme: "il 30% abbandona al carrello" diventa "il 30% abbandona perché costi di spedizione sono troppo alti".

Funnel exploration in GA4

Google Analytics 4 offre la funzione Funnel Exploration per visualizzare i passaggi del processo di acquisto e i drop-off in ogni step. Configura un funnel custom con i passaggi rilevanti: home -> categoria -> scheda -> add to cart -> checkout -> purchase. Per ogni step GA4 mostra il tasso di completamento e l'abbandono. Identifica gli step con maggiore drop-off come priorità di ottimizzazione. Funnel diversi per segmento (mobile/desktop, paid/organic) rivelano comportamenti differenti che richiedono interventi targettati.

Form analytics: ridurre l'abbandono nel checkout

Il checkout è dove si perdono più clienti. Tool come Hotjar Form Analysis, Mouseflow, Inspectlet tracciano per ogni campo: tempo trascorso, errori di validazione, abbandono dopo specifico campo. Campi che causano più abbandoni: codice fiscale (spesso non necessario), numero di telefono (può sembrare invasivo), data di nascita (mai necessaria per acquisto), conferma password (frustrante). Riduci i campi al minimo essenziale, sposta optional in fasi successive, usa autofill nativi del browser per velocizzare la compilazione.

Errori comuni nell'analisi heatmap

Tra gli errori più frequenti nell'uso delle heatmap: trarre conclusioni da pochi dati (servono migliaia di sessioni per significatività statistica), ignorare la varianza per dispositivo (mobile e desktop hanno comportamenti molto diversi), guardare solo le heatmap senza correlare con i numeri di GA4 (qualitativo senza quantitativo), credere che ogni click su elemento non interattivo sia un problema (a volte è semplice esplorazione). L'approccio corretto è ipotesi-driven: parti da un problema noto (drop in funnel) e usa la heatmap per capire il perché, non come strumento di esplorazione casuale.

D: Hotjar e Clarity rallentano il sito?
R: Marginalmente (10-50ms). Per minimizzare l'impatto usa caricamento asincrono dello script, posizionato in fondo al body, e configura il sample rate sotto il 100% per ridurre la frequenza di tracking sulle pagine ad alto traffico.

D: Quanti session recording servono per insight validi?
R: Almeno 100 sessioni significative per pagina (con eventi rilevanti), idealmente 500+. Sessioni troppo brevi (sotto 10 secondi) o senza interazioni vanno escluse dall'analisi.

Hai bisogno di aiuto?

Se vuoi un'e-commerce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.

Hai trovato utile quest'articolo?