Set 2021

Guida Avanzata: come tracciare User ID di Hotjar in Google Analytics 4

Se stai leggendo questa guida immagino che anche tu stia utilizzando la potenza di fuoco di Hotjar per analizzare il comportamento degli utenti sul tuo sito web.

E sono sicuro che la funzionalità di Hotjar che trovi più utile nella tua strategia di digital analytics è quella che permette di effettuare delle registrazioni (a campione) dell’intera sessione di navigazione di un utente.

Queste registrazioni sono denominate “session recording“.

Grazie alle session recording avrai la possibilità di andare a rivedere le registrazioni di navigazione dei visitatori del tuo sito web, per capirne meglio il comportamento e le difficoltà che hanno riscontrato.

Ma c’è un problema.

Più il traffico sul tuo sito web è alto e più diventa complicato (oltre che richiedere molto più tempo) effettuare le analisi sulle sessioni registrate che ci interessano.

Sessioni come quelle degli utenti che hanno abbandonato l’e-commerce durante il checkout, o altri eventi importanti.

La buona notizia è che è possibile risalire esattamente agli utenti che ci interessano perché Hotjar utilizza un cookie per capire chi è un utente nuovo o di ritorno.

Nelle dashboard di analisi di Hotjar è presente un valore “univoco” per ciascun utente. E questo è possibile proprio grazie a quel cookie.

Ovviamente l’utente deve essere presente all’interno del campione scelto da Hotjar, perché come ti ho accennato prima Hotjar non traccia i 100% degli utenti (ci sono altri strumenti come Smartlook che lo fanno).

In questa guida vedremo quindi come intercettare lo User ID di Hotjar e passarlo a Google Analytics 4, il tutto ovviamente utilizzando Google Tag Manager!

P.S. Se non hai ancora installato Hotjar parti da questa guida.

Ecco come procederemo:

STEP 1 – creiamo e impostiamo una Variabile JavaScript personalizzata
STEP 2 – creiamo un Trigger di tipo timer
STEP 3 – creiamo un Tag evento di Google Analytics 4
STEP 4 – verifichiamo il corretto funzionamento del tag con l’Anteprima di Google Tag Manager
STEP 5 – creiamo la dimensione personalizzata in GA4.

Sei pronto? Oh, sono sicuro di sì 😉

Iniziamo!

STEP 1 – CREIAMO UNA VARIABILE JAVASCRIPT PERSONALIZZATA

Update: Hotjar ha effettato altri aggiornamenti, e ora bisogna aspettare qualche secondo per avere il cookie di Hotjar che ci interessa

Per prima cosa ci serve il valore completo del cookie, che possiamo estrapolare attraverso la libreria JavaScript di Hotjar.

Come puoi notare nello script in basso, grazie una funzione “split” puoi recuperare solo la porzione di valore che ti interessa.

E in questo caso il valore che ci interessa è lo “user ID” Hotjar.

Quindi, dal tuo Google Tag Manager vai su:

Variables > New> Variable Configuration.
Variable Type: Custom Javascript.
Inserisci questo codice Javascript:

function() {
  var hotjarUserId = hj.globals.get("userId").split("-");
  
  if(hotjarUserId[0] != undefined)
  {
    return hotjarUserId[0];
  }
  else
  {
    return 0;  
  }
}

Chiama la Variabile: “Hotjar – User Id”.

STEP 2 – CREIAMO IL TRIGGER DI TIPO TIMER

Per permettere allo script che abbiamo inserito nello step precedente di estrapolare lo user ID di Hotjar, dobbiamo attendere il caricamento della pagina del sito web tracciata.

Quindi per estrapola lo user ID dobbiamo creare un nuovo Trigger che si attivi al dopo un periodo di tempo definito.

Dai miei test un timer di 3 secondi va più che bene. Chiaramente se un utente scappa prima che il Trigger si accenda non avrai l’evento su Google Analytics (e nemmeno il valore di Hotjar User ID).

