Come un data layer passa gli eventi ai tuoi tag di analytics

Che cos'è un data layer?

Nella web analytics, un data layer è un oggetto JavaScript presente nella pagina in cui il tuo sito scrive gli eventi e i loro valori. In questo modo i tag di analytics e marketing leggono dati puliti e con un nome, invece di estrarli dall'HTML. La documentazione di Google Tag Manager lo riassume così: "Il data layer è un oggetto usato da Google Tag Manager e gtag.js per passare informazioni ai tag."

Lo scopo del layer è la separazione. Il codice della tua applicazione sa che un checkout si è appena concluso e quanto valeva. I tuoi tag sanno dove inviare quell'informazione. Il data layer sta in mezzo, e Google dichiara l'obiettivo di progettazione senza giri di parole: i tag "sono pensati per fare riferimento a informazioni aggiunte al data layer in modo organizzato e prevedibile, anziché analizzando variabili, dati delle transazioni, categorie di pagina e altri segnali sparsi nella pagina". Se un restyling sposta il prezzo in un altro <div>, i tag che leggono il data layer continuano a funzionare, mentre quelli che fanno scraping della pagina si rompono.

Quali sono i due tipi di data layer?

I data layer hanno due forme: un oggetto di stato che descrive la pagina e una coda di eventi che registra in ordine ciò che è successo. La forma decide come lo legge un tag.

Il modello a oggetto di stato è il più vecchio. Il Customer Experience Digital Data Layer 1.0, un Community Group Final Report del 10 dicembre 2013, afferma che l'oggetto radice "DEVE essere digitalData, e tutte le proprietà dei dati in questa specifica DEVONO rientrare nella gerarchia dell'oggetto digitalData." La sezione sullo stato aggiunge che "Non è uno standard W3C e non si trova nel percorso degli standard W3C." Gli eventi stanno in un array dentro l'oggetto, digitalData.event[n], che la specifica definisce come "elenco degli eventi che sono stati misurati".

Nella pratica ha vinto il modello a coda, per via dell'ordine di caricamento. La documentazione di Adobe ne spiega il vantaggio: pagine e script "possono iniziare a registrare dati, a far scattare eventi e a registrare callback aggiungendoli all'array, anche prima che lo script del data layer sia stato caricato". Un semplice array accetta i push prima ancora che nella pagina esista il codice di un qualsiasi fornitore.

Come diventa un evento di analytics un dataLayer.push?

Un dataLayer.push() diventa un evento di analytics quando Tag Manager elabora il messaggio, associa la sua chiave event a un trigger e attiva un tag che legge i valori inviati. La sequenza ha cinque passaggi:

1. Dichiara l'array una sola volta, sopra lo snippet del container. Il codice di installazione di Google è window.dataLayer = window.dataLayer || [];, posizionato prima del caricamento di Tag Manager.
2. Invia un messaggio con il nome di un evento. La sintassi di Google è dataLayer.push({'event': 'event_name'}), e un solo push può portare dei valori insieme all'evento, come in dataLayer.push({'color': 'red', 'conversionValue': 50, 'event': 'customize'}).
3. Tag Manager mette in coda ed elabora il messaggio. Google afferma che "Tag Manager elabora i messaggi con logica first-in, first-out: ogni messaggio viene elaborato uno alla volta, nell'ordine in cui è stato ricevuto."
4. Un trigger Custom Event associa il nome dell'evento. "Se il messaggio è un evento, tutti i tag con condizioni di attivazione soddisfatte scatteranno prima che Tag Manager passi al messaggio successivo."
5. Una Data Layer Variable consegna il valore al tag, e il tag lo inoltra, per esempio come parametro di un evento GA4.

Il passaggio 4 spiega una regola su cui molti inciampano. Un push senza la chiave event aggiorna i valori ma non fa scattare nulla. Google avverte che i push dal codice della pagina "non sono garantiti come disponibili per l'evento successivo", e la sua soluzione è "aggiungere un nome di evento a un messaggio quando viene inviato al data layer, e poi mettersi in ascolto di quel nome con un trigger Custom Event."

Lo snippet di gtag.js usa la stessa coda. Lo snippet di Google definisce la funzione gtag come un wrapper di una riga:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');

