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 lassen sich auf Grundlage der Werte von Variablen einrichten.

Wenn Sie beispielsweise ein Remarketing-Tag auslösen, wenn der Wert von purchase_total größer als 100 € ist, oder basierend auf bestimmten Ereignissen, z.B. wenn auf eine Schaltfläche geklickt wird, kann Ihre Datenschicht so konfiguriert werden, dass diese Daten für Ihre Tags verfügbar sind. Das Datenschichtobjekt ist als JSON 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 auf organisierte und vorhersehbare Weise auf Informationen verweisen, die der Datenschicht hinzugefügt werden. Sie analysieren nicht Variablen, Transaktionsinformationen, Seitenkategorien und andere Signale, die auf Ihrer Seite verteilt sind. Wenn Sie eine Datenschicht mit Variablen und den dazugehörigen Werten implementieren, sind die relevanten Daten verfügbar, wenn Ihre Tags sie benötigen.

Installation

Bei Tag Manager-Installationen auf Webseiten müssen Sie eine Datenschicht erstellen. Im unten hervorgehobenen Code sehen Sie, 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 -->

Bei Standardimplementierungen von gtag.js, bei denen das Tag aus dem Produkt kopiert und auf einer Webseite eingefügt wurde, ist der Code zum Einrichten der Datenschicht enthalten. Fügen Sie bei benutzerdefinierten Implementierungen des Google-Tags den Datenschichtcode am Anfang des Skripts ein, wie im unten hervorgehobenen 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 Datenschicht-Push-Nachrichten in der Warteschlange. Nachrichten werden in Tag Manager nach dem FIFO-Prinzip (First In, First Out) verarbeitet: Jede Nachricht wird einzeln in der Reihenfolge verarbeitet, in der sie empfangen wurde. Wenn es sich bei der Nachricht um ein Ereignis handelt, werden alle Tags ausgelöst, die die Triggerbedingungen erfüllen. Dann ist die nächste Nachricht an der Reihe.

Wenn ein gtag()- oder dataLayer.push()-Aufruf durch Code auf einer Seite, in einer benutzerdefinierten Vorlage oder in einem benutzerdefinierten HTML-Tag ausgeführt wird, wird die zugehörige Nachricht in die Warteschlange gestellt. Nachdem alle anderen ausstehenden Nachrichten ausgewertet wurden, wird sie dann verarbeitet. Das bedeutet, dass aktualisierte Datenschichtwerte für das nächste Ereignis nicht garantiert verfügbar sind. Um diese Fälle zu verarbeiten, sollten Sie einer Nachricht einen Ereignisnamen hinzufügen, wenn diese an die Datenschicht gesendet wird. Mit einem Trigger für benutzerdefinierte Ereignisse ist dann die Überwachung dieses Ereignisnamens möglich.

Datenschicht mit Event-Handlern verwenden

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

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

Diese Funktion wird durch den Aufruf von dataLayer.push() bei einem Ereignis erreicht. 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.

Mit dataLayer.push() können Sie Ereignisdaten senden, wenn eine Aktion erfolgt, die Sie erfassen 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, um dataLayer.push() aufzurufen:

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

Sie können Datenschichtvariablen dynamisch in die Datenschicht einfügen, um Informationen wie in einem Formular eingegebene oder ausgewählte Werte, Metadaten zu einem Video, das der Besucher abspielt, die Farbe eines Produkts (z. B. eines Autos), das der Besucher angepasst hat, die Ziel-URLs von angeklickten Links usw. zu erfassen.

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

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 festzulegenden oder zu ersetzenden Datenschichtvariablen angibt.

Beispiel: Wenn Sie eine Datenschichtvariable mit einer Farbauswahl festlegen möchten, wenn ein Besucher ein Tool zur Produktanpassung verwendet, 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, und übertragen Sie die Variablen in die Datenschicht. Wenn diese Datenschichtvariablen in Tag Manager verfügbar sein sollen, wenn der Container geladen wird, fügen Sie einen dataLayer.push()-Aufruf über dem Tag Manager-Container-Code ein, wie unten gezeigt.

<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 Variable, die im Data Layer-Objekt deklariert wird, ist nur so lange verfügbar, 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 nicht auf jeder Seite dieselben Variablen in die Datenschicht einfügen, sollten aber eine einheitliche Namenskonvention verwenden. Wenn Sie die Seitenkategorie auf der Anmeldeseite mit einer Variablen namens pageCategory festlegen, sollte auf Ihren Produkt- und Kaufseiten ebenfalls die Variable pageCategory verwendet werden.

Fehlerbehebung

Hier einige Tipps zur Fehlerbehebung bei der Datenschicht:

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

Beim Objektnamen dataLayer wird die Groß- und Kleinschreibung berücksichtigt:Wenn Sie versuchen, eine Variable oder ein Ereignis ohne die richtige Groß- und Kleinschreibung zu übertragen, funktioniert die Übertragung 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 Variablennamen der Datenschicht 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 allen Seiten einheitlich verwenden:Wenn Sie für dasselbe Konzept auf verschiedenen Seiten unterschiedliche Variablennamen verwenden, können Ihre Tags nicht an allen gewünschten Stellen konsistent ausgelöst werden.

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 vom Google-Tag oder Tag Manager initiiert wird, lautet dataLayer. Wenn Sie einen anderen Namen für Ihre Datenschicht verwenden möchten, können Sie den Wert des Datenschichtparameters in Ihrem Google-Tag oder Tag Manager-Container-Snippet mit dem gewünschten Namen bearbeiten.

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

Nach der Umbenennung müssen alle Verweise auf die Datenschicht angepasst werden, z. B. wenn Sie die Datenschicht über dem Snippet deklarieren oder Ereignisse oder dynamische Datenschichtvariablen mit dem Befehl .push() in die Datenschicht übertragen.

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

Benutzerdefinierte Methoden für die Datenebene

Wenn Sie eine Funktion in die Datenschicht übertragen, wird sie mit dieser Einstellung auf ein abstraktes Datenmodell aufgerufen. Mit diesem abstrakten Datenmodell können Werte in einem Schlüssel/Wert-Speicher abgerufen und festgelegt werden. Außerdem bietet es eine Möglichkeit, die Datenschicht zurückzusetzen.

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