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 basierend auf den Werten 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 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 Informationen verweisen, die der Datenebene auf organisierte und vorhersehbare Weise hinzugefügt werden, anstatt Variablen, Transaktionsinformationen, Seitenkategorien und andere Signale zu parsen, die auf Ihrer Seite verteilt sind. Eine Datenschichtimplementierung mit Variablen und zugehörigen Werten sorgt dafür, dass relevante Daten verfügbar sind, wenn sie für Ihre Tags benötigt werden.

Installation

Für Tag Manager-Installationen auf Webseiten müssen Sie eine Datenschicht erstellen. Im folgenden Codebeispiel 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 Standardimplementierungen von gtag.js, bei denen das Tag aus dem Produkt kopiert und einer Webseite hinzugefügt wurde, wird der Code zum Einrichten der Datenschicht bereitgestellt. Fügen Sie bei benutzerdefinierten Implementierungen des Google-Tags den Datenschichtcode am Anfang des Scripts ein, wie im folgenden Codebeispiel gezeigt:

<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

Hinweis: Die Container-ID in der Quell-URL des Snippets (z. B. GTM- im Vergleich zu G- oder AW-) bestimmt die Berechtigungen und Funktionen für die Scriptausführung. Weitere Informationen finden Sie unter Containertypen und ID-Präfixe.

So werden Informationen in Datenschichten verarbeitet

Wenn ein Container geladen wird, beginnt Tag Manager mit der Verarbeitung aller in der Warteschlange befindlichen Push-Nachrichten der Datenschicht. Tag Manager verarbeitet Nachrichten nach dem FIFO-Prinzip (First In, First Out): Jede Nachricht wird einzeln in der Reihenfolge verarbeitet, in der sie empfangen wurde. Wenn die Nachricht ein Ereignis ist, werden alle Tags mit erfüllten Triggerbedingungen ausgelöst, bevor Tag Manager mit der nächsten Nachricht 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. Das bedeutet, dass aktualisierte Datenschichtwerte nicht garantiert für das nächste Ereignis verfügbar sind. In diesen Fällen sollten Sie einer Nachricht einen Ereignisnamen hinzufügen, wenn sie an die Datenschicht übertragen 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 bereitzustellen. Nutzen Sie stattdessen die nativen Tag-Vorlagen von Tag Manager für Google Ads, Analytics und Floodlight.

Wichtig: Verwenden Sie keine benutzerdefinierten HTML-Tags, um Einwilligungseinstellungen in Tag Manager zu konfigurieren. Da Einwilligungseinstellungen angewendet werden müssen, bevor die entsprechenden Tags in einem Tag Manager-Container ausgelöst werden, müssen Sie die APIs für den Einwilligungsmodus von Tag Manager verwenden, um das Standard- und Aktualisierungsverhalten zu konfigurieren. Verwenden Sie die APIs für den Einwilligungsmodus von Tag Manager, damit Updates von Einwilligungen vor allen anderen Elementen der Datenschicht verarbeitet werden, die sich in der Warteschleife befinden. So gilt für alle Tags, die durch dasselbe Ereignis ausgelöst werden, derselbe Einwilligungsstatus.

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

Datenebene mit Event-Handlern verwenden

Das Objekt dataLayer verwendet den Befehl event, 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 Schaltfläche zur Kaufbestätigung klickt. Ereignisse können immer dann aufgerufen werden, wenn ein Nutzer mit Websiteelementen wie Links, Schaltflächen, Scrollen usw. interagiert.

Diese Funktion wird durch den Aufruf von dataLayer.push() erreicht, wenn ein Ereignis auftritt. 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 auftritt, die Sie messen möchten. Wenn Sie beispielsweise ein Ereignis senden möchten, wenn ein Nutzer auf einen Button klickt, ändern Sie den onclick-Handler des Buttons so, dass dataLayer.push() aufgerufen wird:

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

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

Wie bei Ereignissen wird diese Funktion durch Aufrufen der push() API erreicht, um Datenebenenvariablen in der Datenebene hinzuzufügen oder zu ersetzen. Die grundlegende Syntax zum Festlegen dynamischer Datenschichtvariablen 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 festzulegenden oder zu ersetzenden Datenschichtvariablen angibt.

