Livello dati

Il livello dati è un oggetto utilizzato da Google Tag Manager e gtag.js per trasmettere 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 quando si fa clic su un pulsante, il livello dati può essere configurato per 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 facilmente alle informazioni aggiunte al livello dati in modo organizzato e prevedibile, anziché analizzare variabili, informazioni sulle transazioni, categorie di pagine e altri indicatori sparsi in tutta la pagina. Un'implementazione del livello dati completata con variabili e valori associati contribuirà a 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 un container viene caricato, Tag Manager inizia a elaborare tutti i messaggi push a 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 che sono state soddisfatte vengono attivati prima che Tag Manager passi al messaggio successivo.

Se una chiamata gtag() o dataLayer.push() viene effettuata tramite codice su una pagina, in un modello personalizzato o in un tag HTML personalizzato, il messaggio associato viene inserito in coda ed elaborato dopo che tutti gli altri messaggi in attesa sono stati valutati. Ciò significa che non è garantito che i valori del livello dati aggiornati siano disponibili per il prossimo evento. Per gestire questi casi, devi aggiungere il nome di un evento a un messaggio quando viene inviato al livello dati, quindi rimanere in ascolto del nome dell'evento con un attivatore Evento personalizzato.

Utilizzare un livello dati con gestori di eventi

L'oggetto dataLayer utilizza un comando event per avviare l'invio degli eventi.

Il tag Google e Tag Manager utilizzano una variabile speciale del livello dati denominata event che viene usata dai listener di eventi JavaScript per attivare i tag quando un utente interagisce con gli elementi del sito web. Ad esempio, potresti attivare un tag di monitoraggio delle conversioni quando un utente fa clic su un pulsante di conferma dell'acquisto. Gli eventi possono essere richiamati 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 che vuoi misurare. Ad esempio, per inviare un evento quando un utente fa clic su un pulsante, modifica il gestore onclick del pulsante in modo da chiamare 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 valori inseriti o selezionati in un modulo, metadati associati a un video che il visitatore sta riproducendo, il colore di un prodotto (ad es. un'auto) personalizzato dal visitatore, gli URL di destinazione dei link selezionati e così via.

Come per gli eventi, questa funzionalità si ottiene chiamando l'API push() per aggiungere o sostituire variabili di livello dati nel livello dati. La sintassi di base per impostare le variabili di livello dati dinamici è la seguente:

dataLayer.push({'variable_name': 'variable_value'});

Dove 'variable_name' è una stringa che indica il nome della variabile del livello dati da impostare e 'variable_value' è una stringa che indica il valore della variabile del livello dati da impostare o sostituire.

Ad esempio, per impostare una variabile del livello dati con una preferenza di colore quando un visitatore utilizza uno strumento di personalizzazione del prodotto, puoi inviare la seguente variabile del livello dati dinamica:

dataLayer.push({'color': 'red'});

Una spinta, più variabili

Puoi inviare più variabili ed eventi contemporaneamente:

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

Mantieni variabili livello dati

Per rendere persistenti le variabili del livello dati tra le pagine web, chiama dataLayer.push() dopo aver creato un'istanza del livello dati a ogni caricamento pagina ed esegui il push delle variabili al livello dati. Se vuoi che queste variabili del livello dati siano disponibili per Tag Manager quando il contenitore viene caricato, 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à attiva solo finché il visitatore rimane sulla pagina corrente. Le variabili del livello dati pertinenti in tutte 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 di ogni pagina, devi utilizzare una convenzione di denominazione coerente. In altre parole: se imposti la categoria di pagina nella pagina di registrazione utilizzando una variabile chiamata pageCategory, anche le pagine di prodotto e acquisto dovrebbero utilizzare la variabile pageCategory.

Risolvere i problemi

Di seguito sono riportati alcuni suggerimenti per la risoluzione dei problemi relativi al livello dati:

Non sovrascrivere la variabile window.dataLayer: quando utilizzi direttamente il livello dati (ad es. dataLayer = [{'item': 'value'}]), sovrascriverà tutti i valori esistenti in dataLayer. Le installazioni di Tag Manager dovrebbero creare un'istanza del livello dati il più in alto possibile nel codice sorgente, sopra lo snippet container, utilizzando window.dataLayer = window.dataLayer || [];. Dopo aver dichiarato dataLayer, utilizza dataLayer.push({'item': 'value'}) per aggiungerne altri valori. Se questi valori devono essere disponibili per Tag Manager al caricamento della pagina, anche la chiamata dataLayer.push() deve essere superiore al codice del contenitore di Tag Manager.

Il nome dell'oggetto dataLayer è sensibile alle maiuscole: se provi a eseguire il push di una variabile o di un evento senza utilizzare correttamente le maiuscole e le minuscole, il push 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 tra le pagine: se utilizzi nomi di variabili diversi per lo stesso concetto in pagine diverse, i tag non potranno attivarsi in modo coerente in tutte le posizioni desiderate.

Scadente:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

Buona:

// 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, modifica il valore del parametro del livello dati nel tag Google o nello snippet contenitore di Tag Manager con il nome che preferisci.

<!-- 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>

<!-- 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 rinominato, tutti i riferimenti al livello dati (ovvero quando dichiari il livello dati sopra lo snippet o quando invii eventi o variabili di livello dati dinamici al livello dati con il comando .push()) devono essere regolati in modo da riflettere il nome del livello dati personalizzato:

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Metodi per i livelli dati personalizzati

Se esegui il push di una funzione al livello dati, questa viene richiamata con questo impostato su un modello dati astratto. Questo modello di dati astratto può recuperare e impostare valori in un archivio chiave-valore e fornisce anche un modo per reimpostare il livello dati.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

window.dataLayer.push(function() {
  this.reset();
})