Il livello dati è un oggetto utilizzato da Google Tag Manager e gtag.js per passare le informazioni ai tag. Gli eventi o le variabili possono essere trasmessi tramite il livello dati e gli attivatori possono essere configurati in base ai valori delle variabili.
Ad esempio, se attivi un tag di remarketing
quando il valore di purchase_total
è superiore a 100 $o in base a
eventi specifici, come il clic su un pulsante, il livello dati può essere
configurato in modo da rendere i dati disponibili per i tag. L'oggetto del livello dati è strutturato come JSON. Ad esempio:
{
event: "checkout_button",
gtm: {
uniqueEventId: 2,
start: 1639524976560,
scrollThreshold: 90,
scrollUnits: "percent",
scrollDirection: "vertical",
triggers: "1_27"
},
value: "120"
}
I tag Google sono progettati per fare riferimento alle informazioni aggiunte al livello dati in modo organizzato e prevedibile, anziché analizzare le variabili, le informazioni sulle transazioni, le categorie di pagina e altri indicatori sparsi nella pagina. Un'implementazione del livello dati con variabili e valori associati consente di garantire che i dati pertinenti siano disponibili quando i tag ne hanno bisogno.
Installazione
Per le installazioni di pagine web di Tag Manager, devi creare un livello dati. Il codice evidenziato di seguito mostra dove viene stabilito il livello dati prima del caricamento di Tag Manager.
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Nelle implementazioni standard di gtag.js in cui il tag è stato copiato dall'interno del prodotto e aggiunto a una pagina web, viene fornito il codice per stabilire il livello dati. Nelle implementazioni personalizzate del tag Google, aggiungi il codice del livello dati all'inizio dello script, come mostrato nell'esempio evidenziato di seguito:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
Come vengono elaborate le informazioni del livello dati
Quando viene caricato un contenitore, Tag Manager inizia a elaborare tutti i messaggi push del livello dati in coda. Tag Manager elabora i messaggi in base all'ordine di ricezione: ogni messaggio viene elaborato uno alla volta, nell'ordine in cui è stato ricevuto. Se il messaggio è un evento, tutti i tag con condizioni di attivazione soddisfatte verranno attivati prima che Tag Manager passi al messaggio successivo.
Se viene effettuata una chiamata gtag()
o dataLayer.push()
mediante il codice di una pagina, in un modello personalizzato o in un tag HTML personalizzato, il messaggio associato viene messo in coda ed elaborato dopo che sono stati valutati tutti gli altri messaggi in attesa. Ciò significa che non è garantita la disponibilità di valori del livello dati aggiornati per l'evento successivo.
Per gestire questi casi, devi aggiungere il nome di un evento a un messaggio quando viene inviato al livello dati, poi ascoltare questo nome con un attivatore di evento personalizzato.
Utilizzare un livello dati con gestori eventi
L'oggetto dataLayer
utilizza un comando event
per avviare l'invio di eventi.
Il tag Google e Tag Manager utilizzano una variabile di livello dati speciale denominata event
, utilizzata dai listener di eventi JavaScript per attivare i tag quando un utente interagisce con gli elementi del sito web. Ad esempio, potresti voler attivare un tag di monitoraggio delle conversioni quando un utente fa clic su un pulsante di conferma dell'acquisto. Gli eventi possono essere invocati ogni volta che un utente interagisce con elementi del sito web, come link, pulsanti, scorrimenti e così via.
Questa funzionalità si ottiene chiamando dataLayer.push()
quando si verifica un evento. La sintassi per l'invio di un evento con dataLayer.push()
è la seguente:
dataLayer.push({'event': 'event_name'});
dove event_name
è una stringa che descrive l'evento, ad esempio 'login'
,
purchase
o search
.
Utilizza dataLayer.push()
per inviare dati sugli eventi quando si verifica un'azione da
misurare. Ad esempio, per inviare un evento quando un utente fa clic su un pulsante, modifica
l'handler onclick
del pulsante in modo che chiami dataLayer.push()
:
<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>
Puoi inviare dinamicamente le variabili del livello dati al livello dati per acquisire informazioni quali i valori inseriti o selezionati in un modulo, i metadati associati a un video riprodotto dal visitatore, il colore di un prodotto (ad es. un'auto) personalizzato dal visitatore, gli URL di destinazione dei link su cui è stato fatto clic e così via.
Come per gli eventi, questa funzionalità viene eseguita chiamando l'API push()
per aggiungere o sostituire le variabili del livello dati nel livello dati. La sintassi di base per impostare le variabili di livello dati dinamiche è la seguente:
dataLayer.push({'variable_name': 'variable_value'});
dove 'variable_name'
è una stringa che indica il nome della variabile di livello dati da impostare e 'variable_value'
è una stringa che indica il valore della variabile di livello dati da impostare o sostituire.
Ad esempio, per impostare una variabile di livello dati con una preferenza di colore quando un visitatore utilizza uno strumento di personalizzazione del prodotto, puoi trasferire la seguente variabile di livello dati dinamico:
dataLayer.push({'color': 'red'});
Un push, più variabili
Puoi eseguire il push di più variabili ed eventi contemporaneamente:
dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customize'
});
Mantenere le variabili del livello dati
Per mantenere le variabili di livello dati tra le pagine web, chiama dataLayer.push()
dopo
l'inizializzazione del livello dati a ogni caricamento della pagina e invia le variabili
al livello dati. Se vuoi che queste variabili del livello dati siano disponibili per Tag Manager al caricamento del contenitore, aggiungi una chiamata dataLayer.push()
sopra il codice del contenitore di Tag Manager, come mostrato di seguito.
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'Pageview',
'pagePath': 'https://www.googleanalytics.dev/pancakes',
'pageTitle': 'Pancake Event Signup',
'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Ogni variabile dichiarata all'interno dell'oggetto livello dati rimarrà invariata solo finché il visitatore rimane nella pagina corrente. Le variabili del livello dati pertinenti
tra le pagine (ad es. visitorType
) devono essere dichiarate nel livello dati su ogni
pagina del tuo sito web. Sebbene non sia necessario inserire lo stesso insieme di variabili nel livello dati su ogni pagina, devi utilizzare una convenzione di denominazione coerente. In altre parole, se imposti la categoria della pagina nella pagina di registrazione utilizzando una variabile chiamata pageCategory
, anche le pagine dei prodotti e di acquisto devono utilizzare la variabile pageCategory
.
Risoluzione dei problemi
Ecco alcuni suggerimenti per la risoluzione dei problemi relativi al livello dati:
Non sovrascrivere la variabile window.dataLayer
: se utilizzi direttamente il livello
dati (ad es. dataLayer = [{'item': 'value'}])
), verranno sovrascritti tutti i
valori esistenti in dataLayer
. Le installazioni di Tag Manager devono creare un'istanza del livello dati il più in alto possibile nel codice sorgente, sopra lo snippet contenitore, utilizzando window.dataLayer =
window.dataLayer || [];
. Dopo aver dichiarato dataLayer
, utilizza
dataLayer.push({'item': 'value'})
per aggiungere altri valori e, se questi
valori devono essere disponibili per Tag Manager al caricamento della pagina, anche la chiamata
dataLayer.push()
deve trovarsi sopra il codice del contenitore di Tag Manager.
Il nome dell'oggetto dataLayer
è sensibile alle maiuscole: se provi a inviare una variabile o un evento senza l'uso di maiuscole e minuscole corretto, l'operazione non funzionerà.
datalayer.push({'pageTitle': 'Home'}); // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'}); // Good (dataLayer in camel case)
dataLayer.push
deve essere chiamato con oggetti JavaScript validi. Tutti i nomi delle variabili del livello dati devono essere racchiusi tra virgolette.
dataLayer.push({new-variable: 'value'}); // Bad - no quote marks
dataLayer.push({'new-variable': 'value'}); // Good - proper quote marks
Mantieni i nomi delle variabili coerenti nelle varie pagine: se utilizzi nomi di variabili diversi per lo stesso concetto su pagine diverse, i tag non potranno attivarsi con coerenza in tutte le posizioni desiderate.
Scadente:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});
Buono:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});
Rinominare il livello dati
Il nome predefinito dell'oggetto del livello dati avviato dal tag Google o da Tag Manager è dataLayer
. Se preferisci utilizzare un nome diverso per il livello dati, puoi farlo modificando il valore del parametro del livello dati nello snippet del contenitore Tag Manager o del tag Google con il nome che preferisci.
gtag.js
Aggiungi un parametro di query denominato "l" all'URL per impostare il nome del nuovo livello dati, ad esempio l=myNewName
. Aggiorna tutte le istanze di dataLayer
nello snippet del tag Google al nuovo nome.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
Tag Manager
Sostituisci il valore del parametro del livello dati (evidenziato di seguito) nello snippet del contenitore con il nome che preferisci.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Una volta rinominati, tutti i riferimenti al livello dati (ad esempio quando dichiari il livello dati sopra lo snippet o quando invii eventi o variabili di livello dati dinamiche al livello dati con il comando .push()
) devono essere modificati per riflettere il nome del livello dati personalizzato:
<script>
myNewName = window.dataLayer || [];
myNewName.push({'variable_name': 'variable_value'});
</script>
Metodi del livello dati personalizzato
Se invii una funzione allo strato di dati, verrà richiamata con questo insieme in un modello di dati astratto. Questo modello di dati astratto può recuperare e impostare i valori in un insieme di valori chiave e fornisce anche un modo per reimpostare il livello dati.
imposta
La funzione set
sul modello di dati astratto consente di impostare i valori da recuperare
tramite GET.
window.dataLayer.push(function() {
this.set('time', new Date());
});
get
La funzione get
nel modello di dati astratti consente di recuperare i valori impostati.
window.dataLayer.push(function() {
const existingTime = this.get('time');
if (existingTime !== null) {
// Change behavior based on whether or not this value exists...
} else {
// ...
}
})
reimposta
La funzione reset
sul modello di dati astratto consente di reimpostare i dati nel
livello dati. Questa opzione è particolarmente utile per una pagina che rimarrà aperta e le dimensioni del livello di dati continuano a crescere nel tempo. Per reimpostare il livello dati, utilizza il
seguente codice:
window.dataLayer.push(function() {
this.reset();
})