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 weitergegeben und Trigger können auf Basis der Variablenwerte eingerichtet werden.

Wenn Sie z. B. ein Remarketing-Tag auslösen, wenn der Wert von purchase_total größer als 100 $ist, oder auf der Grundlage bestimmter Ereignisse, z. B. wenn eine Schaltfläche angeklickt wird, kann die Datenschicht so konfiguriert werden, dass Ihre 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 dienen dazu, leicht auf Informationen zu verweisen, die der Datenschicht auf organisierte und vorhersehbare Weise hinzugefügt werden, statt Variablen, Transaktionsinformationen, Seitenkategorien und andere Signale zu parsen, die auf Ihrer Seite verteilt sind. Wenn Sie eine Datenschicht mit Variablen und zugehörigen Werten implementieren, sind die relevanten Daten zum richtigen Zeitpunkt verfügbar.

Installation

Für die Installation von Tag Manager-Webseiten müssen Sie eine Datenschicht erstellen. Der hervorgehobene Code unten zeigt, wo die Datenschicht eingerichtet ist, 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 Standard-gtag.js-Implementierungen, bei denen das Tag aus dem Produkt kopiert und einer Webseite hinzugefügt wurde, wird der Code zum Einrichten der Datenschicht angegeben. Fügen Sie den Code der Datenschicht am Anfang des Skripts in benutzerdefinierte Implementierungen des Google-Tags 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 Datenschicht-Push-Nachrichten in der Warteschlange. Tag Manager verarbeitet Nachrichten nach dem First-In-First-Out-Prinzip: Jede Nachricht wird in der Reihenfolge verarbeitet, in der sie eingegangen sind. Handelt es sich bei der Nachricht um ein Ereignis, werden alle Tags mit ausgelösten Triggerbedingungen ausgelöst, bevor Tag Manager zur nächsten Nachricht übergeht.

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. Das bedeutet, dass aktualisierte Datenschichtwerte nicht immer für das nächste Ereignis verfügbar sind. Für diese Fälle sollten Sie einer Nachricht einen Ereignisnamen hinzufügen, wenn sie an die Datenschicht gesendet wird, und diesen Ereignisnamen dann mit einem Trigger für benutzerdefinierte Ereignisse überwachen.

Wichtig: Verwenden Sie die benutzerdefinierten HTML-Tags nicht, um gtag.js-basierten Code bereitzustellen. 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 entsprechenden 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 allen in der Warteschlange enthaltenen Elementen in der Datenschicht verarbeitet, sodass alle Tags, die vom selben Ereignis ausgelöst werden, denselben Einwilligungsstatus sehen.

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

Datenschicht mit Ereignis-Handlern verwenden

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

Das Google-Tag und Tag Manager verwenden die spezielle Datenschichtvariable 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 Schaltfläche zum Bestätigen des Kaufs klickt. Ereignisse können immer dann aufgerufen werden, wenn ein Nutzer mit Websiteelementen wie Links, Schaltflächen oder Scrolls interagiert.

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

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 stattfindet, 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 senden, um Informationen wie in einem Formular eingegebene oder ausgewählte Werte zu erfassen, Metadaten, die mit einem vom Nutzer wiedergegebenen Video verknüpft sind, die Farbe eines Produkts (z.B. ein Auto), das vom Besucher angepasst wurde, die Ziel-URLs von angeklickten Links usw.

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

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

Dabei ist 'variable_name' ein String, der den Namen der festzulegenden Datenschichtvariablen angibt, und 'variable_value' ist ein String, der den Wert der Datenschichtvariablen festlegt oder ersetzt.

Wenn Sie beispielsweise eine Datenschichtvariable mit einer Farbpräferenz festlegen möchten, wenn ein Besucher mit einem Tool zur Produktanpassung interagiert, können Sie folgende dynamische Datenschichtvariable senden:

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

Eine Übertragung, 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 Datenschicht übertragen, 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 Sie möchten, dass diese Datenschichtvariablen für Tag Manager verfügbar sind, wenn der Container geladen wird, fügen Sie einen dataLayer.push()-Aufruf über dem Tag Manager-Containercode 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 im Datenschichtobjekt deklarierte Variable bleibt nur so lange bestehen, wie der Besucher auf der aktuellen Seite bleibt. Datenschichtvariablen, die auf mehreren Seiten relevant sind (z.B. visitorType), müssen in der Datenschicht auf jeder Seite Ihrer Website deklariert werden. Sie müssen zwar nicht für jede Seite denselben Variablensatz 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, sollten Ihre Produkt- und Kaufseiten ebenfalls die Variable pageCategory verwenden.

Fehlerbehebung

Hier einige Tipps zur Fehlerbehebung bei der Datenschicht:

Die Variable window.dataLayer nicht überschreiben: Wenn Sie die Datenschicht direkt verwenden (z.B. dataLayer = [{'item': 'value'}])), werden alle vorhandenen Werte in der dataLayer überschrieben. Bei Tag Manager-Installationen sollte die Datenschicht so weit oben im Quellcode wie möglich über dem Container-Snippet oder einem Optimize-Snippet zum Ausblenden von Seiten mithilfe von window.dataLayer = window.dataLayer || []; instanziiert werden. Nachdem dataLayer deklariert wurde, kannst du mit dataLayer.push({'item': 'value'}) zusätzliche Werte hinzufügen. Falls diese Werte für Tag Manager beim Laden der Seite verfügbar sein müssen, muss sich der dataLayer.push()-Aufruf außerdem über dem Tag Manager-Containercode befinden.

Beim Objektnamen dataLayer wird zwischen Groß- und Kleinschreibung unterschieden: Wenn Sie versuchen, eine Variable oder ein Ereignis ohne korrekte Groß-/Kleinschreibung zu übertragen, funktioniert der Push-Vorgang 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. Die Namen aller 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 auf verschiedenen Seiten unterschiedliche Variablennamen für dasselbe Konzept verwenden, können Ihre Tags nicht an allen gewünschten Standorten einheitlich 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. Wenn Sie einen anderen Namen für die Datenschicht verwenden möchten, können Sie den Parameterwert der Datenschicht in Ihrem Google-Tag oder Container-Snippet von Tag Manager mit dem Namen Ihrer Wahl bearbeiten.

gtag.js

Fügen Sie der URL einen Abfrageparameter namens „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 Parameterwert der Datenschicht (unten hervorgehoben) im Container-Snippet durch den 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 der Umbenennung müssen alle Verweise auf die Datenschicht (d.h. beim Deklarieren der Datenschicht oberhalb des Snippets oder das Übertragen von Ereignissen oder dynamischen Datenschichtvariablen mit dem Befehl .push()) an den Namen der benutzerdefinierten 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 in die Datenschicht übertragen, wird sie mit diesem Set auf ein abstraktes Datenmodell aufgerufen. Dieses abstrakte Datenmodell kann Werte in einem Schlüssel/Wert-Speicher abrufen und festlegen und bietet die Möglichkeit, die Datenschicht 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 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 Werte abrufen, die festgelegt wurden.

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 des abstrakten Datenmodells können Sie die Daten in der Datenschicht zurücksetzen. Dies ist insbesondere bei einer Seite hilfreich, die geöffnet bleibt und die Größe der Datenschicht im Laufe der Zeit zunimmt. Verwenden Sie den folgenden Code, um die Datenschicht zurückzusetzen:

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