Data Layer

Data Layer im Überblick

Der Data Layer ist eine JavaScript-Datenstruktur, die Informationen von deiner Website für Tracking-Tools bereitstellt. Statt dass ein Tag Manager HTML-Elemente auslesen muss, liefert der Data Layer relevante Daten strukturiert und konsistenter.

Ohne Data Layer:

// GTM muss HTML parsen
// Fragil: Bricht bei jedem Redesign
document.querySelector('.product-price').innerText
// → Preis als formatierter String statt strukturierter Zahl

Mit Data Layer:

// Strukturierte Daten, immer gleich
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: currency_code,
    value: item_value,
    items: [{
      item_id: item_sku,
      item_name: item_name,
      price: item_price
    }]
  }
});

Vorteile:

Technisch betrachtet

Data Layer Struktur

// Initialisierung vor dem Tag-Manager-Container
window.dataLayer = window.dataLayer || [];

// Daten pushen
dataLayer.push({
  event: 'page_view',
  page_type: 'product',
  user_logged_in: true,
  user_id: user_id
});

Der Data Layer ist häufig ein Array, in das Objekte gepusht werden. Der Tag Manager liest diese Objekte und reagiert auf Events.

Standardisierte E-Commerce Events

Produktansicht:

dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: currency_code,
    value: item_value,
    items: [{
      item_id: item_sku,
      item_name: item_name,
      item_brand: item_brand,
      item_category: item_category,
      price: item_price
    }]
  }
});

Zum Warenkorb:

dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: currency_code,
    value: item_value,
    items: [{ /* wie oben */ }]
  }
});

Kauf:

dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: transaction_id,
    value: order_value,
    tax: tax_amount,
    shipping: shipping_amount,
    currency: currency_code,
    items: [{ /* wie oben */ }]
  }
});

Data Layer Variablen

Im Tag Manager erstellst du Variablen, die Data Layer Werte auslesen:

Data Layer Best Practices

1. Vor GTM initialisieren:

<script>
  window.dataLayer = window.dataLayer || [];
</script>
<!-- Tag-Manager-Container -->

2. Konsistente Namenskonvention:

// Gut: snake_case, konsistent
{ user_id: user_id, page_type: page_type }

// Schlecht: Gemischt
{ userId: user_id, 'page-type': page_type }

3. Ecommerce-Objekt leeren:

// Vor neuem E-Commerce Event
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_item',
  ecommerce: { /* ... */ }
});

4. Dokumentation:

• Alle Data Layer Events dokumentieren
• Erwartete Werte und Typen definieren
• Beispiele für Entwickler bereitstellen

Debugging

Browser Console:

// Aktuellen Data Layer anzeigen
console.table(dataLayer);

// Auf Events lauschen
dataLayer.push = function(obj) {
  console.log('Data Layer Push:', obj);
  Array.prototype.push.call(this, obj);
};

Tag-Manager Preview Mode:

• Zeigt alle Data Layer Events
• Variablenwerte pro Event
• Tag-Firing-Status

Chrome Extensions:

• dataLayer Inspector
• Tag- und Analytics-Debugger
• Omnibug