Zur Übersicht

Anleitung Shopify GTM Integation

von

4
Minuten Lesezeit

Diesen Beitrag teilen

Shopify hat durch seine Sandbox-Umgebung im Checkout-Prozess die Möglichkeiten für das Tracking stark beeinträchtigt. Wir selbst saßen in diversen Meetings mit dem Betreuungsteam von Kunden und unseren eigenen Teams um die Herausforderungen dieser Änderungen meistern zu können.

Das ursprüngliche Modell von Shopify sah vor, dass es zwei Umgebungen gibt für das Checkout-Tracking: App-Pixel (Strict) und Web-Pixel (Lax). Beide haben erhebliche Probleme in der Umsetzung gehabt, da Web-Pixel unzuverlässig gefeuert haben und App-Pixel lediglich POST-Requests an externe Dienste erlaubt haben, keinen Document Body hatten (daher keine Script-Injections möglich) und gewisse weitere Grenzen hier aufgezogen wurden.

Glücklicherweise hat Shopify diese Fehler größtenteils behoben und die Möglichkeiten etwas erweitert. Die Lösung wurde dann schließlich eine kombinierte Integration des Tracking mit tatsächlich sogar mehr Möglichkeiten zur Messung als zuvor. In diesem Artikel gehen wir auf die Details kurz ein und stellen einen Code über Github zur Verfügung.

Zielgruppe dieses Artikels sind Shopify-Entwickler oder Tracking-Experten. Die bereitgestellten Scripts sind Open-Source nach Apache 2.0 Lizenz. Um Quellangabe wird höflichst gebeten.

GTM in Shopify Theme-Code Integrieren

Unsere neueste Integration für Shopify nutzt den Google Tag Manager (GTM) in Kombination mit der Customer Privacy API von Shopify, um leistungsstarke E-Commerce-Analysen bereitzustellen und das, ohne dabei auf die Einhaltung der Nutzereinwilligungen zu verzichten. Im Folgenden stellen wir die Hauptfunktionen dieser Integration vor und erläutern, wie sie Ihnen dabei helfen kann, Ihren Online-Shop zu optimieren.

GitHub-Link zum Quellcode: https://github.com/Corestad/shopify-tag-manager-tracking

GTM, Consent Mode, Privacy Settings und API-Handling – Funktionsübersicht

Unsere Lösung bietet mehrere zentrale Funktionen:

  1. Dynamische GTM-Initialisierung
    Die Integration lädt Ihren GTM-Container dynamisch basierend auf konfigurierbaren Einstellungen. Mit einem dedizierten Konfigurationsobjekt können Sie Ihre GTM-Container-ID und die Skript-URL problemlos festlegen. Dies stellt sicher, dass Ihre Analyseumgebung flexibel und robust bleibt und sich problemlos an Änderungen in den Tracking-Anforderungen Ihres Shops anpassen lässt.
  2. Fortschrittliches Consent-Management
    Der Schutz der Privatsphäre der Nutzer wird präzise gesteuert. Die Integration unterstützt sowohl strenge als auch laxere Einwilligungsmodi über konfigurierbare Einstellungen. Im strengen Modus wird GTM erst aktiviert, nachdem eine explizite Einwilligung der Nutzer vorliegt. Im laxen Modus kann der Container vorab geladen werden, wobei Aktualisierungen dynamisch vorgenommen werden, sobald sich die Nutzereinstellungen ändern. Für diejenigen, die die Einwilligungen über externe Plattformen verwalten, sorgt ein Fallback-Objekt dafür, dass kein Tracking erfolgt, bevor die notwendigen Berechtigungen erteilt wurden.
  3. Umfassendes Event-Tracking
    Das System erfasst automatisch eine Vielzahl von E-Commerce-Ereignissen, darunter:
    • Seitenaufrufe und Produktinteraktionen: Je nachdem, ob sich ein Nutzer auf einer Produkt-, Kollektion- oder Warenkorbseite befindet, werden maßgeschneiderte Event-Daten erstellt.
    • Änderungen im Warenkorb: Durch das Abfangen von Fetch- und XMLHttpRequest-Aufrufen werden Ereignisse wie das Hinzufügen oder Entfernen von Artikeln aus dem Warenkorb erfasst.
    • Checkout- und Kaufereignisse: Detaillierte Checkout-Prozesse – vom Beginn des Checkouts über die Übermittlung von Zahlungsinformationen bis hin zum Abschluss eines Kaufs – werden nachverfolgt, wobei sensible Nutzerdaten sicher verarbeitet werden.

Funktionsweise

