Think Pragmatic!

Rubber ducking about stuff.

Tracciare Gli Eventi Con Il Google Tag Manager

Scritto il 17/03/2013 da Alessandro Martin.    

In questa guida vedremo passo dopo passo come è possibile tracciare gli eventi usando il Google Tag Manager. Per fare gli esempi mi riferirò sempre ad un link immaginario per cui vogliamo tracciare il click come un evento di Google Analytics.

 Premessa

Questa roba funziona perché l’ho provata ma non mi assumo nessuna responsabilità se fate casini. Cosa vi serve:

  • Google Chrome
  • GA Debugger
  • Tag Assistant
  • Un account Google Analytics
  • Un account Google Tag Manager
  • Un editor di testo
  • Un po’ di pazienza perché il post è lungo e il GTM è complesso

Vedremo prima come tracciare gli eventi di Google Analytics con il metodo tradizionale (senza il GTM), poi proveremo due metodi diversi per tracciarli grazie alle caratteristiche offerte dal GTM.

Tracciare gli eventi senza il Google Tag Manager

Normalmente per tracciare un evento con Google Analytics è sufficiente associare ad una azione dell’utente (ad esempio il click su un bottone) una istruzione del tipo:

_gaq.push(['_trackEvent', category, action, opt_label, opt_value, opt_noninteraction]);

Forse non tutti sanno che questi comandi li potete copiare ed incollare direttamente nella console JavaScript di Chrome (si attiva con Ctrl+Shift+j). Occhio che questo è anche un buon modo per incasinare il tracciamento di quelli che vi stanno antipatici, non fatelo mai perché crea un bruttissimo karma.

Per il significato dei vari parametri potete leggere la guida di Google Analytics che su questo è abbastanza chiara. Se siete ingenui o vi piacciono le cose facili potete associare la chiamata di cui sopra ad un link con la sintassi che segue:

<a id="targetLink" href="#" onClick="_gaq.push(['_trackEvent', 'My Category', 'My Action', 'My Label']);">Clicca qui!</a>

Un modo migliore per fare la stessa cosa (che vi farà fare una bella figura alle feste) è separare la logica JavaScript dal markup HTML creando una piccola funzione che potete inserire nella sezione head della vostra pagina HTML circondata da i soliti tag script:

$(document).ready(function(){
    $('#targetLink').click(function(){
        _gaq.push(['_trackEvent', 'My Category', 'My Action', 'My Label']);
    });
});

La funzione qui sopra usa jQuery che rende la vita più semplice occupandosi di gestire le incompatibilità dell’interprete JavaScript dei diversi browser oltre a fornire un po’ di syntactic sugar che rende quasi sopportabile la sintassi di JavaScript. Se vi volete male ecco la versione in puro JavaScript:

// Questa funzione non è farina del mio sacco, ma serve a gestire
// in modo cross browser l'associazione di una funzione
// ad un evento del DOM l'ho trovata qui: http://goo.gl/wiMYe
function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
}

var mylink = document.getElementById('targetLink');
addListener(mylink, 'click', function() {
    _gaq.push(['_trackEvent', 'My Category', 'My Event', 'My Label']);
});

Perché tutta questa storia? Perché se domani dovete associare lo stesso evento ad un’altro link oppure dovete cambiare l’etichetta dell’evento non dovete tuffarvi nell’HTML della pagina per pescare il link.

Installare il Google Tag Manager

Prima di tutto dovete creare un account sul Google Tag Manager. Se siete un freelance o una agenzia è consigliabile creare un account per ogni cliente. E’ poi necessario creare un container.

New Container

Il codice generato dopo che avrete salvato dovrà essere inserito subito dopo l’apertura del tag body. Il codice da inserire nella pagina sarà simile a quello che segue:

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-VLT6"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-VLT6');</script>
<!-- End Google Tag Manager -->

Contrariamente a quello che si può pensare leggendo in giro non è necessario dichiarare esplicitamente il data layer inserendo una cosa tipo:

<script type="text/javascript">
dataLayer = [{}];
</script>

Nella pagina prima del container del GTM. Lo dice anche Google:

Explicitly declaring a data layer is optional. Therefore, if you choose not to implement the data layer code and populate it with variables, the Google Tag Manager container snippet will initiate a data layer object for you.

Definire esplicitamente il data layer è utile solo se avete bisogno di scriverci dentro qualcosa lato server, come per esempio la categoria ed il prezzo del prodotto presente nella pagina:

<script type="text/javascript">
dataLayer = [{
    'category': 'laptop',
    'price': '1000'
    }];
</script>

