Guida Avanzata: Come tracciare il Dwell Time con Google Tag Manager

Aspetta, ti occupi di SEO e sei già a conoscenza di cos’è il Dwell Time, ma non sai come implementarne il tracciamento sul tuo sito?

Non ti preoccupare, lo vedremo assieme in questa guida avanzata.

Come probabilmente saprai, il Dwell Time è il tempo che passa dal momento in cui un utente arriva sul tuo sito dai risultati di ricerca del motore di ricerca (SERP), fino al momento in cui l’utente clicca “indietro” del browser (che brutta persona). Se vuoi approfondire ti lascio il riferimento al glossario.

La cosa super figa è che, per questa implementazione, basterà avere Google Tag Manager installato senza bisogno di nessun programmatore.

Sei pronto? Dai che il cronometro è scattato proprio ora!

STEP  1 – ABILITA LE VARIABILE DELLA CRONOLOGIA

Se non l’hai già fatto, abilita le variabili integrate per la cronologia.

• Sezione Variabili > Variabili integrate > Configura
• Nell’area Cronologia abilita le seguenti variabili
• Abilita “New History Fragment”, “Old History Fragment”, “New History State” e “History Source”

STEP 2 – CREA LE VARIABILI DI LIVELLO DATI

Una volta abilitate, crea due variabili di tipo livello dati.

• Sezione Variabili > Variabili definite > Nuova
• Tipologia: Variabile di livello dati
• Nome variabile: gtm.start
• Versione: lascia “Versione 2”
• Nomina la variabile “gtm.start”

Dovresti avere una cosa del genere:

 

Good! Ripeti il procedimento specificando il nome “timeToSerp” e rinomina allo stesso modo.

Dai che ora inizia il bello 😉

STEP 3 – CREA L’ATTIVATORE PER LA CRONOLOGIA

Questo attivatore sarà utile per intercettare l’azione di back del browser. Sì è una cosa che è possibile fare con Google Tag Manager 😉

• Sezione Attivatori > Nuovo > Modifica della cronologia
• Seleziona “Alcune modifiche della cronologia”
• La prima condizione: “History Source è uguale a popstate”
• Aggiungi una condizione: “New History Fragment corrisponde all’espressione regolare ^$“
• Rinomina l’attivatore con: “History – back to SERP”

STEP 4 – CREA L’ATTIVATORE DI TIPO EVENTO PERSONALIZZATO

Crea un attivatore per l’evento personalizzato che viene attivato quando l’utente intende uscire dalla pagina prima che siano trascorsi 30 minuti. Questo servirà per il Tag di Google Analytics che vedremo fra poco.

• Sezione Attivatori > Nuovo > Evento personalizzato
• Nome evento: “returnToSerp”
• Seleziona “Alcuni eventi personalizzati”
• Come condizione inserisci: “timeToSerp minore di o uguale a 1800000” (mezz’ora in millisecondi)
• Salva l’attivatore come “returnToSerp”

STEP 5 – CREA LO SCRIPT DEDICATO

A questo punto non ti resta che creare il codice per calcolare il Dwell Time. In realtà, è proprio questo script il vero cuore che permette di gestire i vari eventi personalizzati creati in precedenza. Questo codice è stato realizzato dal buon Simo Ahava.

• Sezione Tag > Nuovo > HTML personalizzato
• Incolla lo script seguente. Piccola nota: puoi sostituire o aggiungere (a seconda delle tue necessità) “www.google.” con un qualsiasi motore di ricerca, come www.bing.

<script>
  (function() {
    var s = document.location.search;
    var h = document.location.hash;
    var e = {{Event}};
    var n = {{New History Fragment}};
    var o = {{Old History Fragment}};
    // Only run if the History API is supported
    if (window.history) {
      // Create a new history state if the user lands from Google's SERP
      if (e === 'gtm.js' && 
          document.referrer.indexOf('www.google.') > -1 && 
          s.indexOf('gclid') === -1 && 
          s.indexOf('utm_') === -1 && 
          h !== '#gref') {
        window.oldFragment = false;
        window.history.pushState(null, null, '#gref');
      } else if (e === 'gtm.js') {
        window.oldFragment = true;
      }
      // When the user tries to return to the SERP using browser back, fire the
      // Google Analytics timing event, and after it's dispatched, manually
      // navigate to the previous history entry, i.e. the SERP
      
      if (e === 'gtm.historyChange' && n === '' && o === 'gref') {
        var time = new Date().getTime() - {{gtm.start}};
        if (!window.oldFragment) {
          dataLayer.push({
            'event': 'returnToSerp',
            'timeToSerp': time,
            'eventCallback': function() {
              window.history.go(-1);
            }
          });
        } else {
          window.history.go(-1);
        }
      }
    }
  })();
</script>

• Aggiungi gli Attivatori, seleziona “All Pages” e “History – back to SERP”
• Salva come “Listener – Dwell Time”

Bene ci siamo quasi 🙂

STEP 6 – CREA IL TAG PER ANALYTICS

Manca solo impostare il tag per inviare i dati ad Analytics.

• Sezione Tag > Nuovo > Universal Analytics
• Tipo di monitoraggio: “Timing” (Tempi in italiano)
• Var: “{{Page Path}}”
• Categoria: “SERP Bounce”
• Valore: “timeToSerp”
• Adesso seleziona la Variabile delle impostazioni di Google Analytics in Impostazioni di Google Analytics, se l’hai creata, oppure abilita l’override e seleziona la costante {{gaID}} (che dovresti avere se hai seguito la mia guida su come creare una costante per l’ID di monitoraggio di GA). In alternativa inserisci semplicemente il tuo codice UA-XXXXXX-X.
• Aggiungi l’attivatore “returnToSerp”
• Salva il tag “GA – Timing – Dwell Time”

STEP 7 – E ORA TESTIAMO

Prima di pubblicare tutto, controlla che funzioni correttamente. Apri google.it (o google.com), cerca il tuo sito indicizzato e assicurati di aver attivato il debug e preview di Google Tag Manager.
Se hai fatto tutto correttamente, quando giungerai al sito, si attiverà il Tag HTML Personalizzato Listener – Dwell Time.

Successivamente, quando proverai a tornare nella SERP attraverso il tasto back del browser, verrà attivato il Tag di Google Analytics appena prima di lasciare la pagina.

 

Bene, a questo punto non ti resta che verificare se su Google Analytics hai il risultato. Dovrai aspettare qualche ora per vedere i primi dati sui report. Li Troverai sotto Comportamento ► Velocità del sito ► Tempo Utente

 

Ora anche tu riuscirai a capire se i contenuti che offri sono effettivamente pertinenti con quello che gli utenti cercano. Se sei all’interno del Club Tag Manager Italia, hai a disposizione il template già configurato e con il Progetto Andromeda l’implementazione è questione di qualche secondo.

Cosa ne pensi? Lasciami un commento.

Buon Tag!