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 di un 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 ha iniziato 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”

attivare variabili cronologia in google tag manager

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:

variabile livello dati gtm start in google tag manager

 

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

variabile livello dati time to serp in google tag manager

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”

attivatore cambio cronologia history in google tag manager

STEP 4 – CREA L’ATTIVATORE DI TIPO EVENTO PERSONALIZZATO

Crea un attivatore per l’evento personalizzato che viene attivato quando l’utente sta per uscire prima di 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”

attivatore evento personalizzato time to serp in google tag manager

STEP 5 – CREA LO SCRIPT DEDICATO

A questo punto non ti resta che creare il codice per calcolare il Dwell Time. In realtà è questo script il vero cuore che permette di gestire i vari eventi personalizzati creati prima. 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”

script calcolare dwell time serp in google tag manager

Bene ci siamo quasi 🙂

STEP 6 – CREA IL TAG PER ANALYTICS

Ci 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”

tag google analytics time to serp dwell time in google tag manager

STEP 7 – E ORA TESTIAMO

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

debug console start dwell time in google tag manager

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

debug console end prima back to serp dwell in google tag manager

 

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

dwell time SERP google analytics

 

Bene ora anche tu riuscirai a vedere 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 è davvero di qualche secondo.

Cosa ne pensi? Lasciami un commento e buon Tag!

Condividi anche tu Google Tag Manager!
  • Reply

    Elena

    14 01 2019

    Geniale ! Grazie mille per questa guida.
    Per vedere se funziona ho usato dataslayer.

    • Matteo Zambon

      14 01 2019

      Di nulla Elena 🙂

  • Reply

    Dario

    11 01 2019

    Ciao Matteo, intanto grazie per le tue guide sempre interessanti.
    Nella creazione del Tag di Google Analytics fai riferimento ad una categoria: “SERP Bounce” che però non ritrovo tra le variabili selezionabili (cosa che invece avviene per “Page Path” e “timeToSerp”), per cui l’ho messa a mano magari erroneamente. A tal proposito infatti, provando a tornare nella SERP attraverso il tasto back del browser, non riesco a visualizzare l’attivazione del Tag di Google Analytics… credi ci sia un nesso? Come posso risolvere? Grazie mille

    • Matteo Zambon

      11 01 2019

      Ciao Dario e grazie 🙂

      Sì “SERP Bounce” è il nome della categoria che ho dato io. Puoi scrivere il nome che preferisci. Per verificare con il debug il back devi fermare però il cambio pagina 🙂

      Puoi usare questo tips: https://www.youtube.com/watch?v=8sAXKzAtOwM oppure se sei nel Club Tag Manager Italia usare la mia estensione 😉

      Dovresti fra un’oretta vedere comunque i dati su GA se ha implementato tutto corretto. Ovviamente devi testarlo dalla SERP 🙂

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.