Wie ein Data Layer Ihre Analytics-Tags mit Events versorgt

Was ist ein Data Layer?

In der Web-Analyse ist ein Data Layer ein JavaScript-Objekt auf der Seite, in das Ihre Website Events und deren Werte schreibt, damit Analytics- und Marketing-Tags saubere, benannte Daten lesen, statt sie aus dem HTML zu kratzen. Die Tag-Manager-Dokumentation von Google fasst es kurz: "The data layer is an object used by Google Tag Manager and gtag.js to pass information to tags."

Der Sinn der Schicht ist Trennung. Ihr Anwendungscode weiß, dass gerade ein Checkout abgeschlossen wurde und was er wert war. Ihre Tags wissen, wohin diese Information gehen soll. Der Data Layer sitzt dazwischen, und Google nennt das Designziel direkt: Tags "are designed to reference information that is added to the data layer in an organized and predictable way, rather than by parsing variables, transaction information, page categories, and other signals scattered throughout your page." Verschiebt ein Redesign den Preis in ein anderes <div>, arbeiten Tags, die den Data Layer lesen, weiter, und Tags, die die Seite auslesen, brechen.

Welche zwei Arten von Data Layer gibt es?

Data Layer gibt es in zwei Formen: als Zustandsobjekt, das die Seite beschreibt, und als Event-Warteschlange, die in Reihenfolge festhält, was passiert ist. Die Form entscheidet, wie ein Tag ihn liest.

Das Modell mit Zustandsobjekt ist das ältere. Der Customer Experience Digital Data Layer 1.0, ein Community Group Final Report vom 10. Dezember 2013, legt fest, dass das Wurzelobjekt "MUST be digitalData, and all data properties within this specification MUST fall within the hierarchy of the digitalData object." Der Statusabschnitt ergänzt: "It is not a W3C Standard nor is it on the W3C Standards Track." Events liegen in einem Array innerhalb des Objekts, digitalData.event[n], das die Spezifikation als "List of events that were measured" definiert.

Das Warteschlangen-Modell hat sich in der Praxis wegen der Ladereihenfolge durchgesetzt. Adobes Dokumentation erklärt den Vorteil: Seiten und Skripte "can start to register data, to trigger events, and to register callbacks by adding them to the array, even before the data layer script itself has been loaded." Ein einfaches Array nimmt Pushes an, bevor irgendein Anbietercode auf der Seite existiert.

Wie wird aus einem dataLayer.push ein Analytics-Event?

Aus einem dataLayer.push() wird ein Analytics-Event, wenn Tag Manager die Nachricht verarbeitet, ihren Schlüssel event einem Trigger zuordnet und ein Tag auslöst, das die gepushten Werte liest. Der Ablauf hat fünf Schritte:

1. Deklarieren Sie das Array einmal, oberhalb des Container-Snippets. Googles Installationscode lautet window.dataLayer = window.dataLayer || []; und steht vor dem Laden von Tag Manager.
2. Pushen Sie eine Nachricht mit Event-Namen. Googles Syntax ist dataLayer.push({'event': 'event_name'}), und ein Push kann neben dem Event auch Werte tragen, etwa dataLayer.push({'color': 'red', 'conversionValue': 50, 'event': 'customize'}).
3. Tag Manager reiht die Nachricht ein und verarbeitet sie. Google hält fest: "Tag Manager processes messages on a first-in, first-out basis: Each message is processed one at a time, in the order it was received."
4. Ein Trigger vom Typ Custom Event passt auf den Event-Namen. "If the message is an event, any tags with trigger conditions that have been met will fire before Tag Manager moves on to the next message."
5. Eine Data-Layer-Variable übergibt den Wert an das Tag, und das Tag sendet ihn weiter, zum Beispiel als GA4-Event-Parameter.

Schritt 4 erklärt eine Regel, über die viele stolpern. Ein Push ohne Schlüssel event aktualisiert Werte, löst aber nichts aus. Google warnt, dass Pushes aus dem Seitencode "are not guaranteed to be available for the next event", und die Lösung lautet: "add an event name to a message as it is pushed to the data layer, and then listen for that event name with a Custom Event trigger."

Das gtag.js-Snippet nutzt dieselbe Warteschlange. Googles eigenes Snippet definiert die Funktion gtag als einzeiligen Wrapper:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');

Auf einer Website, die gtag.js und Tag Manager gleichzeitig nutzt, empfängt also ein einziges Array Nachrichten von beiden. Google sagt ausdrücklich: "Only one dataLayer object is supported per page."

Warum bleiben Werte im Data Layer von einem Push zum nächsten erhalten?