Quindi un sito che usa sia gtag.js sia Tag Manager ha un solo array che riceve messaggi da entrambi. Google è esplicito: "È supportato un solo oggetto dataLayer per pagina."

Perché i valori del data layer passano da un push al successivo?

I valori del data layer si trascinano perché ogni push viene unito a un "modello di dati astratto" in continuo aggiornamento, invece di sostituirlo. La libreria open source data-layer-helper di Google, che documenta questo modello, dice che "conserva il valore più recente di tutte le chiavi impostate da un messaggio del data layer." I valori scalari vengono sovrascritti. Gli oggetti semplici e gli array vengono uniti in modo ricorsivo: le chiavi di un nuovo oggetto vengono copiate su quello vecchio, e gli indici di un nuovo array vengono scritti sopra quelli del vecchio, lasciando al loro posto gli indici che il nuovo array non imposta.

Questa regola è innocua per una stringa pageType ed è pericolosa per l'ecommerce. Se invii la visualizzazione del carrello con due articoli e poi un acquisto con un solo articolo, il modello può ancora contenere il secondo articolo del push precedente. La guida all'ecommerce GA4 per Tag Manager di Google evita il problema svuotando prima l'oggetto in tutti e 14 i suoi esempi di eventi. Il suo esempio di acquisto, abbreviato:

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "purchase",
  ecommerce: { transaction_id: "T_12345", value: 72.05, currency: "USD", items: [ ... ] }
});

Il null funziona perché null rientra in "tutto il resto" nella tabella di unione, quindi sovrascrive del tutto il vecchio oggetto. Il push successivo si unisce quindi a un modello vuoto. Se nei tuoi report sui ricavi compaiono articoli che nessuno ha comprato, controlla prima di tutto se manca uno svuotamento. La parte GA4 di questa configurazione è trattata in come scegliere gli strumenti di tracciamento ecommerce senza tracciare troppo.

Cosa rompe un data layer?

Sei errori spiegano la maggior parte dei data layer che sembrano corretti ma perdono eventi. Ognuno viene dall'elenco di risoluzione dei problemi di Google o deriva dalle regole di unione viste sopra.

La riga sul naming è il punto in cui il data layer incontra il resto della tua strumentazione. Un data layer è coerente solo quanto le specifiche che lo guidano, ed è il compito di un piano di tracciamento. I nomi stessi seguono le regole spiegate in come una convenzione di naming degli eventi sopravvive al primo cambio di nome.

Cosa deve contenere un push del data layer?

Un push del data layer deve contenere il nome dell'evento e i valori che servono a un report, e nient'altro che identifichi una persona. Tutto ciò che viene inviato è leggibile da ogni tag del container, compresi i tag aggiunti più tardi da qualcun altro. Il contenuto dei campi di un modulo, gli indirizzi email e i nomi non vanno messi nella coda. Invia invece un identificativo del modulo e un esito, come spiega per i moduli la guida pratica al tracciamento senza cookie.

Un buon test è lo stesso che applichi a qualsiasi evento. Ogni valore del push dovrebbe rispondere a una domanda posta da un report. Se nessuno sa dire quale report, elimina la chiave. La pratica di fondo, cioè registrare le azioni come eventi con nome e proprietà, è trattata in come il tracciamento degli eventi registra ciò che gli utenti hanno davvero fatto.

Ogni strumento di analytics ha bisogno di un data layer?

No, nessuno strumento di analytics ha davvero bisogno di un data layer. Il livello esiste perché un tag manager possa instradare un unico insieme di valori verso molti fornitori. Uno strumento che riceve gli eventi da una chiamata di funzione diretta salta la coda e le regole di unione. Flowsery funziona così. Il suo tracciamento degli obiettivi registra gli eventi con una sola chiamata come window.flowsery("signup"), con "Nessuna configurazione complessa e nessun tag manager necessario." Gli eventi compaiono in un feed in tempo reale, così puoi "Fare debug e convalidare il tuo tracciamento all'istante". Ai tuoi eventi puoi associare valori di ricavo per misurare l'impatto di ogni azione, e il tracciamento avviene senza cookie e senza dati personali. La funzione di tracciamento di obiettivi ed eventi mostra la configurazione. I siti che usano già un data layer per altri fornitori possono tenerlo e chiamare window.flowsery() dallo stesso codice che invia l'evento.

