Shopify Tracking mit Google Tag Manager & Customer Events

Looker Studio E-Commerce Dashboard
Inhaltsverzeichnis

Shopify Kunden sollten diesen Sommer unbedingt ihr Tracking anpassen. Der Grund: Für den 13. August 2024 stehen in Shopify wichtige Änderungen bevor, die bestehende Tracking Skripte beeinträchtigen werden. Dazu gehören:

  • das Ende der checkout.liquid für Shopify Plus Kunden
  • die Abschaffung der „Additional Scripts“ Section auf der Order Status Page für alle anderen.

In diesem Beitrag erfährst du, wie du Shopify Tracking mit Customer Events 2024 erfolgreich einrichten kannst. Dafür erklären wir dir erstmal, wie Shopify Tracking bisher funktioniert hat.

Im nächsten Step bekommst du von uns ein umfassendes Shopify Tracking Update um dich auf den neusten Stand zu bringen.

Zu guter Letzt erhältst du von uns einen fertigen Custom Pixel Code für einen vollständigen Shopify E-Commerce Data Layer kostenlos dazu.  

Herausforderungen beim Shopify Tracking mit Google Tag Manager

So zahlreich die Vorteile von Shopify auch sind – ein einfaches Tracking Setup gehörte bisher noch nie dazu. Bevor wir starten, hier also zunächst ein kleiner Rückblick.

Wer in der Vergangenheit auf kostenpflichtige Plugins verzichten wollte, der musste sich bisher selbst um den E-Commerce Data Layer kümmern. Das Einrichten der Datenschicht in Shopify setzte Theme-Zugriff und Kenntnisse in JavaScript und Liquid voraus.

Die größte Herausforderung lag dabei vor allem beim Checkout – zumindest für Kunden ohne Shopify Plus. Hier waren die Anpassungsmöglichkeiten sehr eingeschränkt, was von vielen als Nachteil von Shopify aufgefasst wurde.

Shopify selbst hielt dagegen, dass der so standardisierte Checkout eine um 36% höhere Conversion Rate als die Wettbewerber erziele – immerhin.

Wie funktioniert Shopify Tracking bisher?

Wer keine Plugins nutzte, für den sah ein Shopify Tracking Setup bisher wie folgt aus:  

Für den E-Commerce Data Layer wurde zunächst eine eigene Liquid-Datei bereitgestellt. Je nach Seitentyp (in Shopify: Template Name) konnte so ein passendes Event in den Data Layer geschrieben werden. Beim Laden der Product Page war dies beispielweise ein view_item Event. Über den onclick-Event Handler des Warenkorb-Buttons konnte auch der Data Layer Push für das add_to_cart Event ausgelöst werden.

Diese Lösung brauchte vor allem zwei Dinge:

  1. Theme-Zugriff
  2. Kenntnisse in Java Script und Liquid

Shopify Basic & Advanced

Für das Checkout Tracking mussten Kunden ohne Shopify Plus einen Umweg gehen. Im Feld „Additional Scripts“ unter Settings > Checkout konnten benutzerdefinierte Skripte für die Order Status Page eingefügt werden. Hier wurde der Tag Manager eingebunden und im Anschluss der Purchase Data Layer bereitgestellt.

So konnte man zwar Käufe tracken, jedoch keiner der sonstigen Checkout-Zwischenschritte.

Shopify Plus

Nutzer von Shopify Plus waren bis dato klar im Vorteil: Durch Zugriff auf die checkout.liquid konnten sie zusätzlich zum Kauf auch alle Zwischenschritte des Bestellvorgangs erfassen.

Was ist neu am Shopify Tracking 2024?

Diesen Sommer wird alles anders: Denn mit der Checkout Extensibility kündigte Shopify das Ende des Zugriffs auf die checkout.liquid Datei für den 13. August 2024 an. Damit verlieren Shopify Plus Kunden ihre bisher bekannte Möglichkeit, Tracking Code auf Checkout-Seiten einzufügen.

Auch Basic & Advanced Kunden sind von diesem Update betroffen: Denn das bekannte Feld für die „Additional Scripts“ auf der Order Status Page verschwindet ebenso.

E-Commerce Tracking mit Shopify Custom Pixel 2024 – so funktioniert’s!

Wer nach einer einfachen Lösung für sein Shopify E-Commerce Tracking 2024 sucht, der sollte weiterlesen. Denn die gute Nachricht lautet: Es gibt sie. Im Unterschied zu früher kommt die neue Lösung sogar ganz ohne Theme-Zugriff aus. Der neue Weg führt über die so genannten Custom Pixel der Shopify Customer Events.

Custom Pixel sind benutzerdefinierte Skripte, mit denen sich Kundenereignisse eines Shopify Shops ohne Eingriff in den Theme Code tracken lassen. Sie werden in einer Sandbox-Umgebung ausgeführt, was Kontrolle und Sicherheit gewährleisten soll.

