Data Layer: wie Ihre Website Daten an Tags übergibt

Was ist ein Data Layer?

Laut Google dient der Data Layer dazu, Informationen an Tags weiterzugeben. Auf der Website ist er eine Liste mit dem Namen dataLayer. Die Website schreibt Daten hinein, der Tag Manager liest sie aus.

Das trennt die Website von der Messung. Ändert sich das Design, bleiben die Daten gleich. Ohne Data Layer müsste ein Tag solche Werte aus dem DOM holen, also aus dem Seitenaufbau. Dieser Weg versagt leichter, sobald sich eine Vorlage ändert.

Beispiel: dataLayer.push

Mit dataLayer.push fügen Sie neue Angaben hinzu. Dieses Beispiel meldet ein abgesendetes Formular:

dataLayer.push({
  'event': 'generate_lead',
  'form_name': 'kontakt'
});

Der Schlüssel event hat eine feste Bedeutung, denn auf ihn reagieren Trigger. generate_lead ist ein Ereignisname aus der Referenz von GA4. form_name ist ein frei gewählter Name.

Angaben, die schon beim Laden der Seite bereitstehen sollen, stehen im Quelltext über dem Snippet des Tag Managers:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'pageType': 'produktseite',
  'visitorType': 'kunde'
});
</script>

Die Zeile mit window.dataLayer legt die Liste an, falls sie noch nicht besteht, und überschreibt vorhandene Einträge nicht.

Beispiel: Kauf im Online-Shop

Für E-Commerce sieht Google ein festes Schema vor. Auf der Bestellbestätigung meldet dieses Beispiel einen Kauf von zwei Artikeln an GA4:

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'B-10042',
    value: 50.00,
    tax: 9.50,
    shipping: 4.90,
    currency: 'EUR',
    items: [{
      item_id: 'SKU-123',
      item_name: 'Beispielprodukt',
      price: 25.00,
      quantity: 2
    }]
  }
});

Die erste Zeile leert das vorherige E-Commerce-Objekt, damit keine alten Werte in das neue Ereignis geraten. Pflicht sind transaction_id und items. value braucht GA4 für Umsatzberichte, currency immer dann, wenn value gesetzt ist. value ist die Summe aus Preis mal Menge ohne Versand und Steuer, beide stehen in eigenen Feldern. Die Transaktions-ID verhindert doppelt gezählte Käufe.

Data Layer im Google Tag Manager

Der Tag Manager arbeitet in drei Schritten mit den Einträgen:

1. Trigger: Ein Trigger vom Typ „Benutzerdefiniertes Ereignis“ mit dem Namen generate_lead reagiert auf den Eintrag.
2. Variable: Eine Datenschichtvariable mit dem Namen form_name liest den Wert aus.
3. Tag: Ein Tag für GA4 oder für das Conversion-Tracking löst aus und sendet den Wert weiter.

Tag, Trigger und Variable erklärt der Artikel zum Google Tag Manager. Der Server-Container arbeitet anders. Er erhält Anfragen, aus denen Clients Ereignisdaten machen, und sieht die Liste im Browser selbst nicht. Werte aus dem Data Layer müssen Sie dafür im Web-Container als Parameter mitsenden.

Data Layer oder Werte aus der Seite auslesen?

Für Werte, auf denen Gebote oder Umsatzberichte beruhen, spricht vieles für den Data Layer.

Data-Layer-Konzept für die Entwicklung

Bevor jemand Code schreibt, legen Sie fest, welches Ereignis wann ausgelöst wird und welche Werte es enthält. Eine kleine Tabelle reicht aus:

Halten Sie Namen und Beispielwerte fest. Danach kann die Entwicklung jedes Ereignis gegen diese Tabelle prüfen. Nutzen Sie die empfohlenen GA4-Namen, wenn es für den Vorgang welche gibt.

Data Layer testen

1. Vorschau öffnen: Starten Sie die Vorschau des Tag Managers und lösen Sie den Vorgang aus, zum Beispiel einen Testkauf.
2. Einträge prüfen: Laut Google zeigt der Tag Assistant den Zustand des Data Layers zu jedem Zeitpunkt der Ereigniskette. Prüfen Sie Ereignisname, Schreibweise und Werte.
3. Browser-Konsole nutzen: Die Eingabe von dataLayer in den Entwicklerwerkzeugen listet alle Einträge der Seite auf.
4. Empfang prüfen: Kontrollieren Sie im Zieldienst, ob der Wert dort richtig ankommt, etwa in den Echtzeitberichten von GA4.

Regeln für einen funktionierenden Data Layer

• Schreibweise: dataLayer muss genau so geschrieben sein. datalayer funktioniert laut Google nicht.
• Nie überschreiben: Eine neue Zuweisung löscht laut Google vorhandene Einträge.

  // Löscht vorhandene Einträge. So nicht verwenden:
  window.dataLayer = [];
  
  // Richtig:
  window.dataLayer = window.dataLayer || [];

• Nur für die aktuelle Seite: Werte gelten laut Google, solange die Person auf der Seite bleibt. Was Sie auf mehreren Seiten brauchen, schreiben Sie auf jeder Seite neu hinein. In Single-Page-Anwendungen gibt es keinen neuen Seitenaufruf, daher bleiben alte Werte bestehen, bis Sie sie ersetzen.
• Anführungszeichen: Google empfiehlt, Variablennamen in Anführungszeichen zu setzen. Technisch nötig sind sie in JavaScript nur, wenn der Name Sonderzeichen wie einen Bindestrich enthält. 'event' und event ergeben denselben Eintrag, wie die Beispiele oben zeigen.
• Einheitliche Namen: Dieselbe Angabe heißt auf allen Seiten gleich. visitorType und visitor_type wären zwei verschiedene Variablen.
• Reihenfolge: Angaben für den Seitenaufruf stehen vor dem Snippet des Tag Managers.
• Sparsam mit Daten: Der Data Layer lässt sich im Browser auslesen. Schreiben Sie nur hinein, was die Messung braucht, und klären Sie personenbezogene Angaben vorab mit der für Datenschutz zuständigen Person.