Zum Hauptinhalt springen

Wie funktioniert das Zusammenspiel mit dem Google Tag Manager?

Voraussetzungen​

Google Tag Manager Integration​

Der K3 sendet JavaScript-Events über window.postMessage, die einfach an den Google Tag Manager weitergeleitet werden können. Diese Lösung wird moderner und flexibler als die direkte Analytics-Integration sein.

Event-Struktur​

Der Event-Listener sieht so aus:

window.addEventListener(
  "message",
  function (event) {
    // K3 Events an Google Tag Manager weiterleiten
    if (event.data && event.data.type && event.data.type.startsWith("K3")) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: event.data.type,
        k3_action: event.data.action,
        k3_label: event.data.label,
        k3_category: event.data.category,
      });
    }
  },
  false,
);

Verfügbare Events​

Aktuell sendet der K3 diese Events über window.postMessage:

K3AppLoaded - App-Komponente geladen

  • Gesendet wenn die Konfigurator-App-Komponente geladen ist

K3DSceneLoaded - 3D-Szene geladen

  • Gesendet wenn die 3D-Szene vollständig geladen ist

K3ValiditiesLoaded - Validierungen geladen

  • Gesendet wenn alle Regel-Validierungen geladen sind

K3FullyLoaded - Konfigurator vollständig geladen

  • Gesendet wenn alle Komponenten (App, 3D-Szene, Validierungen) geladen sind

K3ConfigurationSaved - Konfiguration gespeichert

{
  type: "K3ConfigurationSaved",
  actionKey: "cart", // Schlüssel der Speicher-Aktion (siehe unten)
  code: "abc123def", // Generierter Konfigurations-Code
  customer: {
    "address": null,
    "dataPrivacy": "Die Datenschutzhinweise habe ich zur Kenntnis genommen und akzeptiere sie.",
    "name": "Mustermann",
    "email": "mustermann@test.test",
    "phone": null,
    "remark": null,
    "company": null,
    "taxID": null,
    "checkboxAccepted": true
  }
}
  • Gesendet beim Speichern einer Konfiguration
  • actionKey: Wird in dieser Reihenfolge ermittelt:
    1. Das Feld actionKey der Aktion in den App-Einstellungen (empfohlen)
    2. Das Feld id der Aktion
    3. Das übersetzte Label der Aktion (für die aktive Sprache)
    4. "unknown" als letzter Fallback
  • code: Der eindeutige Konfigurations-Code
  • customer: Kunden-Daten (nur wenn Kundendaten abgefragt werden)

Vorteile der GTM-Integration​

  • Flexibilität: Nutzen Sie Ihren bestehenden GTM
  • Datenschutz: Volle Kontrolle über Cookie-Consent
  • Konsistenz: Alle Events über eine GTM-Instanz
  • Erweiterte Funktionen: GTM-Features wie Custom Events und Trigger

Google Analytics anbinden​

danger

Die direkte Anbindung von Analytics wird demnächst nicht mehr unterstützt.

Der K3 kann die Nutzung Ihres Konfigurators in Ihrem Analytics Konto tracken.

  • Finden Sie zunächst Ihre sogenannte Analytics Property ID heraus:
  • Öffnen Sie dazu Ihr Analytics-Konto und wechseln Sie nach
    Loading...
    .
  • Wählen Sie dann die Property, in die der Konfigurator tracken soll und klicken Sie auf
    Loading...
    .
  • Klicken Sie auf den Stream, den Sie verwenden wollen.
  • Unter "MESS-ID" finden Sie nun die gesuchte Zeichenkette in der Form "G-XXXXXXXXX".
  • Öffnen Sie nun die Einstellungen Ihres Konfigurators, indem Sie in der Liste aller Konfiguratoren auf das Zahnrand am Konfigurator klicken oder in der Vorschau auf
    Loading...
    .
  • Tragen Sie die Tracking-ID unter
    Loading...
    ein.
warnung

Der K3 blendet keinen Cookie-Banner ein. Bitte stellen Sie auf Webseite oder Shop sicher, dass ihr Nutzer der Verwendung von Cookies zugestimmt hat.

tip

Wenn der Konfigurator mit dem Parameter ?ga=false gestartet wird, sendet er keine Daten an Google Analytics. Sie können das zum Beispiel anfügen, wenn der Nutzer dem Setzen von Cookies nicht zugestimmt hat.

Was wird getrackt?​

Nach einiger Zeit finden Sie die Ergebnisse in Ihrem Analytics Konto unter

Loading...
>
Loading...
:

  • Start des Konfigurators:
    • event_category: "K3:" und Konfigurator und ":loaded"
    • event_action: "loaded"
    • event_label: Inspirationscode oder "app"
  • Speichern einer Konfiguration:
    • event_category: "K3:" und Konfigurator und ":saved"
    • event_action: "saved"
    • event_label: Button, über den gespeichert wurde
  • AR:
    • event_category: "K3:" und Konfigurator und ":saved"
    • event_action: "saved"
    • event_label: "ar"
  • Es wurde auf einen neuen Schritt gewechselt:
    • event_category: Konfigurator und ":step"
    • event_action: "step"
    • event_label: Schritt-Label
  • Merkmal wurde geändert:
    • event_category: "K3:" und Konfigurator und ":action"
    • event_action: Merkmals-Label
    • event_label: Wert-Label (bei Komponenten wird +/- vorangestellt, um hinzufügen und löschen zu unterscheiden)

Die event_action sehen Sie als Namen des Events in GA4. Die zusätzlichen Parameter event_category und event_label richten Sie in Analytics folgendermaßen ein:

  • Klicken Sie auf "Verwaltung", dann unter "Datenanzeige" auf "Benutzerdefinierte Definitionen"
  • Klicken Sie auf "Benutzerdefinierte Dimension erstellen"
  • Geben Sie ein: Dimensionsname: event_category Beschreibung: Ereignis-Kategorie Ereignisparameter: event_category
  • Verfahren Sie für event_label genauso.