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.

Importante: non utilizzare i tag HTML personalizzati per implementare il codice basato su gtag.js. Utilizza invece i modelli di tag nativi di Tag Manager per Google Ads, Analytics, e Floodlight.

Importante: non utilizzare i tag HTML personalizzati per configurare le impostazioni relative al consenso in Tag Manager. Dato che è necessario applicare le impostazioni relative al consenso prima che i tag pertinenti vengano attivati in un contenitore Tag Manager, devi applicare l'opzione Tag API Manager Consent per configurare il comportamento predefinito e di aggiornamento. Utilizzo del Tag Le API Manager Consent assicurano che gli aggiornamenti del consenso vengano elaborati prima di qualsiasi inserimento in coda elementi nel livello dati in modo che tutti i tag attivati dallo stesso evento abbiano lo stesso stato del consenso.

Punto chiave: puoi utilizzare Google Tag Assistant per esaminare lo stato dei tuoi dati. livello in qualsiasi momento di una catena di eventi.

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

Importante: se esegui il push di una variabile con lo stesso nome di una variabile esistente al livello dati, il valore esistente verrà sovrascritto il nuovo valore.

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.

gtag.js

Aggiungi all'URL un parametro di query denominato "l" per impostare il nuovo nome del livello dati. ad es. l=myNewName. Aggiorna tutte le istanze di dataLayer nel tag Google con il 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 parametro del livello dati (evidenziato di seguito) nel contenitore snippet con il nome di tua scelta.

Importante: non sostituire il valore del parametro non evidenziato.

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

Nota: è supportato un solo oggetto dataLayer per pagina.

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.

Importante: per utilizzare i metodi del livello dati personalizzati, devi usare .push per invia dati direttamente alla variabile dataLayer. Se usi gtag, la funzione verrà interpretata come un comando non valido e ignorata.

imposta

La funzione set sul modello di dati astratto ti consente di impostare i valori da recuperare tramite GET.

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

get

La funzione get sul modello di dati astratto ti consente di recuperare i valori che sono state impostate.

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 ti consente di reimpostare i dati in livello dati. Ciò è particolarmente utile con una pagina che rimarrà aperta e i dati delle dimensioni dei livelli continua a crescere nel tempo. Per reimpostare il livello dati, utilizza il metodo codice seguente:

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