Die Integration gliedert sich in drei Hauptkomponenten:

  • Theme-Konfiguration (cosd-tracker.js)
    Dieses Skript bildet das Herzstück der Integration. Es lädt die Customer Privacy API von Shopify, initialisiert GTM basierend auf Ihren Einwilligungseinstellungen und verfolgt dynamisch Ereignisse. Dabei werden Netzwerk-Anfragen abgefangen, um Aktivitäten im Warenkorb zu erfassen, und spezielle Funktionen zur Verwaltung der Nutzereinwilligungen und des Event-Trackings eingesetzt.
  • Event Snippet (cosd-ecom.liquid)
    Dieses in Ihr Shopify-Theme eingebettete Snippet richtet eine globale Datenebene und eine Hilfsfunktion für GTM ein. Es erstellt ein umfassendes Objekt, das Produkt-, Kollektion- und Warenkorbdaten enthält, und lädt asynchron das Haupt-Tracking-Skript. So wird sichergestellt, dass Ereignisse bereits beim Laden der Seite erfasst werden.
  • Customer Events Configuration
    Diese Komponente erweitert das Tracking um Checkout- und Kaufereignisse. Sie abonniert wichtige Ereignisse während des Checkout-Prozesses und verschlüsselt sensible Kundendaten mithilfe von SHA-256. Auf diese Weise wird sowohl den Datenschutzstandards entsprochen als auch wertvolle Einblicke in das Verhalten der Kunden gewonnen.

Vorteile unserer Lösung

Durch die Kombination der leistungsstarken Analysefähigkeiten von GTM mit einem fortschrittlichen Consent-Management schafft diese Integration ein ausgewogenes Verhältnis zwischen wertvoller Datenerfassung und striktem Datenschutz. Sie ist die ideale Lösung für Shopify-Shop-Betreiber, die:

  • Ihre Marketingmaßnahmen optimieren möchten, indem sie das Verhalten ihrer Kunden detailliert verstehen.
  • Das Vertrauen der Kunden bewahren wollen, indem sie die Einwilligungen respektieren und die Datenschutzbestimmungen einhalten.
  • Ihre operative Flexibilität erhöhen möchten, indem sie Einstellungen einfach an sich ändernde Datenschutzrichtlinien anpassen können.

Für weiterführende Informationen zur Konfiguration und Implementierung besuchen Sie bitte unsere vollständige Dokumentation unter docs.corestad.com.

Zusammenfassend bietet unsere Integration eine robuste und flexible Lösung für das Tracking und das Consent-Management auf Shopify. Sie ermöglicht es Ihnen, verwertbare Erkenntnisse zu gewinnen, während Sie gleichzeitig höchste Standards beim Datenschutz einhalten.

Exkurs: Consent-Einstellungen

Eine wichtige Änderung in der Dokumentation von Consent Mode für Google Tag Manager ist, dass es vermieden werden soll den gtag dafür zu nutzen, Consent-States zu übermitteln. Das Script berücksichtigt das bereits und nutzt dafür ein benutzerdefiniertes Event genannt consent_update welches mit den relevanten Variablen versehen wird. GTM, bzw. das genutzt GTM Consent Template muss daher darauf konfiguriert werden, dass der Consent entsprechend verarbeitet und genutzt wird.

Nächste Schritte

Was bleibt zu tun? Nachdem nun alle Events in GTM einlaufen, muss jetzt nur noch der GTM Container auf diese Events angepasst werden. Das Script feuert für E-Commerce Events ausschließlich die GA4 Standard-Events, daher kann anhand der GTM Anleitung für E-Commerce Integration der Container eingerichtet werden. Bitte hier bei insb. auf die Vorgaben der Consent Mode Einstellungen für GTM achten.

Rechtlicher Hinweis

Das Script wird frei zur Verfügung gestellt und insb. durch die Schnelllebigkeit der Änderungen in der Tracking-Welt kann keine Gewähr gegeben werden, dass es reibungslos funktioniert. Das Script wird Open-Source angeboten, daher bitten wir Anpassungen gerne direkt über den geregelten GitHub Prozess durchzuführen.

Dieses Script ist unter der Apache License, Version 2.0 lizenziert. Die Bedingungen dieser Lizenz sind rechtlich bindend, sodass Sie die Integration sicher nutzen und modifizieren können, während Sie die vorgeschriebenen Bestimmungen einhalten. Für die vollständigen Lizenzdetails lesen Sie bitte die Lizenz unter http://www.apache.org/licenses/LICENSE-2.0.

Share this post


Ähnliche Artikel

Wir konnten leider keine passenden Artikel zu diesem finden. Besuchen Sie unsere Insights Seite um weiterzulesen.