Guida avanzata: Tracciare eventi click con Attributi Data HTML5 in Google Tag Manager

[Aggiornata il 27 Febbraio 2019]

Una delle fantastiche cose che puoi fare grazie ai Data Attributes HTML5 consiste nel passare informazioni aggiuntive a Google Analytics quando tracci degli eventi.

Ti faccio un esempio:

Normalmente, quando tracciamo un evento di tipo click, siamo noi a selezionare manualmente in modo statico il tipo di categoria, di azione e di etichetta.

Prendiamo a modello la procedura per tracciare i Download di File ZIP che ti avevo spiegato in questa guida.

Ecco come appariva il Tag in quel caso:

Se invece volessimo gestire con un unico Tag più eventi simili (in questo caso il download di un file ZIP, ma potrebbe essere anche un altro tipo di evento), possiamo farlo creando dinamicamente delle variabili per identificare categoria, azione ed etichetta che verranno passati da Google Tag Manager a Google Analytics.

Per creare queste variabili, utilizzeremo appunto i Data Attributes degli elementi HTML 🙂

Andiamo con ordine.

STEP 1 – Aggiungi i data attribute

Naturalmente prima di procedere devi implementare gli attributi dati negli elementi HTML che ti interessa tracciare.

Nel mio esempio, ecco quello che ho inserito io in corrispondenza dell’elemento per il download del file ZIP:

Non fare caso ai dettagli: avevo già fatto questo esempio quando ho parlato dei Data Attributes all’Advanced SEO Tool 2016 🙂 Qui trovi le slide del mio intervento.

Quello che dovremo fare è creare delle variabili di tipo Elemento DOM che estrapolino questi valori.

STEP 2 – CREA LE VARIABILI

Sono 3 variabili in totale:

• data-eventocategoria
• data-eventoazione
• data-eventoetichetta

Variabile data-eventocategoria

• Variabili > Variabili definite dall’utente > Nuova > Configurazione Variabile
• Tipo di variabile: Elemento DOM.
• Metodo di selezione: ID.
• ID elemento*: mylink.

*PS: nel tuo caso, devi mettere l’ID del tuo elemento.
*PPS: devi fare in modo che tutti gli elementi che vuoi tracciare con questo sistema abbiamo lo stesso ID, se no il #barbatrucco non funziona 🙂

• Nome attributo: data-eventocategoria.
• Prima di salvare, dai un nome alla variabile, ad esempio (indovina): “data-eventocategoria”.

Variabile data-eventoazione

• Variabili > Variabili definite dall’utente > Nuova > Configurazione Variabile
• Tipo di variabile: Elemento DOM.
• Metodo di selezione: ID.
• ID elemento: mylink (ricorda di mettere il tuo).
• Nome attributo: data-eventoazione.
• Nominalo “data-eventoazione”.

Variabile data-eventoetichetta

• Variabili > Variabili definite dall’utente > Nuova > Configurazione Variabile
• Tipo di variabile: Elemento DOM.
• Metodo di selezione: ID.
• ID elemento: mylink (di nuovo: ricorda di cambiarlo).
• Nome attributo: data-eventoetichetta.
• Nominalo “data-eventoetichetta”.

STEP 3 – CREA IL TAG

Creiamo il Tag con la solita procedura (ti rimando nuovamente alla guida su Come tracciare il download dei file ZIP con Google Tag Manager, visto che stiamo usando questo esempio, ma potrebbe essere qualcos’altro).

Questa volta però, al posto di inserire staticamente i valori di categoria, azione ed etichetta, inserirai le variabili dinamiche 🙂 in questo modo:

Salva.

STEP 4 – VERIFICA IL TAG

Per capire se hai fatto tutto correttamente prima di pubblicarlo, attiva la Modalità di Anteprima e Debug e va sul tuo sito. Poi fai così:

• Scatena l’evento (in questo caso cliccando per scaricare il file ZIP).
• Clicca su gtm.linkClick.
• Clicca sul Tag appena creato, che dovrebbe essere fra i Tags Fired On This Page.
• Ora che il Tag è espanso, clicca sulla scheda Tags.
• Espandi le Properties.
• Lì dovresti trovare i nostri data attributes azione, categoria ed etichetta.

Tutto chiaro? Ecco, ora puoi salvare le modifiche cliccando sul pulsante blu “Invia” 🙂

A presto e… Buon Tag!