Die Datenschicht

Die Datenschicht ist ein Objekt, das von Google Tag Manager und gtag.js verwendet wird, um Informationen an Tags zu übergeben. Ereignisse oder Variablen können über die Datenschicht übergeben werden und Trigger können anhand der Werte von Variablen eingerichtet werden.

Wenn Sie beispielsweise ein Remarketing-Tag auslösen, wenn der Wert von purchase_total größer als 100 $ist, oder basierend auf den bestimmten Ereignissen, z.B. dem Klicken auf eine Schaltfläche, kann die Datenschicht so konfiguriert werden, dass diese Daten für Ihre Tags verfügbar sind. Das Datenschichtobjekt ist im JSON-Format strukturiert. Beispiel:

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

Google-Tags sind so konzipiert, dass sie ganz einfach auf Informationen verweisen, die der Datenschicht strukturiert und vorhersehbar hinzugefügt werden. Variablen, Transaktionsinformationen, Seitenkategorien und andere Signale, die auf der Seite verteilt sind, werden nicht geparst. Wenn Sie eine Datenschicht mit Variablen und zugehörigen Werten implementieren, können Sie dafür sorgen, dass relevante Daten verfügbar sind, wenn Ihre Tags sie benötigen.

Installation

Für Tag Manager-Installationen auf Webseiten müssen Sie eine Datenschicht erstellen. Der hervorgehobene Code unten zeigt, wo die Datenschicht eingerichtet wird, bevor Tag Manager geladen wird.

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

In standardmäßigen gtag.js-Implementierungen, bei denen das Tag aus dem Produkt kopiert und einer Webseite hinzugefügt wurde, wird der Code zum Erstellen der Datenschicht bereitgestellt. Fügen Sie bei benutzerdefinierten Implementierungen des Google-Tags den Datenschichtcode am Anfang des Skripts ein, wie im folgenden Beispiel gezeigt:

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

So werden Informationen in Datenschichten verarbeitet

Wenn ein Container geladen wird, beginnt Tag Manager mit der Verarbeitung aller Push-Nachrichten auf Datenebene in der Warteschlange. In Tag Manager werden Nachrichten in der Reihenfolge ihres Eingangs verarbeitet. Das heißt, jede Nachricht wird einzeln in der Reihenfolge verarbeitet, in der sie empfangen wurde. Handelt es sich bei der Nachricht um ein Ereignis, werden alle Tags mit erfüllten Triggerbedingungen ausgelöst, bevor Tag Manager mit der nächsten Meldung fortfährt.

Wenn ein gtag()- oder dataLayer.push()-Aufruf durch Code auf einer Seite, in einer benutzerdefinierten Vorlage oder in einem benutzerdefinierten HTML-Tag erfolgt, wird die zugehörige Nachricht in die Warteschlange gestellt und verarbeitet, nachdem alle anderen ausstehenden Nachrichten ausgewertet wurden. Daher ist nicht garantiert, dass aktualisierte Datenschichtwerte für das nächste Ereignis verfügbar sind. Aus diesem Grund sollten Sie einer Nachricht einen Ereignisnamen hinzufügen, sobald sie an die Datenschicht gesendet wird, und diesen Ereignisnamen dann mit einem Trigger für benutzerdefinierte Ereignisse überwachen.

Datenschicht mit Event-Handlern verwenden

Das Objekt dataLayer verwendet einen event-Befehl, um das Senden von Ereignissen zu initiieren.

Das Google-Tag und Tag Manager verwenden eine spezielle Datenschichtvariable namens event. Diese wird von JavaScript-Ereignis-Listenern verwendet, um Tags auszulösen, wenn ein Nutzer mit Websiteelementen interagiert. Sie können beispielsweise ein Conversion-Tracking-Tag auslösen, wenn ein Nutzer auf eine Schaltfläche zur Kaufbestätigung klickt. Ereignisse können immer dann aufgerufen werden, wenn ein Nutzer mit Websiteelementen wie Links, Schaltflächen, Scrolls usw. interagiert.

Dazu wird dataLayer.push() aufgerufen, wenn ein Ereignis auftritt. Die Syntax zum Senden eines Ereignisses mit dataLayer.push() lautet so:

dataLayer.push({'event': 'event_name'});

Dabei ist event_name ein String, der das Ereignis beschreibt, z. B. 'login', purchase oder search.

Verwenden Sie dataLayer.push(), um Ereignisdaten zu senden, wenn eine Aktion erfolgt, die Sie messen möchten. Wenn Sie beispielsweise ein Ereignis senden möchten, wenn ein Nutzer auf eine Schaltfläche klickt, ändern Sie den onclick-Handler der Schaltfläche so, dass dataLayer.push() aufgerufen wird:

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

Sie können Datenschichtvariablen dynamisch an die Datenschicht übergeben, um Informationen wie Werte zu erfassen, die in einem Formular eingegeben oder ausgewählt wurden, Metadaten zu einem Video, das sich der Besucher ansieht, die Farbe eines Produkts (z.B. ein Auto), die vom Besucher angepasst wurde, oder die Ziel-URLs von angeklickten Links.

Wie bei Ereignissen wird für diese Funktion die push() API aufgerufen, um Datenschichtvariablen in der Datenschicht hinzuzufügen oder zu ersetzen. Die grundlegende Syntax zum Festlegen dynamischer Datenschichtenvariablen lautet:

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

Dabei ist 'variable_name' ein String, der den Namen der festzulegenden Datenschichtvariablen angibt, und 'variable_value' ein String, der den Wert der Datenschichtvariablen angibt, die festgelegt oder ersetzt werden soll.