Im Folgenden erfährst du, wie du Custom Pixel für das Shopify Tracking mit dem Google Tag Manager nutzen kannst.

Custom Pixel in Shopify anlegen – in nur wenigen Schritten

Um dein erstes Shopify Custom Pixel einzurichten, klickst du zuerst auf das Einstellungs-Zahnrad. In der Seitenleiste klickst du dann auf den Menüpunkt Customer Events. Hier findest du eine Übersicht über alle vorhandenen App und Custom Pixel.

Abbildung 1: Die Customer Events in den Shopify Einstellungen

Per Klick auf den Button „Add custom pixel“ legst du ein neues Pixel an und gibst ihm einen aussagekräftigen Namen.

Abbildung 2: Mit diesem Button legst du ein neues Pixel an.

Wenn du nun auf dein Pixel klickst, findest du das Feld für deinen Pixel Code. Mit dem Button oben rechts kannst du das Pixel verbinden und so für deinen Shop live schalten. Auf die gleiche Weise kannst du das Pixel wieder deaktivieren.

Abbildung 3: Mit diesem Button kannst du dein Pixel aktivieren.

Google Tag Manager in Shopify einbinden – einfach erklärt

Auch bei der Custom Pixel-Lösung muss zunächst einmal der Tag Manager eingebunden werden.

Dafür gehst du in deinem Tag Manager Container auf Verwaltung > Google Tag Manager installieren und  kopierst das Snippet für den <head>-Abschnitt.

⚠️WICHTIG: Entferne vorher unbedingt die <script> Tags! Das Custom Pixel erwartet Java Script und kein HTML.

Diesen Code fügst du anschließend an oberster Stelle im Custom Pixel ein.

Wenn du unsere kostenlose Custom Pixel Vorlage verwendest, wird das sogar noch einfacher: Hier musst du nur an oberster Stelle hinter gtm_id deine Google Tag Manager ID GTM-xxxxxx einfügen.

Custom Pixel Events abonnieren – so bekommst du einen Data Layer

Für den Data Layer Push abonnieren wir nun die Events aus Shopifys Web Pixels API. Das funktioniert ganz einfach mit dem Befehl analytics.subscribe(). Hier findest du ein Beispiel für den Page View.

analytics.subscribe("page_viewed", (event) => {
  //console.log("page_viewed", event)
  window.dataLayer.push({
    event: "page_view",
    timestamp: event.timestamp,
    id: event.id,
    client: {
      id: event.clientId,
      agent: event.context.navigator.userAgent,
    },
    page: {
      url: event.context.document.location.href,
      path: event.context.document.location.pathname,
      host: event.context.document.host,
      referrer: event.context.document.referrer,
      title: event.context.document.title,
      language: event.context.navigator.language
    }
  });
});

Abbildung 4: So trackst du Page Views mit der Shopify Web Pixels API

Das Ganze funktioniert natürlich auch mit anderen Ereignissen. In der folgenden Tabelle findest du zu jedem GA4 E-Commerce Event das passende Event der Shopify Web Pixels API:

Mit dem console.log()-Aufruf im entsprechenden analytics.subscribe()-Block kannst du dir die Parameter der Web Pixel Events in die Konsole schreiben lassen. So erfährst du, wie du auf die Werte zugreifen kannst, die du als Event-Parameter in den E-Commerce Data Layer schreiben möchtest.

Kleiner Tipp: Wenn du dir diesen und die folgenden Schritte sparen willst, lade dir hier unsere kostenlose Data Layer Vorlage für Custom Pixel herunter.

Das Debug-Dilemma: Warum der Tag Assistant dir nicht helfen kann

Der Data Layer steht, nun wird es Zeit für das Setup des Tag Managers.

Die Herausforderung dabei: Der Code der Shopify Custom Pixel ist sandboxed. In diesem Fall bedeutet das, dass das JavaScript in einem iFrame ausgeführt wird. Dadurch hat der Custom Pixel Code nur begrenzte Zugriffsmöglichkeiten.

Was auf der einen Seite mehr Sicherheit bedeutet, bringt einen entscheidenden Nachteil mit sich: Der Tag Assistant versagt und wir müssen uns nach einem Workaround umsehen.

Shopify Custom Pixel debuggen – der ultimative Guide

Wir zeigen dir nun zwei Wege, wie du dein Tracking Setup auch ohne Tag Assistant überprüfen kannst.

Option 1: Google Tags & Data Layer mit Legacy Tag Assistant überprüfen

Während der Tag Assistant bei der Custom Pixel Lösung versagt, leistet sein „Vorfahre“ hilfreiche Dienste: Mit dem Legacy Tag Assistant  kannst du bequem testen, ob deine Google Tags korrekt im Shop installiert sind. Das beste dabei: Du kannst dir den Data Layer anzeigen lassen – und zwar für jedes Event, welches du im Custom Pixel abonniert hast.