Ma torniamo al nostro container. Il container è appunto un contenitore vuoto e se non ci mettiamo dentro un po’ di intelligenza non serve proprio a nulla. L’intelligenza sono i tag di tracciamento che possiamo creare direttamente dall’interfaccia del GTM. Creiamo quindi il nostro primo tag di tracciamento in cui inseriremo il codice di Google Analytics vero e proprio:

New Tag GA

  • Campo Tag Name: potete scrivere quello che vi pare
  • Campo Tag Type: selezionate Google Analytics
  • Campo Web Property ID: scrivete il vostro codice UA (se non sapete dove trovarlo forse è meglio che tornate a scuola). Per fare i test vale la pena usare un nuovo profilo creato ad hoc perché non si sa mai.

Prima di cliccare su “Save” è fondamentale ricordarsi che nessun tag di tracciamento viene attivato se ad esso non è associata una regola che dica quando deve essere attivato. Perciò in basso alla pagina clicchiamo sul bottone che consente di associare una regola al tag.

New Rule GA

Fortunatamente Google ha preparato una regola di base che consente di attivare il tag per ogni pagina. Scegliamo quella dato che il codice di Google Analytics deve tracciare tutto il sito e salviamo.

New Rule GA 2

Fatto questo dovete tornare nel menu in alto e cliccare su “Create Version” e poi su “Publish” (saltiamo per ora le funzioni di preview e debug per semplcità). Questi due comandi consentono di creare una nuova versione del container che verrà pubblicata nel nostro sito. Vi consiglio, prima di pubblicare, di dare alla versione un nome comprensibile cliccando sul tasto edit che vedete dopo averla salvata. Una buona idea ad esempio è indicare nel nome cosa è cambiato rispetto alla versione precedente, ad es.:

Aggiunto tracciamento eventi

Se tutto va bene a questo punto accedendo al sito con Chrome ed il GA debugger attivo dovreste vedere nella console JavaScript che il codice viene eseguito e la chiamata viene inviata ai server di Google Analytics. Divertitevi a fare qualche prova arrivando da una ricerca organica per vedere se il referral viene passato correttamente in modo da accertarvi che tutto funzioni correttamente.

 Intermezzo

Se siete arrivati fino qui potete festeggiare come meglio credete, avete fatto un sacco di strada, ovvero:

  • Creato un container e, se necessario, dichiarato il data layer
  • Pubblicato container e data layer sul sito
  • Creato un nuovo tag di tipo Google Analytics
  • Associato al nuovo tag una regola che lo faccia attivare in ogni pagina
  • Creato una nuova versione del container e pubblicata la versione stessa
  • Testato il funzionamento del tracciamento con il GA Debugger

Se non siete sicuri che tutto funzioni non andate avanti, altrimenti non si capisce più niente. Tornate sui vostri passi e rifate il percorso.

Tracciare gli eventi con il GTM: primo metodo

Il metodo corretto di tracciare gli eventi con il GTM comporterebbe l’introduzione del concetto di macro. Per ora ne faremo a meno e vederemo un metodo che pur non essendo ortodosso fa il suo dovere. Per ottenere il risultato dobbiamo prima modificare il tag di Google Analytics appena pubblicato attivando l’opzione “Tracker Name” sotto “Advanced Configuration” e lasciando il campo di testo accanto vuoto. Attivando questa opzione in sostanza si rende accessibile l’oggetto tracker al di fuori del container del GTM (Grazie a Marco Cilia che inconsapevolmente mi ha suggerito questa idea).

Ora creiamo un nuovo tag nel nostro container di tipo “Custom HTML Tag”. Qui dentro possiamo infilare più o meno quello che vogliamo: quello che faremo noi è inserire il codice che permetterà di legare all’evento onclick sul nostro link l’attivarsi di un evento di Google Analytics. Copiamo nel box il codice che segue (qui ho usato la versione che sfrutta jQuery perché sono pigro):

<script type="text/javascript">
$(document).ready(function(){
    $('#targetLink').click(function(){
        _gaq.push(['_trackEvent', 'My Category', 'My Action', 'My Label']);
    });
});
</script>

Dobbiamo come sempre associare una regola che attivi il tag appena creato, quindi scorriamo in basso ed aggiungiamo un regola “All Pages” che pubblichi il tag in tutte le pagine esattamente come abbiamo fatto per il codice di Google Analytics all’inizio. A questo punto creiamo una nuova versione, diamo un nome sensato e pubblichiamo.

Ora verificate che tutto funzioni correttamente con il solito GA Debugger. Verificate sia che funzioni il tracciamento delle page view sia l’attivazione dell’evento quando cliccate sul link e soprattutto che i dati inviati al server di Google Analytics siano corretti e che l’account ID a cui vengono inviati i dati sia quello che vi aspettate.

Evento OK

Tracciare gli eventi con il GTM: secondo metodo