Wenn Sie beispielsweise eine Datenschichtvariable mit einer Farbeinstellung festlegen möchten, wenn ein Besucher mit einem Tool zur Produktanpassung interagiert, können Sie die folgende dynamische Datenschichtvariable übertragen:

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

Ein Push, mehrere Variablen

Sie können mehrere Variablen und Ereignisse gleichzeitig übertragen:

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

Datenschichtvariablen beibehalten

Wenn Sie Datenschichtvariablen zwischen Webseiten beibehalten möchten, rufen Sie dataLayer.push() auf, nachdem die Datenschicht bei jedem Seitenaufbau instanziiert wurde. Übertragen Sie die Variablen dann per Push in die Datenschicht. Wenn diese Datenschichtvariablen beim Laden des Containers für Tag Manager verfügbar sein sollen, fügen Sie über dem Tag Manager-Containercode einen dataLayer.push()-Aufruf hinzu (siehe unten).

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

Jede im Datenschichtobjekt deklarierte Variable bleibt nur so lange bestehen, wie der Besucher auf der aktuellen Seite bleibt. Datenschichtvariablen, die seitenübergreifend relevant sind (z.B. visitorType), müssen auf jeder Seite Ihrer Website in der Datenschicht deklariert werden. Sie müssen zwar nicht auf jeder Seite den gleichen Satz von Variablen in die Datenschicht einfügen, sollten aber eine einheitliche Namenskonvention verwenden. Anders ausgedrückt: Wenn Sie die Seitenkategorie auf der Anmeldeseite mit einer Variablen namens pageCategory festlegen, sollte auch auf Ihren Produkt- und Kaufseiten die Variable pageCategory verwendet werden.

Fehlerbehebung

Im Folgenden finden Sie einige Tipps zur Fehlerbehebung bei Datenschicht:

Überschreiben Sie die Variable window.dataLayer nicht:Wenn Sie die Datenebene direkt verwenden (z.B. mit dataLayer = [{'item': 'value'}])), werden alle vorhandenen Werte in der Datei dataLayer überschrieben. Bei Tag Manager-Installationen sollte die Datenschicht mit window.dataLayer = window.dataLayer || []; so weit oben wie möglich im Quellcode über dem Container-Snippet instanziiert werden. Nachdem die dataLayer deklariert wurden, können Sie mit dataLayer.push({'item': 'value'}) weitere Werte hinzufügen. Wenn diese Werte beim Laden der Seite für Tag Manager verfügbar sein müssen, muss sich auch der dataLayer.push()-Aufruf über dem Tag Manager-Containercode befinden.

Beim dataLayer-Objektnamen wird zwischen Groß- und Kleinschreibung unterschieden: Wenn Sie versuchen, eine Variable oder ein Ereignis ohne korrekte Groß- und Kleinschreibung zu übertragen, funktioniert die Push-Funktion nicht.

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

dataLayer.push muss mit gültigen JavaScript-Objekten aufgerufen werden. Alle Namen von Datenschichtvariablen müssen in Anführungszeichen gesetzt werden.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

Variablennamen auf mehreren Seiten einheitlich halten:Wenn Sie unterschiedliche Variablennamen für dasselbe Konzept auf verschiedenen Seiten verwenden, werden Ihre Tags nicht einheitlich an allen gewünschten Stellen ausgelöst.

Schlecht:

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

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

Gut:

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

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

Datenschicht umbenennen

Der Standardname des Datenschichtobjekts, das durch das Google-Tag oder Tag Manager initiiert wird, lautet dataLayer. Wenn Sie einen anderen Namen für die Datenschicht verwenden möchten, können Sie den Wert des Datenschichtparameters in Ihrem Google-Tag oder Tag Manager-Container-Snippet so bearbeiten, dass ein Name Ihrer Wahl verwendet wird.

gtag.js

Fügen Sie der URL einen Abfrageparameter mit dem Namen „l“ hinzu, um den neuen Namen der Datenschicht festzulegen, z.B. l=myNewName. Aktualisieren Sie alle Instanzen von dataLayer im Google-Tag-Snippet auf den neuen Namen.

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

Ersetzen Sie den Wert des Datenschichtparameters (unten hervorgehoben) in Ihrem Container-Snippet durch einen Namen Ihrer Wahl.

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

Nach der Umbenennung müssen alle Verweise auf die Datenschicht so angepasst werden, dass sie den Namen Ihrer benutzerdefinierten Datenschicht widerspiegeln. Das ist z. B. beim Deklarieren der Datenschicht über dem Snippet oder beim Übertragen von Ereignissen oder dynamischen Datenschichtenvariablen an die Datenschicht mit dem Befehl .push() der Fall:

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

Benutzerdefinierte Datenschichtmethoden

Wenn Sie eine Funktion an die Datenschicht übergeben, wird sie mit diesem Satz als abstraktes Datenmodell aufgerufen. Dieses abstrakte Datenmodell kann Werte in einem Schlüssel/Wert-Speicher abrufen und festlegen und auch die Datenschicht zurücksetzen.

set

Mit der Funktion set für das abstrakte Datenmodell können Sie Werte festlegen, die über „get“ abgerufen werden sollen.

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

get

Mit der Funktion get für das abstrakte Datenmodell können Sie festgelegte Werte abrufen.

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

Zurücksetzen

Mit der Funktion reset für das abstrakte Datenmodell können Sie die Daten in der Datenschicht zurücksetzen. Dies ist am nützlichsten bei einer Seite, die geöffnet bleibt und die Größe der Datenebene im Laufe der Zeit weiter wächst. Verwenden Sie den folgenden Code, um die Datenschicht zurückzusetzen:

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