So kannst du sicherstellen, dass der Data Layer richtig eingerichtet ist, bevor du im Tag Manager weitermachst.

Abbildung 5: Der E-Commerce Data Layer eines view_item Events, zu sehen im Legacy Tag Assistant.

Option 2: Helper Tag einrichten & GTM Container live schalten

Wenn du den Legacy Tag Assistant nicht verwenden kannst oder möchtest, gibt es noch einen anderen Weg.
Bei dieser Lösung musst du deine Änderungen im Tag Manager jedoch vorher live schalten.

Diese Debug-Lösung mit Tag Manager und Konsole funktioniert so:

a. Zuerst hängst du im Pixel Code bei jedem Data Layer Push einen Debug-Parameter an, dem du eine feste Bezeichnung wie z.B. „gtm_pixel_debug“ gibst. Setze ihn zunächst auf true. Wenn die Testphase abgeschlossen ist, kannst du den Wert dann auf false setzen oder die Zeile ganz löschen.

Abbildung 6: Der Debug-Parameter im Custom Pixel Code. Die Bezeichnung kannst du frei wählen.

b. Im Tag Manager legst du eine Data Layer Variable „EventData_GTMPixelDebug – dlv“ an, die diesen Wert ausliest.

Abbildung 7: Die Data Layer Variable für das Debug Flag im GTM.

c. Danach erstellst du eine weitere JavaScript Hilfsvariable „Full_DataLayer – jvs“ , die den kompletten Data Layer speichert.

Abbildung 8: So speicherst du den Data Layer im GTM.

d. Die dritte Tag Manager Variable „Latest_DataLayer – jvs“ liest nur den Teil des Data Layers aus, der zuletzt hinzugefügt  wurde.

Abbildung 9: Die Werte aus dem letzten Data Layer Push.

e. Im Anschluss erstellst du einen Event Trigger, der bei allen Ereignissen auslöst, bei denen der Wert „gtm_pixel_debug“ mit true im Data Layer liegt.

Abbildung 10: Trigger, der bei allen Events auslöst, bei denen der Debug Parameter auf true steht.

f. Nun legst du das Helper Tag vom Typ Custom HTML an und lässt es auf diesen Trigger lauschen. Das Tag schreibt den Inhalt von „Latest_DataLayer – jvs“ bei jedem Event in die Konsole, bei dem du gtm_pixel_debug auf „true“ gesetzt hast. Alternativ kannst du auch die Werte deiner Tag Manager Variablen zur Kontrolle in die Konsole schreiben lassen.

Abbildung 11: Helper Tag, das den Inhalt des Data Layers in die Konsole schreibt.

Um die Konsole sauber zu halten, solltest du unnötigen Output vermeiden. Deaktiviere also vor der finalen Liveschaltung die Helper Tags und kommentiere alle Log-Zeilen in deinem Pixel Code aus.

E-Commerce Data Layer für Shopify Pixel zum Download

Shopify Tracking ist und war schon immer eine Herausforderung. Wir lassen dich damit nicht alleine. Eine saubere E-Commerce Data Layer Implementierung für Shopify Custom Pixel findest du hier kostenfrei zum Download.

LINK zum ReachLab Shopify Custom Pixel Data Layer Code

So einfach geht’s:

  1. Unter Settings > Customer Events ein neues Pixel anlegen
  2. <head> Snippet aus dem Tag Manager einfügen
  3. Darunter den ReachLab Custom Pixel Data Layer Code einfügen
  4. Pixel aktivieren

Shopify Customer Events und Cookie Consent – das solltest du beachten

Ein wichtiges Thema fehlt noch: Die Consent Einstellungen. Erfahrungsgemäß kann die Übermittlung der Nutzerentscheidung an die Custom Pixel Sandbox einige Schwierigkeiten mit sich bringen. Auch lässt sich die consent-gerechte Ansteuerung deiner Tags nicht ganz so einfach überprüfen, wie es sonst mit einem funktionierenden Tag Assistant der Fall wäre. Solltest du also weitere Unterstützung brauchen, schreib uns gerne eine Nachricht. Bei uns bekommst du schnelle und unkomplizierte Hilfe von unseren Shopify Tracking Pionieren.

Wir freuen uns, dich beim Shopify Tracking Setup zu unterstützen.

Und damit: Happy Tracking!

Shopify Tracking Pixel herunterladen

Looker Studio E-Commerce Dashboard

Gerne senden wir dir diesen Download zu. Einfach das Formular ausfüllen.

Raffaela Kruse ReachLab

Raffaela Kruse

Digital Analytics Consultant
Raffaela ist Teil des Digital Analytics Teams und ist Spezialistin für den Bau von Dashboards und in der Wissensvermittlung durch Schulungen. Zuvor hat sie mehrere Jahre im E-Commerce in der Beauty-Branche gearbeitet. Die gebürtige Bremerin macht in ihrer Freizeit gerne Fitness und schreibt Lyrik und Kurzgeschichten.
Weitere Beiträge