Werte im Data Layer bleiben erhalten, weil jeder Push in ein laufendes "abstract data model" eingemischt wird, statt es zu ersetzen. Googles Open-Source-Bibliothek data-layer-helper, die dieses Modell dokumentiert, sagt, es "holds the most recent value for all keys that have been set by a data layer message." Skalare Werte werden überschrieben. Einfache Objekte und Arrays verschmelzen rekursiv: Die Schlüssel eines neuen Objekts werden auf das alte Objekt kopiert, und die Indizes eines neuen Arrays überschreiben die Indizes des alten, wobei jeder Index, den das neue Array nicht setzt, stehen bleibt.

Für einen String pageType ist diese Regel harmlos, für E-Commerce gefährlich. Pushen Sie eine Warenkorbansicht mit zwei Artikeln und danach einen Kauf mit einem Artikel, kann das Modell noch den zweiten Artikel aus dem früheren Push enthalten. Googles GA4-E-Commerce-Leitfaden für Tag Manager verhindert das, indem er in allen 14 Event-Beispielen zuerst leert. Das Kauf-Beispiel, gekürzt:

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "purchase",
  ecommerce: { transaction_id: "T_12345", value: 72.05, currency: "USD", items: [ ... ] }
});

Das null funktioniert, weil null in der Merge-Tabelle unter "everything else" fällt und das alte Objekt deshalb komplett überschreibt. Der nächste Push verschmilzt dann mit nichts. Zeigen Ihre Umsatzberichte Artikel, die niemand gekauft hat, suchen Sie zuerst nach einem fehlenden Leeren, bevor Sie irgendetwas anderes prüfen. Die GA4-Seite dieses Setups behandelt E-Commerce-Tracking-Tools ohne Übertracking auswählen.

Was bringt einen Data Layer zum Scheitern?

Sechs Fehler erklären die meisten Data Layer, die korrekt aussehen und trotzdem Events verlieren. Jeder stammt aus Googles eigener Fehlerbehebungsliste oder folgt aus den obigen Merge-Regeln.

In der Zeile zur Benennung trifft der Data Layer auf den Rest Ihrer Instrumentierung. Ein Data Layer ist nur so konsistent wie die Spezifikation dahinter, und das ist die Aufgabe eines Tracking-Plans. Die Namen selbst folgen den Regeln aus wie eine Event-Namenskonvention ihre erste Umbenennung übersteht.

Was sollte ein Push in den Data Layer enthalten?

Ein Push in den Data Layer sollte den Event-Namen und die Werte enthalten, die ein Bericht braucht, und nichts, was eine Person identifiziert. Alles Gepushte kann jedes Tag im Container lesen, auch Tags, die später jemand anderes hinzufügt. Inhalte von Formularfeldern, E-Mail-Adressen und Namen gehören nicht in die Warteschlange; pushen Sie stattdessen eine Formular-ID und ein Ergebnis, wie es der Praxisleitfaden zum Tracking ohne Cookies für Formulare beschreibt.

Ein nützlicher Test ist derselbe, den Sie auf jedes Event anwenden: Jeder Wert im Push sollte eine Frage beantworten, die ein Bericht stellt. Kann niemand den Bericht benennen, streichen Sie den Schlüssel. Die zugrunde liegende Praxis, Aktionen als benannte Events mit Eigenschaften festzuhalten, erklärt wie Event-Tracking festhält, was Nutzer tatsächlich getan haben.

Braucht jedes Analytics-Tool einen Data Layer?

Kein Analytics-Tool braucht zwingend einen Data Layer; die Schicht gibt es, damit ein Tag Manager einen Satz Werte an viele Anbieter verteilen kann. Ein Tool, das Events über einen direkten Funktionsaufruf annimmt, überspringt die Warteschlange und die Merge-Regeln. Flowsery arbeitet so: Das Goal-Tracking erfasst Events über einen einzigen Aufruf wie window.flowsery("signup"), mit "No complex setup or tag managers needed." Events erscheinen in einem Echtzeit-Feed, damit Sie "Debug and validate your tracking instantly" können, Events lassen sich mit Umsatzwerten verknüpfen, um die Wirkung jeder Aktion zu messen, und das Tracking läuft ohne Cookies oder personenbezogene Daten. Die Funktion Goal- und Event-Tracking zeigt die Einrichtung. Websites, die bereits einen Data Layer für andere Anbieter betreiben, können ihn behalten und window.flowsery() aus demselben Code aufrufen, der das Event pusht.

Häufig gestellte Fragen

Ist der Data Layer dasselbe wie Google Tag Manager?

