Uliana Lesiv
AuthorGoogle 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!
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.
È necessario creare un data layer se si vuole:
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.
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.
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' }];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 |
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.
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.
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:
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:
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’
});
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”.
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'
});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”.
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'
}
}];È 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 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:
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.
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. |
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”.
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”.
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:
Cliccate su “Salva”.
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:
Per verificare se Google Analytics cattura i dati, andate su “Amministrazione” → DebugView.
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.
Buon esempio:
dataLayer.push({'variable_name': 'variable_value'});Cattivo esempio:
datalayer.push({'variable_name': 'variable_value'});Buon esempio:
dataLayer.push({'variable_name': 'variable_value'});Cattivo esempio:
dataLayer.push({variable_name': 'variable_value'});Se non riuscite ad attivare i tag in tutte le posizioni necessarie del sito web, controllate i nomi delle variabili nelle diverse pagine.
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'});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:
Stape offre tante soluzioni! Clicca su Prova gratuita per registrarti e scoprirle tutte.
Uliana è Content Manager presso Stape, specializzata in analisi e configurazioni di integrazione. Semplifica concetti di tracciamento complessi in intuizioni chiare.
Commenti