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.

variabile time stamp google tag manager

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

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

variabile dominio google tag manager

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

variabile cookie load page time stamp google tag manager

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

variabile time click google tag manager

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

tempo click cookie google tag manager

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 😉

dimensione personalizzata tempo click google tag manager
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.

tag evento tempo click google tag manager

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.

verifica tag tempo click google tag manager

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!

Condividi anche tu Google Tag Manager!
  • Reply

    Antonino

    21 05 2018

    Ciao Matteo,

    ottima guida come sempre!
    Ti segnalo che alla fine ho avuto qualche problema con le variabili perché non mi riconosceva la “Cookie – LoadPageTimeStamp”.
    Ho risolto modificando in “Cookie_LoadPageTimeStamp”, sia nel nome sia nello script successivo.

    Spero di essere stato utile !

    • Matteo Zambon

      21 05 2018

      Ciao Antonino, strano perché il nome della variabile non hanno di solito questi problemi. Fai attenzione magari nel copia/incolla della guida, magari c’era uno spazio in più nella variabile. 🙂

      L’importante è che abbia risolto, grazie della segnalazione!

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

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