Nein. Der Data Layer ist das Array auf Ihrer Seite, und Tag Manager ist ein Verbraucher, der es liest. Googles Snippet für gtag.js nutzt dasselbe Array dataLayer ohne Tag Manager, und Adobes Client Data Layer verwendet ein eigenes Array namens adobeDataLayer.

Wo gehört der Code für den Data Layer auf der Seite hin?

Deklarieren Sie ihn so weit oben auf der Seite wie möglich, oberhalb des Snippets von Tag Manager oder gtag.js. Google sagt, dass alle Werte, die "need to be available to Tag Manager when the page loads", ebenfalls oberhalb des Container-Codes gepusht werden müssen. Weiter unten platzierte Pushes erreichen die Warteschlange trotzdem, kommen aber nach den ersten Events des Containers an.

Kann ich die Variable dataLayer umbenennen?

Ja. Tag Manager übernimmt den Namen als Parameter im Container-Snippet, und gtag.js nimmt einen Query-Parameter l an, etwa l=myNewName. Jede Deklaration und jeder Push muss dann den neuen Namen verwenden, denn Pushes an den alten Namen erreichen nichts.

Warum enthält mein GA4-Kauf-Event Artikel aus einem früheren Event?

Der frühere Push ist in das Datenmodell eingeflossen, und Ihr Kauf-Push hat es nicht geleert. Arrays und einfache Objekte verschmelzen rekursiv, also überleben übrig gebliebene Artikel. Pushen Sie { ecommerce: null } unmittelbar vor jedem E-Commerce-Event, so wie es Googles Beispiele tun.

Bleiben Werte im Data Layer über Seitenaufrufe hinweg erhalten?

Nein. Google hält fest, dass jede Data-Layer-Variable "only as long as the visitor remains on the current page" erhalten bleibt. Werte, die auf jeder Seite wichtig sind, etwa ein Besuchertyp oder eine Seitenkategorie, müssen bei jedem Seitenaufruf neu gepusht werden.

Was ist der Unterschied zwischen dataLayer.push und gtag?

gtag() ist ein Wrapper, der dataLayer.push(arguments) aufruft, beide schreiben also in dieselbe Warteschlange. Der Unterschied liegt im Nachrichtenformat und in eigenen Methoden: Google sagt, dass Funktionen, die gepusht werden, um auf set, get und reset zuzugreifen, "must use .push" direkt verwenden müssen, weil gtag eine Funktion als "an invalid command" interpretiert und ignoriert.

Warum hat mein dataLayer.push kein Tag ausgelöst?

Ein Push löst nur dann ein Tag aus, wenn er einen event-Schlüssel enthält, auf den ein Custom-Event-Trigger wartet. Werte ohne diesen Schlüssel aktualisieren den Data Layer trotzdem, aber Tag Manager hat nichts zum Abgleichen, also läuft kein Trigger und kein Tag feuert. Fügen Sie den Event-Namen im selben Push hinzu, sonst bleiben die Werte liegen, bis eine spätere Nachricht ihn mitbringt.

Sollte ich für ein neues Projekt digitalData oder dataLayer verwenden?

Nehmen Sie das Event-Queue-Modell, das sowohl dataLayer als auch adobeDataLayer nutzen. Es akzeptiert Pushes, bevor ein Vendor-Skript überhaupt geladen ist. Genau das ist das Timing-Problem, an dem das State-Object-Modell scheitert: Ein Tag, das digitalData liest, bevor das Objekt gefüllt ist, liest nichts. digitalData stammt außerdem aus einem Community-Group-Report von 2013, der ausdrücklich festhält, dass es kein W3C-Standard ist.

Ist es sicher, E-Mail-Adressen in den Data Layer zu pushen?

Nein. Alles, was in den Data Layer gepusht wird, ist für jedes Tag im Container lesbar, auch für Tags, die später von jemand anderem hinzugefügt werden. Pushen Sie stattdessen eine Formular-ID und ein Ergebnis, nie den tatsächlichen Feldinhalt, Namen oder die E-Mail-Adresse.

Ist adobeDataLayer dasselbe wie Googles dataLayer?

Beide sind einfache Arrays, die Nachrichten der Reihe nach verarbeiten, aber es sind getrennte globale Variablen. Googles Tag Manager und gtag.js teilen sich window.dataLayer, und Adobes Client Data Layer nutzt sein eigenes Array, window.adobeDataLayer. Adobes Dokumentation beschreibt denselben Vorteil beim Ladezeitpunkt. Seiten und Skripte können Daten registrieren und Events auslösen, indem sie ins Array pushen, noch bevor das Data-Layer-Skript selbst geladen wurde.