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 ü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 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 Datenschicht 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, die mit Variablen und zugehörigen Werten gefüllt ist, 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. 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 -->

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 hinzu, 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 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 zur nächsten Nachricht übergeht.

Wenn ein gtag()- oder dataLayer.push()-Aufruf über 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 in die Datenschicht übertragen wird, und dann mit einem benutzerdefinierten Ereignistrigger auf diesen Ereignisnamen warten.

Datenschicht mit Event-Handlern 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, Scrollen usw. 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 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, um dataLayer.push() aufzurufen:

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

Sie können Datenschichtvariablen dynamisch in die Datenschicht übertragen, um Informationen wie in einem Formular eingegebene oder ausgewählte Werte, Metadaten zu einem Video, das der Besucher abspielt, die Farbe eines Produkts (z. B. eines Autos), das vom Besucher angepasst wurde, die Ziel-URLs angeklickter 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 ü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'
});

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 verfügbar sein sollen, wenn der Container geladen wird, fügen Sie einen dataLayer.push()-Aufruf über dem Container-Code von Tag Manager hinzu, 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 erhalten, 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. Anders ausgedrückt: Wenn Sie 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 Seitenaufbau 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 übertragen, 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 für dasselbe Konzept auf verschiedenen Seiten unterschiedliche Variablennamen verwenden, können Ihre Tags nicht einheitlich an allen gewünschten Stellen ausgelöst werden.

Falsch :

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

Richtig :

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

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

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

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

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

Benutzerdefinierte Datenschichtmethoden

Wenn Sie eine Funktion in die Datenschicht übertragen, wird sie mit this auf ein abstraktes Datenmodell festgelegt. Mit diesem abstrakten Datenmodell können Werte in einem Key-Value-Speicher abgerufen und festgelegt werden. Außerdem bietet es eine Möglichkeit, die Datenschicht zurückzusetzen.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
});

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