Data layer events

Viele Websites sammeln Informationen in einem Data Layer: einem JavaScript-Array namens window.dataLayer. Tag Manager wie der Google Tag Manager lesen ihn, und dein Shop oder deine Anwendung pusht Einträge hinein, zum Beispiel wenn ein Produkt in den Warenkorb gelegt wird:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: { currency: 'EUR', value: 29.9, coupon: 'SUMMER' }
});

Ein Eintrag hat üblicherweise einen event-Key mit seinem Namen sowie beliebige weitere Daten. ABlyft kann auf zwei Arten auf solche Einträge reagieren:

• in einer Audience, um Visitors erst einzuschließen, nachdem etwas passiert ist (kein Code nötig),
• in deinem eigenen Code, mit zwei Hilfsfunktionen.

Data-Layer-Events in Audiences nutzenCopy Anchor Link

Eine Audience kann erst dann zu passen beginnen, nachdem ein bestimmter Data-Layer-Eintrag erschienen ist. Das ist nützlich, um Visitors anzusprechen, die gerade etwas in den Warenkorb gelegt haben, die eine Consent-Kategorie akzeptiert haben oder deren Eintrag einen bestimmten Wert enthält.

1. Gehe zu Targeting & Goals → Audiences und erstelle oder bearbeite eine Audience.

2. Füge den Targeting-Block dataLayer Event hinzu.

3. Fülle die Regel aus:

   Feld	Beschreibung
   Event name	Der Wert des event-Keys, nach dem gesucht wird, zum Beispiel add_to_cart.
   Check	Was für den Eintrag zutreffen muss, siehe Tabelle unten.
   Property	Der zu prüfende Key, bei verschachtelten Daten mit Punkten: ecommerce.coupon. Nicht nötig bei Event exists.
   Value	Der Wert, mit dem verglichen wird. Nicht nötig bei Event exists, property exists und property does not exist.

4. Speichere und verknüpfe die Audience mit deinem Experiment.

Checks (Operatoren)Copy Anchor Link

Ist die Property ein Objekt oder eine Liste, vergleicht ABlyft deren JSON-Text.

Wie es sich verhältCopy Anchor Link

• ABlyft betrachtet Einträge, die bereits im Data Layer sind (der neueste mit diesem Event-Namen zählt), sowie alle später gepushten Einträge.
• Sobald ein Eintrag den Check erfüllt, gilt die Audience für den Rest dieses Seitenaufrufs als passend. Die Experiments, die die Audience verwenden, werden sofort erneut ausgewertet.
• Für die nächste Seite wird nichts gespeichert. Nach einem Reload muss der Data Layer erneut einen passenden Eintrag enthalten.
• Mehrere Regeln innerhalb eines Blocks werden mit ODER verknüpft; mehrere Blöcke einer Audience werden mit UND verknüpft.

Wählen, wie ABlyft den Data Layer beobachtetCopy Anchor Link

Das Snippet muss neue Einträge bemerken. Wie es das tut (Intercept oder Polling), steuert die Project-Einstellung Data layer watching, siehe Snippet settings. Ersetzt ein anderes Skript dataLayer.push, wähle Polling. Die Einstellung gilt für die obigen Audience-Regeln und für watchDataLayerEntry() unten.

Code ausführen, wenn ein Eintrag gepusht wirdCopy Anchor Link

Verwende diese Funktionen im Code von Variations, Page-Callbacks oder Projects, wo ablyftTools verfügbar ist. Beide sind in der Tools-Referenz beschrieben.

watchDataLayerEntryCopy Anchor Link

Reagiert auf jeden Eintrag mit dem angegebenen Event-Namen, siehe watchDataLayerEntry.

const stop = ablyftTools.watchDataLayerEntry('add_to_cart', (entry) => {
  console.log('Item added', entry.ecommerce.value);
});

// later, if no longer needed
stop();

Beispiel: Sende ein Custom Goal, wenn ein Lead-Event auftritt. Für einen Kauf-Wert siehe das Beispiel unter Revenue tracking.

ablyftTools.watchDataLayerEntry('generate_lead', () => {
  window.ablyft.push({ eventType: 'custom', eventName: 'lead' });
});

checkForDataLayerEntryCopy Anchor Link

Wartet auf einen bestimmten Eintrag, siehe checkForDataLayerEntry. Das ist nützlich, um eine Page mit dem Callback-Trigger zu starten:

ablyftTools.checkForDataLayerEntry(
  [['event', 'page_view'], ['page_location', 'https://www.example.com/test']],
  () => activate()
);

Siehe Dynamische Inhalte.

Experiment-Informationen an den Data Layer sendenCopy Anchor Link

Die andere Richtung ist ebenfalls üblich: Dein Analytics-Tool soll wissen, welche Variation ein Visitor gesehen hat. Dafür kannst du eine Integration hinzufügen, die läuft, wenn ein Visitor gebucketet wird oder ein Experiment ansieht. Gehe zu Integrations → Custom Integrations, wähle den Trigger (User bucketed oder Experiment viewed) und füge JavaScript hinzu. Im Code kannst du project, experiment und variation (jeweils mit id und name) sowie die Variation-metadata verwenden:

dataLayer.push({
  'event': 'experimentViewed',
  'experiment_name': experiment.data.name,
  'variation_name': variation.data.name
});

Ein Tag Manager kann dieses Event dann an Google Analytics 4 weiterleiten. Die Integrationsdokumentation von ABlyft beschreibt eine fertige Verbindung für den Google Tag Manager und GA4; kontaktiere den ABlyft-Support, wenn du Hilfe bei der Einrichtung möchtest.

FehlerbehebungCopy Anchor Link

• Audience passt nie: Öffne die Browser-Konsole und führe window.dataLayer aus. Prüfe, dass der Event-Name exakt so geschrieben ist wie in der Audience und dass der Property-Pfad korrekt ist (Groß-/Kleinschreibung beachten).
• Funktioniert nach einem Reload, aber nicht bei später gepushten Events: Ein anderes Skript hat möglicherweise dataLayer.push ersetzt, nachdem ABlyft es umhüllt hat. Stelle Data layer watching auf Polling.
• Callback läuft zweimal: watchDataLayerEntry meldet auch einen Eintrag, der bereits existierte, als du dich registriert hast. Rufe die Stop-Funktion auf oder mache deinen Code sicher für zweimalige Ausführung.
• Aktiviere den Debug-Modus: Audience-Trigger werden mit AUDIENCE TRIGGER activated protokolliert.

Nächste SchritteCopy Anchor Link