Guida completa al data layer in Google Tag Manager
Scritto da
Uliana Lesiv
Google Tag Manager (GTM) è un ottimo strumento per elevare l’analisi e il monitoraggio dei siti web. Il data layer è una delle caratteristiche che permettono di portare il monitoraggio a un livello superiore.
Il data layer è un oggetto JavaScript che raccoglie i dettagli delle interazioni degli utenti sul vostro sito web. Con il suo aiuto, è possibile raccogliere pressoché qualsiasi dato, a partire dalle visualizzazioni dei prodotti fino al sistema operativo dell’utente. L’utilizzo dei data layer in GTM consente di configurare tag di monitoraggio e trigger più mirati, fornendo approfondimenti sul comportamento degli utenti.
Per questo motivo, abbiamo creato una guida completa sul data layer che coprirà molti aspetti della sua implementazione e del suo utilizzo in Google Tag Manager. Spiegheremo cos’è un data layer, i suoi casi d’uso, l’implementazione del data layer su un sito web, come creare un data layer in Tag Manager, testare la configurazione e gli errori di configurazione più comuni.
Iniziamo!
Cos’è il data layer in Tag Manager?
Il data layer è un oggetto JavaScript usato per passare i dati ai tag. Permette di trasferire eventi o variabili e di impostare trigger basati su valori specifici delle variabili. Il data layer viene utilizzato sia in Google Tag Manager che in gtag.js.
Il data layer è un intermediario tra il vostro sito web e Google Tag Manager e funziona come un hub per memorizzare i dati strutturati per il vostro contenitore.
Casi d’uso del data layer
È necessario creare un data layer se si vuole:
- Impostare un monitoraggio affidabile. Senza un data layer, i dati vengono estratti direttamente dal DOM HTML (lo standard utilizzato per aggiungere, ottenere, modificare o eliminare elementi HTML sul sito web) e quindi inviati direttamente al contenitore GTM. Il problema è che il DOM HTML può cambiare, interrompendo il lancio dei tag e la raccolta dei dati.
Con il data layer non si verifica questo problema, in quanto il contenitore GTM preleva i dati dal data layer della pagina, che è molto più stabile del DOM HTML. I dati smettono di essere registrati solo se qualcuno interrompe il data layer della pagina.
- Arricchire i dati dei tag in base a condizioni specifiche. Supponiamo di voler inviare dati sul valore dell’evento di acquisto solo se l’utente ha pagato più di 50 euro. Anziché cercare tra le variabili, i dettagli della transazione, le categorie della pagina e altri segnali sparsi nella pagina, l’uso di un data layer con le variabili pertinenti e i loro valori (nel nostro caso, valore dell’acquisto > 50 euro) garantisce che i dati necessari siano facilmente accessibili ogni volta che i tag ne hanno bisogno.
Come funziona il data layer?
Potete specificare esattamente quali dati volete memorizzare in questo livello. Esistono due metodi per creare il data layer e riempirlo con i parametri necessari al monitoraggio, che vedremo nella prossima sezione.
GTM legge e prende i valori necessari dal data layer e li invia a strumenti di analisi come Google Analytics, Google Ads, pixel di Facebook ecc.
Sintassi del data layer ed esempi
In Google Tag Manager, il data layer è un array, come indicato da “[]”, e contiene un oggetto, rappresentato da “{}” come mostrato nello script seguente:
dataLayer = [{}];Gli elementi all’interno di un data layer sono denominati variabili e sono formattati come coppie ‘chiave’ : ‘valore’ (inserite in “{}”).
GTM utilizza una variabile del data layer chiamata “event”, utilizzata anche dagli ascoltatori di eventi JavaScript per attivare i tag quando un utente interagisce con gli elementi di un sito web. Quindi, in base all’esempio seguente, “event” è la “chiave” e “register” è il “valore”.
dataLayer = [{'event' : 'register' }];Per le variabili, la sintassi è la stessa degli eventi. Nel seguente esempio, prendiamo il paese desiderato per il monitoraggio - “paese” (“variable_name”) è la “chiave” e “Stati Uniti” è il “valore” (“variable_value”)
dataLayer = [{'country' : 'united states' }];Inizializzazione del data layer
Ci sono due metodi per implementare il data layer: la dichiarazione e dataLayer.push. Descriveremo come usare entrambi i metodi, ma potete passare direttamente a quello più adatto a voi.
In breve, consigliamo di usare dataLayer.push perché è più diffuso e copre la maggior parte delle esigenze. Inoltre, questo metodo è più sicuro da usare, dal momento che non interrompe gli eventi in Google Tag Manager, mentre un’impostazione impropria delle dichiarazioni del data layer può facilmente causare problemi.
| Dichiarazione del data layer | dataLayer.push | |
| Funziona meglio per | Valori necessari prima del caricamento della pagina | Invio di informazioni nel dataLayer per eventi che non siano l’evento di caricamento della pagina |
| Ora di push di una variabile del data layer | Prima del tempo di esecuzione | Durante il tempo di esecuzione |
| Posizionamento nel codice | Sopra lo snippet del contenitore di Google Tag Manager | In qualsiasi parte del codice |
| Passa alla dichiarazione del data layer | Passa a dalaLayer.push |
Metodo 1: Dichiarazione del data layer
Per utilizzare questo metodo, lo snippet del data layer deve essere posizionato sopra lo snippet del contenitore di Google Tag Manager. In questo caso, il data layer si inizializza prima dell’inizializzazione di Tag Manager.
In generale, questo non è un modo popolare o consigliato per creare un data layer, ma funziona se volete creare punti di dati prima del caricamento del contenitore di GTM e usare questi punti di dati per la gestione dei tag.
Cambiate ‘variable_name’: ‘variable_value’ con i parametri necessari e incollate il codice nella pagina del sito web prima dello snippet GTM.
dataLayer = [{
'variable_name': 'variable_value'
}];
...
Attenzione: utilizzate l’operatore “=“ per assegnare i valori dell’oggetto all’array dataLayer.
Metodo 2: dataLayer.push
Questo metodo aggiunge dinamicamente elementi di oggetti al data layer. A differenza del metodo di dichiarazione del data layer, con dataLayer.push si può inserire lo snippet del data layer in qualsiasi punto del codice.
Può essere un po’ confusionario, ma ‘dataLayer’ è anche una variabile JavaScript a cui si può accedere da qualsiasi funzione che interagisca con l’oggetto finestra. Quindi, per evitare conflitti con qualsiasi altro array JavaScript locale chiamato ‘dataLayer’, il modo migliore è usare il prefisso ‘window.dataLayer’.
Di conseguenza, occorre utilizzare il seguente codice per il metodo dataLayer.push. Al posto di ‘‘variable_name’’ : ‘‘variable_value’’, aggiungete i parametri richiesti.
window.datalayer = window.dataLayer || [];
window.dataLayer.push({
'variable_name' : 'variable_value'
});Nel blocco di codice precedente, il dataLayer viene impostato su un dataLayer esistente, se esiste già. Altrimenti, viene creato un nuovo dataLayer come array vuoto. L’operatore || (OR) assicura che l’assegnazione avvenga se una di queste condizioni è soddisfatta.
In questo modo, eviteremo di creare dichiarazioni multiple, che potrebbero sovrascrivere dataLayer.
Esempio e documentazione sul data layer per e-commerce
Per molti CMS e-commerce esistono plugin (inclusi quelli di Stape) che possono creare un data layer per gli eventi standard dell’e-commerce. In alcuni casi, però, questo potrebbe non essere sufficiente. Ad esempio, se hai bisogno di eventi aggiuntivi o di ulteriori dati all’interno degli eventi del data layer. Oppure se utilizzi una piattaforma completamente personalizzata.
In questi casi, è necessario contattare i tuoi sviluppatori per creare eventi nel data layer con il payload di cui hai bisogno. Si tratta solitamente di un compito piuttosto semplice per uno sviluppatore e che richiede poco tempo, anche se dipende dall’architettura del tuo sito o della tua piattaforma.
Alcune linee guida utili:
- Fai una copia del documento, rimuovi gli eventi che non ti servono e/o aggiungi quelli di cui hai bisogno con il relativo esempio di payload.
- Usa lo stesso formato dati per tutti gli eventi. È consigliabile seguire lo standard di GA4.
- Se l’evento non è ovvio (es. view_item o add_to_cart), descrivi nel dettaglio quando deve essere attivato. Questo eviterà inutili scambi con gli sviluppatori.
- I dati utente possono essere utilizzati su quasi tutte le piattaforme di marketing: è importante che siano presenti nel data layer. Usarli migliorerà notevolmente la qualità del tracciamento.
- Cerca di evitare eventi nel data layer che vengono inviati prima del reindirizzamento dell’utente verso un’altra pagina. Potresti perdere quei dati, poiché l’evento potrebbe non essere inviato in tempo. Ad esempio, se vuoi inviare un evento Lead dopo l’invio di un modulo, ma l’utente viene subito portato su una pagina di ringraziamento, la migliore pratica è inviare l’evento Lead nel data layer sulla pagina di ringraziamento, non al momento dell’invio.
- Se hai già degli eventi nel data layer sul tuo sito, è preferibile usare nomi personalizzati per i nuovi eventi, invece di modificare quelli esistenti, per non compromettere il tracciamento già attivo. Ad esempio, se esiste già un evento add_to_cart, è meglio creare un nuovo evento chiamato add_to_cart_v2 piuttosto che modificare quello originale, e poi riconfigurare i tag in base al nuovo evento.
- Assicurati di controllare il data layer dopo che gli sviluppatori hanno implementato le modifiche. Anche piccoli errori nel payload possono causare problemi di tracciamento.
Come creare un data layer in Tag Manager?
Potete accedere agli elementi del vostro data layer array in Google Tag Manager in modo diverso. Per sfruttare i dati all’interno di Google Tag Manager, assegnateli a una variabile o utilizzateli come trigger di eventi. Queste variabili o eventi possono poi essere incorporati nei tag, nei trigger o in altre variabili.
Di seguito presentiamo tre casi d’uso del data layer e la loro configurazione in GTM:
Caso d’uso 1: Variabili del data layer e punti dati
Esempio di codice
Come esempio, prendiamo il valore di acquisto delle magliette arancioni.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘product_name’ : ‘orange t-shirt’,
'purchase_value' : '5',
‘purchase_currency’ : ‘EUR’
});Configurazione in GTM
- 1.Per la configurazione delle variabili, nel contenitore GTM, andare su Variabili → cliccare su “Nuova” in Variabili definite dall’utente.
2. Scegliere “Variabile del data layer” come tipo di variabile.
3. Aggiungere il nome della variabile del data layer e cliccare su “Salva”.
Attenzione: il campo è sensibile alle maiuscole e alle minuscole, quindi assicuratevi che il nome corrisponda al nome del valore nel codice aggiunto alla pagina. Nel nostro caso, è “purchase_value”.
Caso d’uso 2: Data layer per attivare gli eventi
Esempio di codice
Come esempio di codice, prendiamo la variabile data layer che attiva l’evento “register” quando una persona compila i dati richiesti per la registrazione e fa clic su “Registrati”.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'register'
});Configurazione in GTM
1. Accedere ai Trigger di Google Tag Manager → cliccare su “Nuovo”.
2. Scegliere il tipo di trigger “Evento personalizzato”.
3. In “Nome evento”, aggiungere il nome allo stesso modo del nome del valore nel codice, in quanto questo campo è sensibile alle maiuscole e alle minuscole. Cliccare su “Salva”.
Caso d’uso 3: Variabile data layer con variabili e trigger di eventi
Esempio di codice
L’esempio di variabile del data layer sotto riportato attiva gli eventi di acquisto e crea informazioni sull’acquisto.
dataLayer = [{
'event': 'purchase',
'purchase_info': {
'purchase_amount': 5,
'purchase_curency': 'EUR'
}
}];Configurazione in GTM
È possibile utilizzare le variabili del codice sia come variabili che come trigger di eventi in Google Tag Manager. Controllate il processo di configurazione dei passaggi precedenti per le variabili e gli eventi.
Il data layer esiste in GTM lato server?
Il data layer non esiste in Google Tag Manager lato server, come invece succede in GTM lato client.
Tuttavia, sGTM ha un oggetto chiamato Client che controlla le richieste HTTP provenienti da GTM web. Se la richiesta contiene dati specifici, il Client trasforma i dati della richiesta in dati dell’evento. I tag sono utilizzati anche per inviare i dati dal contenitore web GTM al server GTM.
Al fine di riempire di dati i punti del contenitore del server GTM, occorre scegliere il metodo da utilizzare per inviare i dati dal web al server GTM. Tra i più diffusi vi sono:
Usare Google Analytics 4
Questo metodo è particolarmente efficace se impostate il monitoraggio lato server per Google Ads o Floodlight, poiché entrambi si basano esclusivamente sui tag GA4.
1. In GTM Web create un tag con la configurazione “Google Analytics: Evento GA4”.
2. Troverete dei campi predefiniti per questi dati e potrete assegnare le variabili del data layer a ogni singolo parametro.
Usare Data Tag/Data Client
Il vantaggio principale dell’utilizzo di Data Tag/Data Client è l’invio automatico del data layer e di altri dati comuni dal web al server GTM.
1. Creare un nuovo tag nel contenitore web GTM e scegliere “Data Tag” come configurazione del tag.
Attenzione: È indispensabile aggiungere il Data Tag alla galleria GTM.
2. Nella configurazione del tag, attivare le due caselle di controllo “Invia dati comuni” e “Invia tutto dal data layer”.
Il sistema analizzerà automaticamente i dati in GTM web e inoltrerà tutte le informazioni disponibili al server GTM.
| Consultate il nostro post sulla creazione di un data layer per Google Tag Manager lato server per saperne di più sul processo di configurazione. |
Inviare la variabile del data layer a Google Analytics 4
Attenzione: Di seguito illustriamo come impostare il tag di Google per l’invio dei dati; se avete già configurato il tag di Google, non occorre creare un nuovo tag. Basta saltare i passaggi seguenti e passare direttamente alla sezione che spiega come creare una dimensione personalizzata.
In questo caso, basterà aggiungere i parametri come nel codice per il data layer nella sezione “Impostazioni degli eventi condivisi”.
Configurare il tag di Google in GTM
1. Nella sezione “Tag” di GTM, cliccate su “Nuovo” e scegliete “Tag di Google” come tipo di tag.
2. Aggiungete l’ID di misura GA4 e, nella sezione “Impostazioni dell’evento condiviso”, elencate i parametri aggiunti al codice.
3. Come trigger scegliete “Visualizzazione pagina - Tutte le pagine”.
Creare dimensione personalizzata in GA4
Esiste un elenco di parametri standard. Se i dati che volete monitorare con l’aiuto del data layer non sono presenti negli eventi consigliati da Google Analytics, dovete aggiungerli manualmente nel vostro account GA4 come dimensioni personalizzate. Dopo averle aggiunte, appariranno nei report di GA4.
1. Nell’account di Google Analytics, cliccate su “Amministrazione” → “Definizioni personalizzate”.
2. Cliccate su “Crea dimensione personalizzata” e compilate i parametri richiesti:
- Nome della dimensione: il nome che volete vedere nei report.
- Ambito: scegliete l’ambito di un evento, di un utente o di un elemento.
- Parametro dell’evento: aggiungete il nome o l’evento della variabile, come specificato nello snippet del data layer (ricordate che i dati del campo sono sensibili alle maiuscole e alle minuscole).
Cliccate su “Salva”.
Test della configurazione del data layer
Modalità di debug in GTM
Per verificare se Google Tag Manager cattura la variabile, occorre seguire alcuni semplici passi simili al normale debug in GTM.
1. Cliccate su “Anteprima” e aggiungete l’URL del sito web di cui state facendo il debug.
2. Passate alla sezione “Variabili” e, se tutto funziona, vedrete i dati necessari in questa scheda.
Se avete problemi con la modalità di debug di GTM, consultate le nostre guide:
Google Analytics 4
Per verificare se Google Analytics cattura i dati, andate su “Amministrazione” → DebugView.
Risoluzione dei problemi del data layer
Problema 1: dataLayer.push non funziona
Se notate che le variabili o gli eventi non vengono spinti, è probabile che non abbiate usato i caratteri corretti per i nomi degli oggetti o che abbiate saltato le virgolette.
Soluzione: usare i caratteri giusti per i nomi degli oggetti e le virgolette
- Controllate se “dataLayer” è nel camel case.
Buon esempio:
dataLayer.push({'variable_name': 'variable_value'});Cattivo esempio:
datalayer.push({'variable_name': 'variable_value'});- Assicuratevi che tutti i nomi delle variabili siano inseriti tra virgolette.
Buon esempio:
dataLayer.push({'variable_name': 'variable_value'});Cattivo esempio:
dataLayer.push({variable_name': 'variable_value'});Problema 2: i tag non si attivano
Se non riuscite ad attivare i tag in tutte le posizioni necessarie del sito web, controllate i nomi delle variabili nelle diverse pagine.
Soluzione: nomi di variabili coerenti
L’errore più frequente è l’incoerenza dei nomi delle variabili nelle diverse pagine, per cui occorre rivedere i nomi.
Buon esempio:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable_name': 'variable_value'});Cattivo esempio:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable Name': 'variable_value'});Riepilogo
Il data layer di Google Tag Manager (GTM) è un componente fondamentale di GTM. Permette di catturare le interazioni degli utenti con il vostro sito web, fornendo al contempo dati aggiuntivi sull’interazione o sul suo contesto. Il data layer è essenziale per creare una struttura di dati migliore.
Il concetto di data layer è piuttosto impegnativo da implementare e molto probabilmente gli sviluppatori dovranno creare una complessa infrastruttura di monitoraggio.
Ecco un riepilogo veloce:
- Consigliamo di utilizzare il metodo dataLayer.push per implementare il data layer.
- Dopo l’implementazione del data layer, potrete utilizzarlo come punti di dati, trigger di eventi o in entrambi i modi.
- Se utilizzate il monitoraggio lato server, combinate sia il monitoraggio lato client che quello lato server per implementare il data layer.
- Aggiungete le dimensioni personalizzate in GA4 (se usate questo strumento) per vedere i dati nei report di GA4.
- Ricordate gli errori frequenti che causano il malfunzionamento del data layer: usate caratteri corretti e scegliete nomi di variabili coerenti in tutto il codice che aggiungete, come quando impostate il monitoraggio in GTM.
Stai passando a GTM server-side?
Stape offre tante soluzioni! Clicca su Prova gratuita per registrarti e scoprirle tutte.
Prova gratuita
Commenti