[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!
Altre Guide che potrebbero interessarti
- Guida Base: Come Tracciare il Download dei File ZIP con…
- Guida su come Tracciare Download PDF con Google Tag Manager
- Come migrare gli eventi da Google Universal Analytics (GA3)…
- Guida su come tracciare click al link Mailto con Google Tag…
- Guida Base: come tracciare i click sulle Tab in GA4 con…
- Guida Base: Tracciare i Click sui Link Esterni verso YouTube…
Chiedi pure qui sotto, sarò pronto a risponderti!
Unisciti alla più grande community italiana dedicata alla Digital Analytics!
Iscrivendoti alla newsletter gratuita di Tag Manager Italia riceverai:
- guide (base/avanzate) passo passo
- news di approfondimento
- webinar gratuiti
- offerte esclusive
e altre risorse di 1°classe sul mondo della Digital Analytics!
- Come gestire la Consent Mode v2 con Iubenda e Google Tag Manager
- ANALYTIX TALK: il Podcast di Marketing e Digital Analytics
- Tutto sulla Consent Mode e come gestire la Consent Mode v2: guida completa
- Come migrare gli eventi da Google Universal Analytics (GA3) a Google Analytics 4 (GA4)
- [Caso Studio] Con una strategia di Digital Analytics e il Server-Side tracking NetFerry ha ottimizzato il tasso di conversione e le azioni di marketing del proprio Ecommerce
- Matteo Zambon su Guida Base: tracciare l’Invio di Form Contatti in GA4 (Google Analytics 4) con Google Tag Manager
- Matteo Zambon su Come configurare il Cross Domain tracking (tracciamento interdominio) in Google Analytics 4
- Matteo Zambon su Guida Avanzata: come configurare Conversion API di Facebook con l’integrazione nativa per Google Tag Manager
- Matteo Zambon su Guida Base: Gestire la Cookie Law di Iubenda con Google Tag Manager
- Luca su Guida Base: Gestire la Cookie Law di Iubenda con Google Tag Manager
Serena
28 05 2019
Ciao Matteo,
io sto mettendo dei Tag agli accordions. Gli accordions hanno il titolo e poi hanno il “+” alla fine che hanno due “class” separate: una “accordion_heading” e una “fa-fa-plus”
Ho messo il tag al titolo e tutto ok. L’ho messo anche al “+” però lì ovviamente se come azione metto ((Click Text)) esce “not set”.
Come faccio a mettere l’evento sul “+” ma avere come ((Click Text)) il testo dell’accordion invece di “not set”?
C’è una soluzione?
Grazie mille
Matteo Zambon
29 05 2019
Ciao Serena il #barbatrucco lo fai attraverso una variabile di tipo JavaScript ma devi masticare un po’ di codice JavaScript. La soluzione per te meno problematica sarebbe quella di farti mettere un data attribute HTML (data-title) e prendere quell’attributo nell’elemento + così quando l’utente va a cliccare il + tu prendi il valore dell’attributo data-title.
Fammi sapere 🙂