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. gli attivatori possono essere impostati in base ai valori delle variabili.

Ad esempio, se attivi un account di remarketing quando il valore di purchase_total è maggiore di 100 $o in base al tag eventi specifici, ad esempio quando un pulsante viene selezionato, il livello dati può essere configurato per rendere i dati disponibili per i tag. L'oggetto livello dati strutturati 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 studiati per fare riferimento alle informazioni aggiunte al in modo organizzato e prevedibile, anziché mediante l'analisi variabili, informazioni sulle transazioni, categorie di pagine e altri indicatori sparsi in tutta la pagina. Un'implementazione del livello dati completata con variabili e per garantire che i dati pertinenti siano disponibili quando ne servono i tag.

Installazione

Per le installazioni di pagine web di Tag Manager, devi creare un livello dati. La il codice evidenziato di seguito mostra dove viene stabilito il livello dati prima del tag Gestore caricato.

<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 dal prodotto e aggiunto a una pagina web, il codice per stabilire il livello dati è fornito. 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 contenitore viene caricato, Tag Manager inizia a elaborare tutti i dati in coda di messaggi push a livello. Tag Manager elabora i messaggi in base all'ordine di ricezione base: 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 si attiverà prima che Tag Manager passi al messaggio successivo.

Se una chiamata gtag() o dataLayer.push() viene effettuata tramite il codice in una pagina, in un o in un tag HTML personalizzato, il messaggio associato viene messo in coda elaborati dopo la valutazione di tutti gli altri messaggi in attesa. Ciò significa che qualsiasi 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 così com'è. automaticamente al livello dati e poi ascoltare il nome dell'evento con una Trigger di evento.

Utilizzare un livello dati con gestori di 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 utilizzato dai listener di eventi JavaScript per attivare i tag quando un utente interagisce con gli elementi del sito web. Ad esempio, potresti voler attivare una conversione tag di monitoraggio quando un utente fa clic su un pulsante di conferma di un acquisto. Gli eventi possono essere viene chiamato ogni volta che un utente interagisce con elementi del sito web come link, pulsanti, scorrimenti ecc.

Questa funzionalità si ottiene chiamando dataLayer.push() quando un evento . La sintassi per inviare 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 per 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 come i valori inseriti o selezionati in un modulo, metadati associati con un video in riproduzione da parte del visitatore, il colore di un prodotto (ad es. un'auto) personalizzati dal visitatore, gli URL di destinazione dei link su cui è stato fatto clic e così via.

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

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

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

Ad esempio, per impostare una variabile di livello dati con una preferenza di colore quando un visitatore interagisce con uno strumento di personalizzazione del prodotto, potresti inserire le seguenti variabile di livello dati:

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'
});

Mantieni variabili del livello dati

Per rendere persistenti le variabili del livello dati tra le pagine web, richiama dataLayer.push() successivamente viene creata un'istanza del livello dati a ogni caricamento pagina ed eseguire il push delle variabili al livello dati. Se vuoi che queste variabili del livello dati siano disponibili per Tag Quando il container viene caricato, aggiungi una chiamata dataLayer.push() al di sopra di 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 viene mantenuta solo finché il visitatore rimane nella pagina corrente. Variabili del livello dati pertinenti tra pagine (ad es. visitorType) devono essere dichiarate nel livello dati di ogni pagina del tuo sito web. Sebbene non sia necessario inserire lo stesso insieme di variabili il livello dati su ogni pagina, devi utilizzare una convenzione di denominazione coerente. Nella In altre parole: se imposti la categoria di pagina nella pagina di registrazione utilizzando una variabile denominato pageCategory, le pagine relative ai prodotti e agli acquisti devono utilizzare il pageCategory.

Risoluzione dei problemi

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

Non sovrascrivere la variabile window.dataLayer: quando utilizzi i dati direttamente (ad es. dataLayer = [{'item': 'value'}]), sovrascriverà qualsiasi valori esistenti in dataLayer. Le installazioni di Tag Manager devono creare un'istanza il livello dati più in alto possibile nel codice sorgente, sopra il container utilizzando window.dataLayer = window.dataLayer || [];. Dopo aver dichiarato dataLayer, utilizza dataLayer.push({'item': 'value'}) per aggiungere altri valori e, se tali valori devono essere disponibili per Tag Manager al caricamento della pagina, La chiamata dataLayer.push() deve essere posizionata sopra il codice del contenitore di Tag Manager come beh.

Il nome dell'oggetto dataLayer è sensibile alle maiuscole: se provi a eseguire il push di una variabile o un evento senza le maiuscole corrette, la spinta 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 livelli dati i nomi delle variabili 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 in tutte le pagine: se utilizzi variabili diverse. lo stesso concetto su pagine diverse, i tag non saranno in grado si attivino sempre in tutte le località 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 livello dati avviato dal tag Google oppure Tag Manager è dataLayer. Se preferisci utilizzare un nome diverso per il tuo livello dati, puoi farlo modificando il valore parametro del livello dati nel tuo Tag Google o 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 rinominati, tutti i riferimenti al livello dati (ad esempio durante la dichiarazione dei dati livello sopra lo snippet o quando vengono trasferiti eventi o variabili di livello dati dinamiche al livello dati con il comando .push()) devono essere regolati in modo da riflettere nome livello dati personalizzato:

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

Metodi del livello dati personalizzati

Se esegui il push di una funzione al livello dati, questa verrà richiamata con questo set su un un modello di dati astratto. Questo modello di dati astratto può ottenere e impostare valori su una chiave di archiviazione dei valori, oltre a fornire 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();
})