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 Datenebene übergeben und Trigger basierend auf den Werten von Variablen eingerichtet werden.

Wenn Sie beispielsweise ein Remarketing-Tag auslösen möchten, wenn der Wert von purchase_total über 100 € liegt, 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 Datenebenenobjekt 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 Informationen verweisen, die der Datenschicht auf strukturierte und vorhersehbare Weise hinzugefügt werden, anstatt Variablen, Transaktionsinformationen, Seitenkategorien und andere Signale auf Ihrer Seite zu analysieren. Wenn Sie eine Datenschicht mit Variablen und den zugehörigen Werten implementieren, sind relevante Daten verfügbar, wenn sie für Ihre Tags benötigt werden.

Installation

Bei Tag Manager-Installationen auf Webseiten müssen Sie eine Datenschicht erstellen. Im hervorgehobenen Code unten 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 Standard-gtag.js-Implementierungen, bei denen das Tag aus dem Produkt kopiert und einer Webseite hinzugefügt wurde, wird der Code zum Erstellen der Datenebene bereitgestellt. Fügen Sie bei benutzerdefinierten Implementierungen des Google-Tags den Code der Datenschicht am Anfang des Scripts ein, wie im folgenden 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 in der Warteschlange befindlichen Datenschicht-Push-Nachrichten. In Tag Manager werden Nachrichten nach dem Prinzip „First In, First Out“ verarbeitet: Jede Nachricht wird einzeln und 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. Deshalb sind für das nächste Ereignis nicht immer aktualisierte Datenschichtwerte verfügbar. 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.

Wichtig :Verwenden Sie keine benutzerdefinierten HTML-Tags, um gtag.js-basierten Code bereitzustellen. Verwenden Sie stattdessen die nativen Tag-Vorlagen von Tag Manager für Google Ads, Analytics und Floodlight.

Wichtig :Verwenden Sie keine benutzerdefinierten HTML-Tags, um die Einwilligungseinstellungen in Tag Manager zu konfigurieren. Die Einwilligungseinstellungen müssen angewendet werden, bevor die relevanten Tags in einem Tag Manager-Container ausgelöst werden. Daher müssen auch die Tag Manager Consent APIs angewendet werden, um das Standard- und Aktualisierungsverhalten zu konfigurieren. Mit den Tag Manager Consent APIs werden Einwilligungsaktualisierungen vor allen Elementen in der Warteschleife der Datenschicht verarbeitet. So haben alle Tags, die durch dasselbe Ereignis ausgelöst werden, denselben Einwilligungsstatus.

Wichtig :Mit dem Google Tag Assistant können Sie den Status Ihrer Datenschicht jederzeit in einer Ereigniskette prüfen.

Datenschicht mit Ereignishandlern 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. So können Sie beispielsweise ein Conversion-Tracking-Tag auslösen, wenn ein Nutzer auf eine Schaltfläche für die Kaufbestätigung klickt. Ereignisse können aufgerufen werden, wenn ein Nutzer mit Websiteelementen wie Links, Schaltflächen oder dem Scrollen interagiert.

Diese Funktion wird durch Aufrufen von dataLayer.push() bei einem Ereignis erreicht. Die Syntax zum Senden eines Ereignisses mit dataLayer.push() lautet:

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 eintritt, 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 Datenebenenvariablen dynamisch in die Datenebene einspeisen, um Informationen wie in einem Formular eingegebene oder ausgewählte Werte, Metadaten zu einem Video, das der Besucher abspielt, die vom Besucher angepasste Farbe eines Produkts (z.B. eines Autos) oder die Ziel-URLs angeklickter Links zu erfassen.

Wie bei Ereignissen wird diese Funktion durch Aufrufen der push() API ausgeführt, um Variablen der Datenebene in der Datenebene hinzuzufügen oder zu ersetzen. Die grundlegende Syntax zum Festlegen von Variablen der dynamischen Datenebene lautet:

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

Dabei ist 'variable_name' ein String, der den Namen der zu setzenden Datenschichtvariablen angibt, und 'variable_value' ein String, der den Wert der zu setzenden oder zu ersetzenden Datenschichtvariablen angibt.

Beispiel: Wenn Sie eine Datenebenenvariable mit einer Farbvorliebe festlegen möchten, wenn ein Besucher ein Tool zur Produktanpassung verwendet, können Sie die folgende dynamische Datenebenenvariable senden:

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

Ein Push, mehrere Variablen

Sie können mehrere Variablen und Ereignisse gleichzeitig senden:

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

