Web-Tracking mit etracker

Grundlagen

Überblick

Etracker ist eine Web-Analyse-Software, mit der Sie das Verhalten von Benutzern auf ihrer Website verfolgen können. Ein typischer Anwendungsfall ist die Analyse in online-Shops, auch E-Commerce-Tracking genannt. Dieser Artikel erläutert beispielhaft eine Umsetzung von E-Commerce-Tracking mit etracker und Optimizely Campaign.

Web-Tracking fällt in den Bereich Post-Click-Tracking, also das Verfolgen und Aufzeichnen von Aktionen eines Empfängers, nachdem dieser über einen Link aus einer Nachricht auf eine Website gelangt ist. Im Falle von E-Commerce-Tracking ist die verlinkte Website ein online-Shop.

Etracker dient dabei als Datenquelle für das Post-Click-Tracking von Campaign. Dabei werden Code-Bausteine (etracker-Tags) in ihrem online-Shop eingebettet und stellen eine Verbindung vom Shop zu Campaign her. Dieser Artikel erklärt, wie Sie Campaign und etracker kombinieren. Sie sollten ein Grundverständnis für Post-Click-Tracking in Optimizely Campaign und für etracker mitbringen, bevor Sie hier weiterlesen.

Voraussetzungen

Folgende Bedingungen müssen für E-Commerce-Tracking mit etracker erfüllt sein:

• etracker Analytics ist im online-Shop integriert, siehe Basis-Integration in der etracker-Dokumentation.
• etracker Ecommerce-Tracking ist im online-Shop integriert, siehe E-Commerce Tracking-Integration in der etracker Dokumentation.  
• Optimizely Post-Click-Tracking ist in Campaign aktiv und für etracker Analytics eingerichtet. Diese Einrichtung übernimmt die Optimizely-Kundenbetreuung auf Anfrage.
• In Optimizely Campaign ist der Tracking-Parameter bmMailId konfiguriert. Optimizely fügt dann bmMailId automatisch zu Links in E-Mails hinzu.
• Ein Tracking-Pixel für etracker wurde in Campaign vorbereitet.

Technischer Ablauf des Datenaustauschs

Ein Empfänger gelangt über einen Link in einer E-Mail zu ihrem Shop, der Link enthält den Parameter bmMailId, der die Nachricht aus Campaign und damit auch den Empfänger identifiziert. Dieser Parameter wird je nach Konfiguration im Local Storage des Browsers oder in einem Cookie gespeichert.

Die Seiten ihres Shops enthalten Trigger-Skripte, die bei bestimmten Ereignissen im Shop ausgeführt werden, um mit etracker zu kommunizieren. Trigger-Skripte können zusätzlichen Code von etracker auf die Website laden. Dadurch ist es möglich, durch Änderungen der etracker-Konfiguration das Tracking-Verhalten ihres Shops zu beeinflussen, ohne dass Änderungen am Shop selbst erforderlich sind.

Wenn Informationen über ein Ereignis im Shop an Campaign übermittelt werden, geschieht das mit einem Tracking-Pixel: Das Trigger-Skript auf der Website lädt ein Tag-Skript von etracker und dieses Tag-Skript fordert einen Tracking-Pixel von den Campaign-Servern an.

Das Tag-Skript schreibt in die Anfrage für den Tracking-Pixel die Variable bmMailId, also Informationen über Nachricht und Empfänger, und das aktuelle Ereignis. Campaign liest diese Informationen aus und speichert sie in einer Tracking-Datenbank, die bei der Zielgruppen-Erstellung nutzbar ist.

Code für Datenaustausch über den LocalStorage

Überblick

Die folgenden etracker-Tags dienen zum Tracken von Benutzern, die über einen Tracking-Link in einen Online-Shop gelangt sind.  Die Tags sind Skripte, die in etracker konfiguriert und auf den passenden Seiten geladen werden.

SetBmMailIdInLocalStorage

Konfigurieren Sie ihre Tags in etracker so, dass dieser Code auf allen Seiten ausgeführt wird. Wenn ein Besucher eine Seite aufruft, wird in der eingehenden HTTP-Anfrage nach dem Parameter bmMailId gesucht. Wenn dieser Wert gefunden wird, wird er im LocalStorage des Browsers gespeichert. Von dort aus können andere Skripte auf den Wert zugreifen, um den Benutzer und die Nachricht zu identifizieren, über die er auf die Seite gelangt ist.

<script>
  let bmMailId = new URL(window.location.href).searchParams.get("bmMailId") || undefined;
  if(bmMailId) {
    window.localStorage.setItem("bmMailId", bmMailId);
  }
</script>

ProductViewed

