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 und Trigger 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 bestimmte Ereignisse (z.B. ein Klick auf eine Schaltfläche) beruhen, können Sie die Datenschicht so konfigurieren, 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 leicht auf Informationen verweisen können, die auf organisierte und vorhersehbare Weise der Datenschicht hinzugefügt werden, anstatt Variablen, Transaktionsinformationen, Seitenkategorien und andere Signale auf der Seite zu parsen. Mit einer Datenschichtimplementierung, die Variablen und damit verknüpfte Werte enthält, sind relevante Daten verfügbar, wenn Ihre Tags sie benötigen.

Installation

Damit Sie die Tag Manager-Webseite installieren können, müssen Sie eine Datenschicht erstellen. Anhand des hervorgehobenen Codes 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 -->

In gtag.js-Standardimplementierungen, bei denen das Tag aus dem Produkt kopiert und einer Webseite hinzugefügt wird, wird der Code zum Erstellen der Datenschicht bereitgestellt. Bei benutzerdefinierten Implementierungen des Google-Tags müssen Sie den Datenschichtcode wie im hervorgehobenen Beispiel am Anfang des Skripts einfügen:

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

Sobald ein Container geladen wird, beginnt Tag Manager damit, alle Push-Nachrichten auf Datenschicht zu verarbeiten, die sich in der Warteschlange befinden. In Tag Manager werden Nachrichten nacheinander verarbeitet, und zwar in der Reihenfolge ihres Eingangs. Bei einem Ereignis werden alle Tags mit erfüllten Triggerbedingungen ausgelöst, bevor in Tag Manager die nächste Meldung angezeigt wird.

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 und verarbeitet, nachdem alle anderen ausstehenden Nachrichten ausgewertet wurden. Das bedeutet, dass aktualisierte Datenschichtwerte nicht immer für das nächste Ereignis verfügbar sind. In solchen Fällen sollten Sie einer Nachricht einen Ereignisnamen hinzufügen, wenn sie an die Datenschicht gesendet wird, und dann mit einem Trigger für benutzerdefinierte Ereignisse auf diesen Ereignisnamen warten.

Wichtig :Verwenden Sie keine benutzerdefinierten HTML-Tags, um gtag.js-basierten Code zu implementieren. Verwenden Sie stattdessen die integrierten 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. Da die Einwilligungseinstellungen angewendet werden müssen, bevor die relevanten Tags in einem Tag Manager-Container ausgelöst werden, müssen Sie die Tag Manager Consent APIs anwenden, um das Standard- und Aktualisierungsverhalten zu konfigurieren. Wenn Sie die Tag Manager Consent APIs verwenden, werden Einwilligungsaktualisierungen vor Elementen in der Warteschlange in der Datenschicht verarbeitet, damit alle durch dasselbe Ereignis ausgelösten Tags denselben Einwilligungsstatus sehen.

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

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 können beispielsweise ein Conversion-Tracking-Tag auslösen, wenn ein Nutzer auf eine Kaufbestätigungsschaltfläche klickt. Ereignisse können immer dann aufgerufen werden, wenn ein Nutzer mit Websiteelementen wie Links, Schaltflächen oder Scrollvorgängen interagiert.

Dazu wird dataLayer.push() aufgerufen, wenn ein Ereignis eintritt. 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() werden Ereignisdaten gesendet, wenn eine Aktion auftritt, die Sie erfassen möchten. Wenn beispielsweise ein Ereignis gesendet werden soll, 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. eines Autos), die vom Besucher angepasst wird, die Ziel-URLs von angeklickten Links usw.

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

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.

Wenn Sie beispielsweise eine Datenschichtvariable mit einer Farbeinstellung 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 senden:

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

Wichtig :Wenn Sie eine Variable mit demselben Namen wie eine vorhandene Variable an die Datenschicht übergeben, wird der vorhandene Wert durch den neuen Wert überschrieben.

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 für Tag Manager beim Laden des Containers verfügbar sein sollen, fügen Sie wie unten gezeigt den Aufruf dataLayer.push() über dem Tag Manager-Containercode 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 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 in der Datenschicht auf jeder Seite Ihrer Website 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 gesagt: Wenn Sie die Seitenkategorie auf der Anmeldeseite mithilfe 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 Datenschichten:

Die Variable window.dataLayer 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, fügen Sie mit dataLayer.push({'item': 'value'}) zusätzliche Werte hinzu. 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 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 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 allen Seiten einheitlich halten:Wenn Sie verschiedene Variablennamen für dasselbe Konzept auf verschiedenen Seiten verwenden, können Ihre Tags nicht konsistent 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'});

Datenschicht umbenennen

Der Standardname des Datenschichtobjekts, das vom Google-Tag oder Tag Manager initiiert wird, ist dataLayer. Sie können einen anderen Namen für die Datenschicht verwenden, indem Sie den Wert des Datenschichtparameters im Google-Tag oder im Tag Manager-Container-Snippet durch einen beliebigen Namen ersetzen.

gtag.js

Fügen Sie der URL den Suchparameter „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) im Container-Snippet durch einen Namen Ihrer Wahl.

Wichtig :Ersetzen Sie den nicht hervorgehobenen Parameterwert nicht.

<!-- 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 dem Umbenennen müssen alle Verweise auf die Datenschicht (z.B. beim Deklarieren der Datenschicht über dem Snippet oder beim Übertragen von Ereignissen oder dynamischen Datenschichtvariablen an die Datenschicht mit dem Befehl .push()) an den benutzerdefinierten Namen der Datenschicht angepasst werden:

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

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

Benutzerdefinierte Datenschichtmethoden

Wenn Sie eine Funktion per Push an die Datenschicht übertragen, wird sie mit diesem Set in einem abstrakten Datenmodell aufgerufen. Mit diesem abstrakten Datenmodell können Werte aus einem Schlüssel/Wert-Speicher abgerufen und dort festgelegt werden. Außerdem bietet es eine Möglichkeit, die Datenschicht zurückzusetzen.

Wichtig :Wenn Sie benutzerdefinierte Datenschichtmethoden verwenden möchten, müssen Sie .push verwenden, um Daten direkt an die Variable dataLayer zu senden. Wenn Sie gtag verwenden, wird die Funktion als ungültiger Befehl interpretiert und ignoriert.

festgelegt

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 offen bleibt und die Datenebene mit der Zeit größer wird. Verwenden Sie den folgenden Code, um die Datenschicht zurückzusetzen:

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