Guida Avanzata: Come Calcolare il Tempo di un Click con Google Tag Manager

Se anche tu, come me, vuoi trovare sempre nuovi modi per tracciare il comportamento di un utente all’interno del tuo sito, allora rimani con me, questa guida ti piacerà 😉

Oggi vedremo insieme come tracciare il “Time to Click”, ossia il tempo che passa da quando l’utente è entrato sul sito a quando ha cliccato su un pulsante, per esempio il tasto “Scarica PDF”.

Figo, no? Ora potrai sapere quanto ci mettono gli utenti a cliccare su un video, a inviare un form, a richiedere un preventivo, ecc.

Sì, ok… ma come si fa? 

Solo con qualche Variabile e un Tag, promesso 🙂

Piccola premessa prima di iniziare: questa guida è stare realizzata sulla base di un articolo di Enrico Pavan (bravo Enrico).

STEP 1 – CREA LE VARIABILI

Prima di tutto, ti serve una Variabile JavaScript che registri l’orario in cui avvengono determinati eventi.

• Vai nella sezione Variabili > Variabili definite dall’utente > Nuova.
• Tipo di Variabile: JavaScript personalizzato.
• Incolla questo script:

  function() {
  var now = new Date();
  return now.getTime();
  }
  
  

• Nome Variabile: “TimeStamp“.
• Salva.

La seconda Variabile che andrai a creare, dovrà contenere il tuo dominio.

• Nuova Variabile > Costante.
• Inserisci il tuo dominio (senza www.): nel mio caso è tagmanageritalia.it.
• Salva la Variabile con il nome: “MyDomain”.

La prossima Variabile ti servirà per catturare il Cookie creato dal Tag HTML personalizzato che andremo a realizzare tra poco. Ecco i passaggi:

• Nuova Variabile
• Tipo di Variabile: Cookie proprietario.
• Nome cookie: LoadPageTimeStamp.
• Nomina la Variabile: “Cookie – LoadPageTimeStamp”.

Ti manca la quarta e ultima Variabile, promesso 😛 Questa è fondamentale, perché calcola il tempo che l’utente ci mette a cliccare un determinato pulsante, in altre parole è la protagonista della guida 😉

• Variabili definite dall’utente > Nuova
• Tipo di variabile: JavaScript personalizzato.
• Incolla questo script:

  function() {
  
  var timeInterval = ( {{TimeStamp}}-{{Cookie - LoadPageTimeStamp}} ) / 1000;
  
  return timeInterval;
  
  }

• Salva con il nome: “Time to Click”.

STEP 2 – CREA IL TAG

Per catturare il momento in cui il tuo utente atterra sul sito, hai bisogno di un Tag che vada a recuperare la Variabile TimeStamp (quella che abbiamo creato per prima). I passaggi sono molto semplici:

• Sezione Tag > Nuovo > HTML personalizzato.
• Incolla questo snippet di codice:

  <script type="text/javascript">
  

  var cookieName = 'LoadPageTimeStamp';
  var cookieValue = {{TimeStamp}};
  var myDate = new Date();
  myDate.setMonth(myDate.getMonth() + 24);
  document.cookie = cookieName +"=" + cookieValue + ";expires=" + myDate + ";domain=.{{MyDomain}};path=/";
  

  </script>

• Attiva su: All Pages.
• Nomina il Tag: “Set Cookie for TimeStamp”.
• Salva

STEP 3 – CREA LA METRICA PERSONALIZZATA

Per fare in modo che Google Analytics e Google Tag Manager comunichino tra loro il “tempo al click”, dovrai creare una metrica personalizzata.

• Vai all’interno del tuo account di Google Analytics.
• Amministrazione > Proprietà > Definizioni personalizzate > Metriche personalizzate.
• Clicca su: +Nuova Metrica Personalizzata.
• Nome: “Time to Click”.
• Ambito: Hit.
• Tipo di formattazione: Ora.
• Valore minimo(in secondi): 0.
• Salva.

Pssss… mi raccomando, ricordati l’indice di questa metrica, ti servirà nel prossimo step 😉

STEP 4 – AGGIUNGI METRICA AL TAG EVENTO

Bravo, sei arrivato fino a qui, niente male 😉 L’ultima cosa che devi fare è aggiungere l’indice della metrica“Time to Click” all’interno del Tag Evento che vuoi tracciare. Nel caso tu voglia sapere quanto ci mette un utente a scaricare un file PDF, ecco i passaggi:

• Entra nel Tag: “GA – Event – Download PDF”.
• Altre impostazioni > Metriche personalizzate > + Aggiungi metrica personalizzata
• Inserisci l’indice della metrica: nel mio caso è 4.
• Valore metrica: {{Time to Click}}.
• Salva il Tag.

E questo è solo l’inizio, puoi associare la Variabile“Time to Click” a tantissimi altri eventi, ti basta solo utilizzare la fantasia 😉

STEP 5 – VERIFICA IL TAG

Come al solito, l’ultima cosa che ti rimane da fare è verificare che tutto funzioni 😉

E per farlo, ti basterà utilizzare la funzione Anteprima/Debug.

Se le nuove implementazioni funzionano correttamente, adesso puoi tornare su Google Tag Manager e cliccare sul pulsante blu “Invia” per pubblicare ufficialmente le modifiche.

Allora, ti è piaciuta questa guida? Quanta roba figa si può fare, eh?

A presto e… buon Tag!