Come ho detto più sopra il metodo numero 1 non è proprio ortodosso perché non sfrutta completamente le caratteristiche del GTM. Per tracciare un evento usando il GTM nel modo corretto ripristiniamo la situazione di base: dobbiamo avere un container dove è pubblicato il solo tag di Google Analytics senza l’opzione per il “Tracker Name” attivata. Questo è possibile in due modi:

  • Cancellando le modifiche fatte e pubblicando una nuova versione
  • Ripristinando una vecchia versione senza le modifiche

Vedete voi quello che vi riesce meglio.

A questo punto per tracciare nel modo corretto gli eventi con il GTM sono necessari tre interventi.

1. Creare le macro necessarie

Una macro nel GTM non è altro che un posto dove si possono memorizzati dei valori che potranno essere riutilizzate nei Tag o nelle Regole. I valori che vengono memorizzati in una macro possono provenire da diverse parti e fra queste c’è il data layer. Ogni variabile che viene inserita nel data layer può essere memorizzata in una macro che renderà disponibile tale valore per creare tag o regole.

Nel nostro caso creiamo una macro di tipo “Data Layer Variable” per ogni informazione che vogliamo tracciare con gli eventi di Google Analytics: category, action e label (ricordate che category ed action sono sempre obbligatori). Nell’immagine che segue vedete un esempio di creazione di una macro dove vogliamo memorizzare la categoria dell’evento.

Macro

Alcune note sulla creazione:

  1. Date un nome significativo alla macro
  2. Scegliete in tipo “Data Layer Variable”
  3. Indicate il nome della variabile che sarà utilizzata nel Data Layer. Questo nome è assolutamente arbitrario ma è buona cosa mantenere una certa consistenza con quelli che sono i nomi suggeriti da Google

2. Creare un nuovo tag

Creiamo ora un nuovo Tag di tipo “Google Analytics” con “Track Type” uguale a “event” e per ogni campo a disposizione clicchiamo su “macro” per selezionare la macro che conterrà il valore che ci interessa. In questo modo tutte le volte che il data layer sarà popolato dalle variabili indicate dalla macro queste saranno anche disponibili per il Tag di tracking degli eventi.

Event Tracking Tag

4. Aggiungere una regola

A questo punto il tag di tracciamento è pronto ma ha bisogno di una regola che lo faccia attivare. Sappiamo che il nostro tag deve essere attivato quando un utente compie una azione ed il GTM mette già a disposizione una variabile speciale nel data layer chiamata “event” ed una macro che la memorizza. In questo modo è possibile creare una regola che serve appunto ad attivare questo specifico tag nel caso la variabile “event” assuma un valore particolare (nel mio caso “GAevent”).

Attenzione però: questo tipo di evento non ha nulla a che fare con gli venti di Google Analytics: si tratta di un concetto di evento più “generico” che è proprio del GTM e può essere applicato a tutti i tag, non solo quello di Google Analytics.

Event Tracking Rule

Dopo ver creato la regola non ci resta che associarla al tag di Google Analytics per il tracking degli aventi che abbiamo appena creato.

5. Un ultimo accorgimento

A questo punto, per chiudere il cerchio, è necessario tornare al link di cui vogliamo tracciare i click ed associare una funzione JavaScript che faccia attivare il tag di tracking degli eventi e passi i giusti valori al data layer in modo che siano a loro volta disponibili per i vari Tag.

Se volete un tocco di classe però, invece che associare tale funzione direttamente al link modificando il codice HTML della pagina, potete creare un ulteriore Custom HTML Tag e una regola che lo attivi su tutte le pagine. Nel tag potete inserire un frammento di codice JavaScript per associare all’evento onclick del link una funzione che popoli il data layer con il metodo push.

<script type="text/javascript">
$(document).ready(function(){
    $('#targetLink').click(function(){
     dataLayer.push({
        'event':'GAevent',
        'eventCategory':'My Category',
        'eventAction':'My Action',
        'eventLabel':'My Label'
    })
 });
});
</script>

Conclusioni

Tutta questa roba sembra complessa, ed in effetti lo è. Il GTM per vuole essere un sistema universale per gestire tutti i tipi di tag di tracciamento e per fare questo necessità di introdurre quattro concetti del tutto nuovi: container, macro, rule, data layer. L’aspetto positiva è che questi quattro pezzi possono essere combinati fra loro in maniera modulare, come i pezzi del Lego, consentendo di costruire soluzioni personalizzate.

La mia impressione personale è che in futuro diventerà sempre più importante documentare la configurazione del GTM in modo molto preciso per consentire ad altre persone di capirci qualcosa: un vantaggio sia per il cliente che per il consulente.

Web Analyitics