Sempre sul tuo Google Tag Manager creiamo il Trigger:

Triggers > New> Trigger Configuration.
Trigger Type: Timer
Interval: 3000
Limit: 1
Enable this trigger: Page Path > matches RegEx > .*
Nomina il Trigger: Timer 3 secondi

STEP 3 – CREIAMO IL TAG EVENTO DI GOOGLE ANALYTICS 4

Adesso dobbiamo creare il Tag evento di GA4 in cui passeremo il parametro con lo User ID di Hotjar.

Vista la latenza di tempo che lo script impiega per estrapolare il valore, possiamo usare un attivatore di tipo timer di 3 secondi.

Ancora dal tuo Google Tag Manager vai su:

Tags > New > Tag Configuration
Tag Type: GA4 Event
Seleziona il Tag di Configurazione di Google Analytics 4 in Configuration Tag oppure inserisci direttamente il codice del Data Stream di GA4
Event Name: hotjar
Aggiungi un nuovo parametro in Event Parameters
Parameter Name: hotjar_user_id – Parameter Value: inserisci la variabile creata in precedenza {{Hotjar – User Id}}
Attiva su: seleziona il Trigger “Timer 3 secondi”
Dai un nome al Tag. Io, di solito, lo rinomino in questo modo: “GA4 – Event – hotjar”.
Salva il Tag.

Ehi, tutto bene fino a qui?

Ricordati che se hai dubbi o domande le porte della nostra community su Google Analytics 4 sono sempre aperte!

Sul nostro gruppo Facebook ufficiale “GA4 Italia” troverai il mio team e me pronti a darti una mano con le risposte che cerchi su Google Analytics 4.

In questo modo non rimarrai mai bloccato mano a mano che implementi e utilizzi GA4.

STEP 4 – VERIFICA IL TAG CON IL DEBUG DI GTM E CON IL DEBUGVIEW DI GA4

Come sempre, prima della pubblicazione del Tag, ti consiglio di approfittare di questa funzione utilissima di Google Tag Manager, ovvero la Modalità Debug (Anteprima).

Attivala e vai nel tuo sito web.

All’inizio il Tag “GA4 – Event – hotjar” si troverà nella sezione Tags Not Fired, ma una volta passati i 3 secondi lo vedrai apparire nei Tags Fired

E ora puoi assolvere alla missione principale: scovare lo User ID univoco di Hotjar che ti permetterà di risalire alla tua session recording.

Se clicchi sull’evento “Timer” sulla sinistra e vai nella scheda variabili vedrai che la variabile che abbiamo creato in precedenza (“Hotjar User Id”) riporterà esattamente il tuo ID univoco di Hotjar!

Puoi anche visualizzare l’evento nel DebugView di Google Analytics 4 così da essere certo che l’evento sia presente nella proprietà di GA4 😉

Ecco cosa devi fare. Nel tuo account di Google Analytics 4 vai su > Configure > DebugView.

Successivamente torna su Google Tag Manager, apri nuovamente la Modalità Debug (Anteprima) e vai sul sito web.

Attendi che il Tag si accenda e torna nel DebugView di Google Analytics 4 dove troverai oltre agli altri eventi anche l’evento hotjar con il parametro hotjar_user_id.

Se tutto ha funzionato correttamente torna nel tuo GTM e pubblica le modifiche cliccando sul pulsante blu “Submit”.

STEP 5 – CREA LA DIMENSIONE PERSONALIZZATA IN GOOGLE ANALYTICS 4

L’ultimo passaggio da fare è configurare il parametro hotjar_user_id come dimensione personalizzata, in modo da poterlo utilizzare nei report e durante le analisi.

Ecco cosa devi fare:

Questa volta nel tuo Google Analytics 4:

Clicca su Configure > Custom Definitions > Create Custom Dimension
Dimension name: Hotjar User Id (Puoi scegliere il nome che preferisci)
Scope: Event
Event Parameters: Scegli il parametro hotjar_user_id dalla lista dei parametri disponibili
Salva