Google Tag Manager: tracciare gli eventi con jQuery

by Beatrice Bottoni

facebooktwittergoogle_pluspinterestlinkedintumblr

Uno dei principali benefici del Google Tag Manager è la semplicità con cui è possibile tracciare gli eventi di un sito utilizzando una comoda interfaccia grafica, senza bisogno di rivolgersi agli sviluppatori del nostro reparto IT.

In alcuni casi però, la struttura del sito o dell’HTML possono renderci le cose più complicate di ciò che ci saremmo aspettati: infatti non sempre è possibile implementare tracciamenti tramite interfaccia, agganciandosi ad esempio agli elementi dell’HTML per identificare uno specifico bottone o elemento cliccabile; in questi casi è necessario “smanettare” un po’ con JavaScript e jQuery.

Nel seguente esempio siamo partiti con un tracciamento base per poi utilizzare un Custom HTML per identificare in maniera univoca le interazioni degli utenti sul sito.

Immaginiamo di dover tracciare gli eventi su un sito “vetrina” di una azienda, in cui sono presenti parecchi link che rimandano ai prodotti/servizi offerti.

Consideriamo il layout dell’immagine: nell’header troviamo una serie di link che rimandano al catalogo, alle informazioni sull’azienda e ai contatti. Sotto abbiamo invece un carousel di immagini scorribile, ognuna di queste è a sua volta cliccabile e rimanda ad un link. Il link del bottone 2 dell’header è il medesimo dell’elemento 4 nel carousel (per esempio rimandano entrambi alla sezione /prodotti).

mockup

Il nostro obiettivo è tracciare le interazioni degli utenti con questi elementi della homepage. Come possiamo farlo utilizzando il Tag Manager?

La prima idea che può venirci in mente è creare un Event Tag per ogni singolo elemento (es. bottoneHeader1, bottoneHeader2, carouselElement1, carouselElement2…) e associare ad ognuno un Trigger che scatena l’evento ad ogni click effettuato sull’elemento identificato dalle Auto-Event variables Element ID o un Element Class, i cui valori sono reperibili nel nostro HTML.

Ad  esempio se vogliamo attivare l’evento al click sull’elemento “Prodotti” dell’header impostiamo Element ID equals menuProdotti  oppure possiamo utilizzare il nuovo operatore Matches CSS selector, attivando il trigger quando Click Element matches CSS selector #menuProdotti.

Questa soluzione è semplice ma non sempre il Tag Manager riesce a individuare l’element ID o class corretti: a questo punto abbiamo considerato la soluzione di utilizzare la variabile Auto-Event Element URL per scatenare il tag, ossia quando viene cliccato l’elemento che rimanda ad una specifica URL: nel nostro caso, Element URL contains /catalogo/prodotti.
Per evitare di creare una miriade di tag possiamo creare una variabile Lookup Table, dandogli come input {{element url}} e come output il nome che vogliamo dare all’elemento. Tale variabile verrà poi passata come etichetta dell’evento.

Questa soluzione può sembrare soddifacente MA…

Cosa succede se un bottone dell’header rimanda allo stesso identico URL di un elemento del carousel?

Verrà scatenato un doppio evento e il tracciamento perderà la sua accuratezza. Per ovviare a questo problema ci “sporcheremo” un po’ le mani con JavaScript e jQuery seguendo questi punti:

1. Creiamo un Custom HTML Tag:

Questo codice rileva i click effettuati sull’elemento con ID “menuProdotti” all’interno del <body> dell’HTML  e tramite il metodo dataLayer.push manda i valori delle variabili al dataLayer: eventCategory, eventAction e eventLabel saranno poi inserite come valori nel tag dell’evento.

2. Andiamo a creare ora le 3 variabili dataLayer con lo stesso nome che gli abbiamo dato nel codice (eventCategory, eventAction e eventLabel).

3. Creiamo l’evento Custom Event che si attiva quando l’evento corrisponde a “Header_Event”.

4. L’ultimo step è la creazione del tag per passare i parametri a GA, dandogli come parametri dell’evento le 3 variabili dataLayer create in precedenza.