Wichtig :Wenn Sie eine Variable mit demselben Namen wie eine vorhandene Variable in die Datenebene einfügen, wird der vorhandene Wert durch den neuen Wert überschrieben.

Datenschichtvariablen beibehalten

Wenn Sie Datenschichtvariablen zwischen Webseiten beibehalten möchten, rufen Sie dataLayer.push() nach der Instanziierung der Datenschicht bei jedem Seitenaufbau auf und übergeben Sie die Variablen an die Datenschicht. Wenn diese Datenschichtvariablen für Tag Manager verfügbar sein sollen, wenn der Container geladen wird, fügen Sie wie unten gezeigt einen dataLayer.push()-Aufruf über dem Tag Manager-Container-Code ein.

<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 Datenebenenobjekt deklariert wird, bleibt nur so lange erhalten, wie sich der Besucher auf der aktuellen Seite befindet. Datenebenenvariablen, die für alle Seiten relevant sind (z.B. visitorType), müssen in der Datenebene auf jeder Seite Ihrer Website deklariert werden. Sie müssen nicht auf jeder Seite dieselben Variablen in die Datenschicht einfügen, sollten aber eine einheitliche Namenskonvention verwenden. Mit anderen Worten: 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

Hier sind einige Tipps zur Fehlerbehebung bei der Datenebene:

window.dataLayer-Variable nicht überschreiben:Wenn Sie die Datenebene direkt verwenden (z.B. dataLayer = [{'item': 'value'}])), werden alle vorhandenen Werte in dataLayer überschrieben. Bei Tag Manager-Installationen sollte die Datenschicht mithilfe von window.dataLayer = window.dataLayer || []; so weit oben wie möglich im Quellcode, also über dem Container-Snippet, instanziiert werden. Nachdem dataLayer deklariert wurde, können Sie mit dataLayer.push({'item': 'value'}) weitere Werte hinzufügen. Wenn diese Werte für Tag Manager beim Laden der Seite 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 pushen, funktioniert das 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 Datenebene 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

Verwenden Sie auf allen Seiten einheitliche Variablennamen:Wenn Sie auf verschiedenen Seiten unterschiedliche Variablennamen für dasselbe Konzept verwenden, können Ihre Tags nicht an allen gewünschten Stellen 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'});

Datenebene umbenennen

Der Standardname des Datenschichtobjekts, das vom Google-Tag oder Tag Manager ausgelöst wird, lautet dataLayer. Wenn Sie einen anderen Namen für die Datenschicht verwenden möchten, können Sie den Parameterwert der Datenschicht in Ihrem Google-Tag oder Tag Manager-Container-Snippet bearbeiten.

gtag.js

Fügen Sie der URL den Suchparameter „l“ hinzu, um den Namen der neuen Datenebene festzulegen, z.B. l=myNewName. Ersetzen Sie alle Instanzen von dataLayer im Google-Tag-Snippet durch 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 Parameterwert der Datenebene (unten hervorgehoben) in Ihrem Container-Snippet durch den gewünschten Namen.

Wichtig: Ersetzen Sie nicht den nicht hervorgehobenen Parameterwert.

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

Nachdem Sie die Datenschicht umbenannt haben, müssen alle Verweise darauf angepasst werden, z.B. wenn Sie die Datenschicht über dem Snippet deklarieren oder Ereignisse oder dynamische Datenschichtvariablen mit dem Befehl .push() in die Datenschicht einfügen:

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

Hinweis: Pro Seite wird nur ein dataLayer-Objekt unterstützt.

Methoden für benutzerdefinierte Datenebenen

Wenn Sie eine Funktion in die Datenebene einfügen, wird sie mit diesem Wert für ein abstraktes Datenmodell aufgerufen. Dieses abstrakte Datenmodell kann Werte in einem Schlüssel/Wert-Speicher abrufen und festlegen. Außerdem bietet es eine Möglichkeit, die Datenebene zurückzusetzen.

Wichtig :Wenn Sie benutzerdefinierte Methoden für die Datenschicht verwenden möchten, müssen Sie Daten mit .push direkt an die Variable dataLayer senden. Wenn Sie gtag verwenden, wird die Funktion als ungültiger Befehl interpretiert und ignoriert.

set

Mit der Funktion set im abstrakten 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 im abstrakten 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 im abstrakten Datenmodell können Sie die Daten in der Datenebene zurücksetzen. Das ist am besten geeignet, wenn eine Seite geöffnet bleibt und die Größe der Datenebene im Laufe der Zeit weiter zunimmt. Verwenden Sie den folgenden Code, um die Datenebene zurückzusetzen:

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