Domande frequenti

Il data layer è la stessa cosa di Google Tag Manager?

No. Il data layer è l'array presente nella tua pagina, mentre Tag Manager è uno dei consumatori che lo leggono. Lo snippet di Google per gtag.js usa lo stesso array dataLayer senza Tag Manager, e il client data layer di Adobe usa un proprio array chiamato adobeDataLayer.

Dove va messo il codice del data layer nella pagina?

Dichiaralo il più in alto possibile nella pagina, sopra lo snippet di Tag Manager o di gtag.js. Google precisa che anche i valori che "devono essere disponibili per Tag Manager al caricamento della pagina" vanno inviati sopra il codice del container. I push posizionati più in basso raggiungono comunque la coda, ma arrivano dopo i primi eventi del container.

Posso rinominare la variabile dataLayer?

Sì. Tag Manager accetta il nome come parametro nello snippet del container, mentre gtag.js usa il parametro di query l, come in l=myNewName. A quel punto ogni dichiarazione e ogni push devono usare il nuovo nome, perché i push verso il vecchio nome non arrivano a nulla.

Perché il mio evento purchase di GA4 contiene articoli di un evento precedente?

Il push precedente si è fuso nel modello dati e il tuo push di acquisto non lo ha ripulito. Gli array e gli oggetti semplici si fondono in modo ricorsivo, quindi gli articoli rimasti sopravvivono. Invia { ecommerce: null } subito prima di ogni evento ecommerce, come negli esempi di Google.

I valori del data layer persistono tra un caricamento di pagina e l'altro?

No. Google afferma che ogni variabile del data layer persiste "solo finché il visitatore resta sulla pagina corrente." I valori che contano su ogni pagina, come il tipo di visitatore o la categoria della pagina, vanno inviati di nuovo a ogni caricamento.

Qual è la differenza tra dataLayer.push e gtag?

gtag() è un wrapper che chiama dataLayer.push(arguments), quindi entrambi scrivono nella stessa coda. La differenza sta nel formato del messaggio e nei metodi personalizzati. Google dice che le funzioni inviate per accedere a set, get e reset "devono usare .push" direttamente, perché gtag interpreta una funzione come "un comando non valido" e la ignora.

Perché il mio dataLayer.push non ha attivato un tag?

Un push attiva un tag solo se contiene una chiave event che un trigger Evento personalizzato sta ascoltando. I valori inviati senza di essa aggiornano comunque il data layer, ma Tag Manager non ha nulla con cui fare il confronto, quindi nessun trigger parte e nessun tag si attiva. Aggiungi il nome dell'evento allo stesso push, altrimenti quei valori restano lì finché un messaggio successivo non ne porta uno.

Per un nuovo progetto devo usare digitalData o dataLayer?

Scegli il modello a coda di eventi, quello usato sia da dataLayer sia da adobeDataLayer. Accetta push prima che sia caricato qualsiasi script di un fornitore, cioè proprio il problema dell'ordine di caricamento in cui inciampa il modello a oggetto di stato. Un tag che legge digitalData prima che l'oggetto sia popolato non legge nulla. Inoltre digitalData nasce da un report del Community Group del 2013 che dichiara apertamente di non essere uno standard W3C.

È sicuro inviare indirizzi email al data layer?

No. Tutto ciò che viene inviato al data layer è leggibile da ogni tag del container, compresi i tag aggiunti più tardi da qualcun altro. Invia invece un identificativo del modulo e un esito, mai il contenuto effettivo dei campi, il nome o l'indirizzo email.

adobeDataLayer è lo stesso del dataLayer di Google?

Sono entrambi semplici array che elaborano i messaggi in ordine, ma sono variabili globali distinte. Tag Manager e gtag.js di Google condividono window.dataLayer, mentre il client data layer di Adobe usa un proprio array, window.adobeDataLayer. La documentazione di Adobe descrive lo stesso vantaggio sull'ordine di caricamento. Pagine e script possono registrare dati e attivare eventi inviando al array prima ancora che lo script del data layer sia stato caricato.