Die Datenschicht

Die Datenschicht ist ein Objekt, das von Google Tag Manager und gtag.js verwendet wird, um Informationen an Tags zu übergeben. Über die Datenschicht können Ereignisse oder Variablen übergeben werden. Trigger lassen sich anhand der Werte von Variablen einrichten.

Wenn Sie beispielsweise ein Remarketing-Tag auslösen, wenn der Wert von purchase_total über 100 $ liegt oder basierend auf bestimmten Ereignissen wie einem Klick auf eine Schaltfläche, 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 auf organisierte und vorhersehbare Weise der Datenschicht hinzugefügt werden. Anstatt Variablen, Transaktionsinformationen, Seitenkategorien und andere Signale zu analysieren, die auf Ihrer Seite verteilt sind. Eine Datenschichtimplementierung mit Variablen und den zugehörigen Werten trägt dazu bei, dass relevante Daten verfügbar sind, wenn Ihre Tags sie benötigen.

Installation

Für Tag Manager-Webseiteninstallationen müssen Sie eine Datenschicht erstellen. Das folgende Codebeispiel zeigt, 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 standardmäßigen gtag.js-Implementierungen, 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 Ihres Skripts ein, wie im folgenden Codebeispiel 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. Tag Manager verarbeitet Nachrichten nach dem First-In-First-Out-Prinzip: Jede Nachricht wird einzeln in der Reihenfolge ihres Eingangs verarbeitet. 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 gtag()- oder dataLayer.push()-Aufrufe durch Code auf der Seite, in einer benutzerdefinierten Vorlage oder in einem benutzerdefinierten HTML-Tag ausgeführt werden, 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.

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. 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. Verwenden Sie die Tag Manager Consent APIs, damit Einwilligungsaktualisierungen vor allen anderen Elementen der Datenschicht verarbeitet werden. So wird sichergestellt, dass alle Tags, die durch dasselbe Ereignis ausgelöst werden, denselben Einwilligungsstatus haben.

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

Datenschicht mit Ereignishandlern verwenden

Das Objekt dataLayer 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 Schaltfläche zur Kaufbestätigung klickt. Ereignisse können aufgerufen werden, wenn ein Nutzer mit Websiteelementen wie Links, Schaltflächen oder Scrollbereichen interagiert.

Diese Funktion wird durch den Aufruf von dataLayer.push() ausgelöst, 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'.

Verwenden Sie dataLayer.push(), um Ereignisdaten zu senden, wenn eine Aktion ausgeführt wird, die Sie analysieren 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 an die Datenschicht senden, um Informationen wie eingegebene oder ausgewählte Werte in einem Formular, Metadaten zu einem Video, das der Besucher abspielt, die Farbe eines Produkts (z. B. eines Autos), das vom Besucher angepasst wurde, die Ziel-URLs von angeklickten Links usw. zu erfassen.

Wie bei Ereignissen wird diese Funktion durch den Aufruf der push()-API erreicht, 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 Datenschicht variable angibt, und 'variable_value' ein String, der den Wert der festzulegenden oder zu ersetzenden Datenschichtvariable angibt.

Beispiel: Wenn Sie eine Datenschichtvariable mit einer Farbpräferenz festlegen möchten, wenn ein Besucher mit einem Produktanpassungstool interagiert, können Sie die folgende dynamische Datenschichtvariable 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 an die Datenschicht senden, 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 senden 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 einen dataLayer.push()-Aufruf über dem Container-Code von Tag Manager 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 Variable, die im Datenschichtobjekt deklariert wird, bleibt nur so lange bestehen, 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 beispielsweise 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 einige Tipps zur Fehlerbehebung bei Datenschichten:

Überschreiben Sie die Variable window.dataLayer nicht: Wenn Sie die Daten schicht 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 wie möglich im Quellcode instanziiert werden, über dem Container-Snippet, mit window.dataLayer = window.dataLayer || [];. Nachdem der 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 auch dieser dataLayer.push()-Aufruf über dem Container-Code von Tag Manager stehen.

Beim Namen des Objekts dataLayer wird zwischen Groß- und Kleinschreibung unterschieden: Wenn Sie eine Variable oder ein Ereignis mit der falschen Groß-/Kleinschreibung senden, funktioniert der Push 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 stehen.

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 auf verschiedenen Seiten unterschiedliche Variablennamen für dasselbe Konzept verwenden, können Ihre Tags nicht einheitlich 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. 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.

gtag.js

Fügen Sie der URL einen Suchparameter namens „l“ hinzu, um den neuen Namen der Datenschicht festzulegen, z. B. l=myNewName. Aktualisieren Sie alle Instanzen von dataLayer im Google-Tag-Snippet mit dem 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) 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 -->

Nach der Umbenennung müssen alle Verweise auf Ihre Datenschicht angepasst werden. Das gilt für die Deklaration der Datenschicht über dem Snippet und für das Senden von Ereignissen oder dynamischen Datenschichtvariablen an die Datenschicht mit dem Befehl .push():

<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 zu empfangen, in die Warteschlange zu stellen und zu verarbeiten, in der sie hinzugefügt werden. Die Container-Snippets verknüpfen ihre Listener und die Verarbeitungslogik speziell mit diesem einzelnen Array. Wenn Sie mehr als eine Datenschichtinstanz verwenden oder die Datenschicht falsch neu initialisieren (z. B. durch Überschreiben mit window.dataLayer = [], nachdem 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 von Google Tag Manager oder dem Google-Tag nicht aktiv überwacht wird, lösen Ihre Tags nicht aus.
• Inkonsistente Datenerhebung:Verschiedene Teile Ihrer Seite oder verschiedene Skripts senden möglicherweise Daten an separate, isolierte dataLayer-Arrays. So gelangen unvollständige oder falsche Informationen zu Ihren Analytics- und Marketing-Tags.
• Datenverlust:Informationen, die für das Tracking bestimmt sind, können verloren gehen, wenn sie an die falsche dataLayer-Instanz gesendet werden.
• Schwierigkeiten bei der Fehlerbehebung:Es ist schwierig, Tagging-Probleme zu diagnostizieren, da der Fluss der Tracking-Daten unvorhersehbar ist.

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

Benutzerdefinierte Datenschichtmethoden

Wenn Sie eine Funktion an die Datenschicht senden, wird sie mit this auf ein abstraktes Datenmodell festgelegt. 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 mit dataLayer Daten direkt an die Variable senden..push 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 mit „get“ abgerufen werden.

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 {
    // ...
  }
});

reset

Mit der Funktion reset im abstrakten Datenmodell können Sie die Daten in der Datenschicht zurücksetzen. Das ist besonders nützlich bei einer Seite, die geöffnet bleibt und deren Datenschicht im Laufe der Zeit immer größer wird. Verwenden Sie den folgenden Code, um die Datenschicht zurückzusetzen:

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