Konfigurieren Sie ihre Tags in etracker so, dass dieser Code auf allen Produktseiten ausgeführt wird.  Der Code schickt eine Anfrage für einen Tracking-Pixel an Optimizely Campaign und fügt in diese Anfrage den Wert von bmMailId aus dem LocalStorage des  Browsers hinzu (siehe SetBmMailIdInLocalStorage oben). Campaign liest diese Daten aus und speichert in seiner Tracking-Datenbank, welcher Empfänger zu welchem Zeitpunkt welches Produkt in ihrem Shop angesehen hat.

<script>
(function () {
  const bmMailId = localStorage.getItem("bmMailId");
  if (!bmMailId || !Array.isArray(window.dataLayer)) return;

  const event = window.dataLayer.find(e => e?.etEvent === "viewProduct");
  const p = event?.product;
  if (!p?.id) return;

  const base = "https://"+{{OptimizelyTrackingDomain}}+"/pc?mg="+{{OptimizelyMailingGroupId}}+"&service=et_viewProduct_"+{{OptimizelyMailingGroupId}};

  const url = new URL(base);
  url.searchParams.set("bmMailId", bmMailId);
  url.searchParams.set("gvalue1", p.id);
  if (p.name) url.searchParams.set("gvalue2", p.name);
  if (p.category) url.searchParams.set("gvalue3", p.category);
  if (p.currency) url.searchParams.set("gvalue4", p.currency);
  if (p.price != null) url.searchParams.set("fvalue1", p.price);

  const img = document.createElement("img");
  img.src = url.toString();
  img.width = 1;
  img.height = 1;
  img.style.display = "none";

  document.body.appendChild(img);
})();
</script>

Das Skript dient der automatisierten Erfassung von Produktaufrufen und deren Übermittlung an das PostClickTracking-System von Campaign. Der Ablauf gliedert sich in folgende Schritte:

• Validierung: Das Skript prüft initial die Verfügbarkeit der E-Mail-Identifikation (bmMailId) im localStorage sowie die Existenz des eTracker-Datalayers window.dataLayer.
• Daten-Extraktion: Innerhalb des dataLayer wird gezielt nach dem Event viewProduct gesucht. Existiert das Event oder die obligatorische Produkt-ID (id) nicht, wird die Ausführung beendet.
• Dynamischer URL-Aufbau: Auf Basis der in eTracker gesetzten Konfigurationsvariablen (OptimizelyTrackingDomain, OptimizelyMailingGroupId) wird die Ziel-URL generiert und sequenziell um die vorhandenen Produktmetadaten (ID, Name, Kategorie, Währung, Preis) als Query-Parameter erweitert.
• Asynchroner Datentransfer (Tracking-Pixel): Die Datenübermittlung erfolgt über das Tracking-Pixel-Verfahren. Hierzu wird ein unsichtbares <img>-Element (1x1 Pixel) erzeugt. Durch das Anhängen des Elements an das Dokument (document.body) löst der Browser die HTTP-Anfrage an Campaign aus.

ProductBuy

Konfigurieren Sie ihre Tags in etracker so, dass dieser Code auf allen Kaufbestätigungsseiten ausgeführt wird.  Der Code schickt eine Anfrage für einen Tracking-Pixel an Optimizely Campaign und fügt in diese Anfrage den Wert von bmMailId aus dem LocalStorage des  Browsers hinzu (siehe SetBmMailIdInLocalStorage oben). Campaign liest diese Daten aus und speichert in seiner Tracking-Datenbank, welcher Empfänger zu welchem Zeitpunkt welches Produkt gekauft hat.

<script>
(function () {
  const bmMailId = localStorage.getItem("bmMailId");
  if (!bmMailId || !Array.isArray(window.dataLayer)) return;

  const event = window.dataLayer.find(e => e?.etEvent === "order");
  const items = event?.order?.basket?.products;
  if (!Array.isArray(items) || items.length === 0) return;

  const base =
    "https://"+{{OptimizelyTrackingDomain}}+"/pc?mg="+{{OptimizelyMailingGroupId}}+"&service=et_order_"+{{OptimizelyMailingGroupId}};

  items.forEach(item => {
    const p = item?.product;
    if (!p?.id) return;

    const url = new URL(base);
    url.searchParams.set("bmMailId", bmMailId);
    url.searchParams.set("gvalue1", String(p.id));
    if (p.name) url.searchParams.set("gvalue2", String(p.name));
    if (p.category) url.searchParams.set("gvalue3", String(p.category));
    const currency = event?.order?.currency || p.currency;
    if (currency) url.searchParams.set("gvalue4", String(currency));
    if (p.price != null) url.searchParams.set("fvalue1", String(p.price));
    if (item.quantity != null) url.searchParams.set("fvalue2", String(item.quantity));

    const img = document.createElement("img");
    img.src = url.toString();
    img.width = 1;
    img.height = 1;
    img.style.display = "none";
    document.body.appendChild(img);
  });
})();
</script>