Wenn Sie beispielsweise eine Datenschichtvariable mit einer Farbpräferenz festlegen möchten, wenn ein Besucher ein Tool zur Produktanpassung verwendet, können Sie die folgende dynamische Datenschichtvariable per Push ü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'
});

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 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-Containercode ein, wie im folgenden Beispiel 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 erhalten, wie der Besucher auf der aktuellen Seite bleibt. Datenschichtvariablen, die für mehrere Seiten 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 also die Seitenkategorie auf der Registrierungsseite mit einer Variablen namens pageCategory festlegen, sollten Sie die Variable pageCategory auch auf Ihren Produkt- und Kaufseiten verwenden.

Fehlerbehebung

Hier sind einige Tipps zur Fehlerbehebung bei der Datenschicht:

Überschreiben Sie die Variable window.dataLayer nicht: 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 im Quellcode wie möglich, also über dem Container-Snippet, mit window.dataLayer = window.dataLayer || []; instanziiert werden. Nachdem die dataLayer deklariert wurde, können Sie mit dataLayer.push({'item': 'value'}) zusätzliche Werte hinzufügen. Wenn diese Werte beim Seitenaufbau für Tag Manager verfügbar sein müssen, muss sich der dataLayer.push()-Aufruf ebenfalls über dem Tag Manager-Containercode befinden.

Beim Objektnamen dataLayer 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 Variablennamen der Datenschicht sollten 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 vorgesehenen Stellen 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'});

Datenebene 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 im Google-Tag oder im Tag Manager-Container-Snippet mit dem gewünschten Namen bearbeiten.

Tag Manager

Ersetzen Sie den Parameterwert der Datenschicht (unten hervorgehoben) in Ihrem Container-Snippet durch einen Namen Ihrer Wahl.

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

gtag.js

Fügen Sie der URL einen Suchparameter 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 -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());
</script>

Nach der Umbenennung müssen alle Verweise auf die Datenschicht (z.B. beim Deklarieren der Datenschicht über dem Snippet oder beim Übertragen von Ereignissen oder dynamischen Datenschichtvariablen mit dem Befehl .push() in die Datenschicht) an den benutzerdefinierten Namen der Datenschicht angepasst werden:

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

Wichtig: Nur eine Datenschicht pro Seite verwenden

Pro Seite wird nur ein dataLayer-Objekt unterstützt. Google Tag Manager und gtag.js verwenden ein einzelnes, globales JavaScript-Array namens window.dataLayer, um alle Ereignisse und Variablen in der Reihenfolge, in der sie hinzugefügt werden, zu empfangen, in die Warteschlange zu stellen und zu verarbeiten. Die Container-Snippets hängen ihre Listener und Verarbeitungslogik speziell an dieses einzelne Array an. Wenn Sie versuchen, mehr als eine Datenebeneninstanz zu verwenden, oder die Datenebene falsch neu initialisieren (z. B. durch Überschreiben mit window.dataLayer = [], nachdem der GTM geladen wurde), kann dies zu erheblichen Problemen führen:

• Tags werden möglicherweise nicht ausgelöst: Ereignisse und Variablen, die an eine Instanz von dataLayer gesendet werden, die nicht aktiv von Google Tag Manager oder dem Google-Tag überwacht wird, lösen Ihre Tags nicht aus.
• Inkonsistente Datenerhebung: Verschiedene Teile Ihrer Seite oder verschiedene Scripts können Daten an separate, isolierte dataLayer-Arrays senden. Das kann dazu führen, dass unvollständige oder falsche Informationen an Ihre Analyse- und Marketing-Tags gesendet werden.
• Datenverlust: Informationen, die für das Tracking vorgesehen sind, können verloren gehen, wenn sie an die falsche dataLayer-Instanz gesendet werden.
• Herausforderungen beim Debugging: Tagging-Probleme sind schwer zu diagnostizieren, da der Fluss der Tracking-Daten unvorhersehbar ist.

Best Practice: Instanziieren Sie die Datenschicht immer einmal pro Seite mit window.dataLayer = window.dataLayer || [];, normalerweise weit oben im <head>-Element der Seite vor dem GTM- oder gtag.js-Snippet. Verwenden Sie immer dataLayer.push(), um nachfolgende Ereignisse oder Variablen hinzuzufügen. Überschreiben Sie die Variable window.dataLayer niemals und weisen Sie sie nicht neu zu.

Benutzerdefinierte Datenebenenmethoden

Wenn Sie eine Funktion an die Datenschicht übertragen, wird sie mit this auf ein abstraktes Datenmodell gesetzt 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.

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 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 Datenschicht zurücksetzen. Das ist besonders nützlich bei Seiten, die geöffnet bleiben und bei denen 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();
});