Server-Side-Tracking in Shopify: So funktioniert es und so richtest du es ein

Server-Side-Tracking auf Shopify bedeutet, dass jeder Kauf Meta, TikTok und andere Werbeplattformen aus den Bestelldaten deines Shops erreicht, gesendet von einem Server, und nicht nur von einem Pixel im Browser des Käufers. Shopify meldet jede bezahlte Bestellung per Webhook an die Tracking-App, und die App sendet sie an die Conversions API jeder Plattform, zugeordnet zu dem Anzeigenklick, der den Käufer gebracht hat.

Dieser Leitfaden behandelt die Shopify-Teile dieses Ablaufs: die App-Einbettung im Theme und den App-Proxy, Pixel im Checkout, den orders/paid-Webhook, die Bestellzuordnung, Deduplizierung, Einwilligung und die Einrichtung in ROASaurus. Für die allgemeine Idee lies zuerst Was ist Server-Side-Tracking.

So funktioniert Server-Side-Tracking auf Shopify

Der Klick und der Kauf passieren zu unterschiedlichen Zeitpunkten und an unterschiedlichen Orten. Der Klick ist nur im Browser sichtbar, auf der Landingpage. Die bezahlte Bestellung ist nur auf Shopify-Seite sicher, wenn die Zahlung erfasst wird. Server-Side-Tracking zeichnet das Erste auf, wartet auf das Zweite und verbindet beide.

Die Shopify-Bausteine: App-Einbettung, App-Proxy, Pixel und Webhooks

Ein Shopify-Shop bietet einer Tracking-App vier Stellen zum Arbeiten. Jede hat eine andere Aufgabe, und ein vollständiges Setup nutzt alle vier.

Die App-Einbettung im Theme und der App-Proxy

Eine App-Einbettung im Theme ist ein Block, den eine App zu deinem Theme hinzufügt. Du aktivierst sie im Theme-Editor, daher musst du keinen Code einfügen. Die ROASaurus-Einbettung lädt auf jeder Seite ein Skript. Auf der Landingpage liest es Click-IDs wie fbclid, ttclid und gclid sowie die UTM-Parameter und speichert sie mit einer First-Party-Besucher-ID.

Das Skript sendet seine Events über den App-Proxy von Shopify. Ein App-Proxy leitet Anfragen von einem Pfad auf deiner eigenen Domain, etwa yourstore.com/apps/roasaurus, an den Server der App weiter. Für den Browser ist das eine Anfrage an deine eigene Website, was gegen Adblocker helfen kann, die bekannte Tracking-Domains blockieren. Shopify entfernt den Cookie-Header aus App-Proxy-Anfragen und den Set-Cookie-Header aus den Antworten, deshalb wandert die Besucher-ID im Event selbst mit und nicht in einem Cookie.

Customer Events und Pixel im Checkout

Im Checkout von Shopify laufen Tracking-Skripte als Pixel in einer Sandbox, nicht in der Seite selbst. Du verwaltest sie unter Settings › Customer events. Es gibt zwei Arten. App-Pixel kommen mit einer App und laufen in einer strengen Sandbox. Benutzerdefinierte Pixel werden vom Händler hinzugefügt und laufen in einer weniger strengen Sandbox, die Skripte von Drittanbietern wie das Meta-Pixel laden kann.

ROASaurus nutzt beide. Sein App-Pixel wird aktiviert, wenn du die App installierst. Es meldet den Beginn des Checkouts, den Kontaktschritt und den abgeschlossenen Checkout an ROASaurus. Das optionale benutzerdefinierte Pixel fügt dem Checkout die Browser-Pixel von Meta, TikTok, Snapchat, Pinterest und Reddit hinzu und sendet Google-Ads-Conversions.

Bestell-Webhooks

Ein Webhook ist eine Nachricht, die Shopify an eine App sendet, wenn im Shop etwas passiert. ROASaurus abonniert unter anderem orders/paid und orders/create. Die Bestellung im Webhook enthält die Bestell-ID, den Wert, die Positionen, die Kundendaten, die Warenkorb- und Checkout-Tokens, die Warenkorb-Attribute sowie die IP-Adresse und den Browser, von denen aus die Bestellung aufgegeben wurde. Sie kommt von den Servern von Shopify, daher können ein Adblocker oder ein geschlossener Tab sie nicht aufhalten.

Wie Bestellungen den Anzeigenklicks zugeordnet werden

Der Webhook teilt ROASaurus mit, dass eine Bestellung bezahlt wurde. Um eine brauchbare Conversion zu senden, muss ROASaurus außerdem wissen, welcher Besucher die Bestellung aufgegeben hat, denn der Besucher-Datensatz enthält die Click-IDs. Es probiert diese Verknüpfungen der Reihe nach, von der direktesten zur indirektesten:

Warenkorb-Attribute sind der Grund, warum das Matching auf Shopify direkt ist. Es sind Schlüssel-Wert-Paare, die im Warenkorb gespeichert sind und die Shopify auf die Bestellung kopiert. Ein auf der Produktseite geschriebener Wert ist noch da, wenn der Webhook ankommt, auch wenn der Käufer die Dankeseite früh geschlossen hat.

Eine Ausnahme: Beschleunigte Checkout-Buttons wie Buy it now überspringen den Warenkorb. ROASaurus rät, sie auszuschalten, damit das Hinzufügen zum Warenkorb immer getrackt wird. Über sie aufgegebene Bestellungen können weiterhin über das Checkout-Token zugeordnet werden.

Eine Bestellung, von Anfang bis Ende

So läuft es für eine einzelne Bestellung aus einer Meta-Anzeige ab, bei installiertem benutzerdefiniertem Pixel:

Wann der Kauf gesendet wird: orders/paid oder orders/create

Welcher Webhook den Kauf auslöst, hängt davon ab, wie deine Kunden bezahlen. Du wählst ihn als Checkout-Typ in den Store settings.

ROASaurus hält jeden Kauf nach dem Eintreffen des Webhooks kurz zurück. In dieser Zeit kommt in der Regel auch das Event des abgeschlossenen Checkouts aus dem Browser an. Dessen Seiten-URL, IP-Adresse und User Agent werden dann dem Server-Event hinzugefügt, neben den Click-IDs aus dem Besucher-Datensatz. Bestellungen, die Shopify als Testbestellungen markiert, werden erfasst, aber nicht an die Werbeplattformen gesendet.

Wie die Deduplizierung mit den Browser-Pixeln funktioniert

Wenn die Browser-Pixel neben den Server-Events laufen, erhält die Plattform jeden Kauf zweimal und muss nur einen behalten. Das gelingt ihr über die Event-ID. ROASaurus gibt beiden Kopien eines Kaufs dieselbe ID, gebildet aus der Shopify-Bestell-ID: order-6123456789012 für die Bestellung mit der ID 6123456789012. Das ist die lange Zahl in der Admin-URL der Bestellung, nicht der Bestellname wie #1042. Das Checkout-Pixel nutzt sie für das Browser-Purchase, und der Server nutzt sie für das Event der Conversions API. Meta behält zum Beispiel eine Kopie, wenn Eventname und Event-ID übereinstimmen und beide innerhalb von 48 Stunden eintreffen.

Die Event-ID funktioniert nur zwischen Events, die sie tragen. Wenn eine andere App dasselbe Pixel sendet, haben deren Events eigene IDs, und die Plattform zählt die Bestellung erneut. Auf Shopify sind die üblichen Ursachen der Kanal Facebook & Instagram, der mit demselben Pixel verbunden ist, die TikTok-App und in theme.liquid eingefügter Pixel-Code. Unser Leitfaden zu doppelten Purchase-Events zeigt, wie du sie findest, und Doppelzählungen vermeiden listet die Lösungen auf.

Einwilligung über die Customer Privacy API von Shopify

Die Customer Privacy API von Shopify speichert die Cookie-Entscheidung jedes Besuchers. Dein Cookie-Banner befüllt sie, egal ob du das Banner von Shopify oder eine mit der API verbundene Einwilligungs-App nutzt. Skripte und Pixel können sie dann fragen, ob Marketing für diesen Besucher erlaubt ist.

Ist Respect visitor consent aktiviert, was in den Store settings die Standardeinstellung ist, fragen das ROASaurus-Storefront-Skript und die Checkout-Pixel die API, bevor sie tracken.

E-Mail-Adressen, Telefonnummern, Namen und Adressen werden mit SHA-256 gehasht, bevor sie an eine Werbeplattform gesendet werden. Drei weitere Details sind wichtig:

• Dein Banner entscheidet. ROASaurus folgt dem, was die API meldet. Ist die API auf der Seite nicht verfügbar, behandelt ROASaurus den Besucher als einwilligend, prüfe daher, ob dein Banner mit ihr verbunden ist.
• Die Landingpage bleibt an der Bestellung. Shopify speichert die Adresse der Landingpage bei jeder Bestellung, und sie kann Kampagnen-Tags und Click-IDs enthalten. ROASaurus verwendet sie in seinen eigenen Attributionsberichten, auch bei Besuchern, die abgelehnt haben, und sendet sie nicht an die Werbeplattformen.
• Das Senden der Bestellung ist eine rechtliche Entscheidung. Ob die bezahlte Bestellung eines Besuchers, der abgelehnt hat, überhaupt gesendet werden darf, ist eine Rechtsfrage für deinen Shop.

Unser Leitfaden zu Consent Mode v2 und DSGVO erklärt die Regeln im Überblick, und Einwilligung und Datenschutz nennt die Details.

So richtest du Server-Side-Tracking auf Shopify in ROASaurus ein

Führe die Einrichtungsschritte in dieser Reihenfolge aus:

1. Die App installieren

   Gehe zu Add a store, wähle Shopify, gib deine .myshopify.com-Domain ein und klicke auf Install app. Genehmige die App in Shopify. ROASaurus registriert die Bestell-Webhooks und aktiviert sein App-Pixel.

2. Die App-Einbettung im Theme aktivieren

   Klicke auf der Seite Tracking & platforms auf Open theme editor, aktiviere die App-Einbettung von ROASaurus und speichere.

3. Das Checkout-Pixel hinzufügen

   Gehe im Shopify admin zu Settings › Customer events und füge ein benutzerdefiniertes Pixel namens ROASaurus hinzu. Setze die Berechtigung auf Not required, weil das ROASaurus-Skript die Marketing-Entscheidung des Besuchers selbst prüft. Füge das Snippet von Tracking & platforms ein. Du brauchst dieses Pixel für Browser-Pixel im Checkout und für Google Ads.

4. Verbinde deine Werbeplattformen

   Klicke unter Tracking & platforms für jede Plattform auf Add pixel, oder für Meta auf Connect with Facebook. Lass die Option aktiviert, das Browser-Pixel zusätzlich zu laden, wenn du deduplizierte Browser-Events willst.

5. Die Store-Einstellungen prüfen

   Wähle in den Store settings deinen Checkout-Typ und lass Respect visitor consent aktiviert, wenn du dort verkaufst, wo eine Einwilligung erforderlich ist.

6. Andere Sender entfernen

   Entferne im Kanal Facebook & Instagram dieses Pixel aus den Einstellungen zur Datenfreigabe. Die Stufe der Datenfreigabe zu senken reicht nicht, denn jede Stufe, auch Standard, sendet das Meta-Pixel aus dem Browser. Wenn die TikTok-App dasselbe Pixel sendet, stoppe es auch dort, und entferne Pixel-Code aus deinem Theme.

Das benutzerdefinierte Pixel-Snippet sieht so aus. Kopiere es von Tracking & platforms, wo dein Store-Schlüssel bereits eingetragen ist. Die Shopify-Einrichtungsanleitung enthält dieselben Schritte.

self.tl = this; document.head.appendChild(document.createElement('script')).src = 'https://app.roasaurus.com/c.js?k=YOUR_STORE_KEY';

So prüfst du, ob es funktioniert

Teste mit einer echten Bestellung, bevor du dich auf die Zahlen verlässt:

1. Öffne deinen Shop mit ?roasaurus=connected am Ende der URL. Eine Meldung bestätigt, dass das Skript aktiv ist.
2. Füge für Meta den Code aus Events Manager › Test events in das Feld Test event code des Pixels ein.
3. Gib eine echte, günstige Bestellung auf und erstatte sie danach. Shopify-Testbestellungen werden nicht gesendet.
4. Im Event log wird die Server-Zustellung der Bestellung für jede Plattform als gesendet angezeigt, zusammen mit der Antwort der Plattform.
5. Prüfe in der Testansicht der Plattform, dass das Browser- und das Server-Purchase dieselbe Event-ID haben: order- plus die Shopify-Bestell-ID.
6. Entferne danach den Testcode.

Was Server-Side-Tracking auf Shopify nicht löst

• Abgelehnte Einwilligung. Bestellungen von Besuchern, die Marketing-Cookies abgelehnt haben, werden gesendet, aber ohne Click-ID, sodass die Werbeplattformen sie schlechter zuordnen.
• Die Cookie-Limits von Safari. Ein Käufer, der nach mehr als 7 Tagen zurückkehrt, kann wie ein neuer Besucher aussehen. Eine First-Party-Tracking-Subdomain hält die Erfassung auf deiner Domain, aber Safari kann diese Cookies trotzdem auf 7 Tage begrenzen.
• Unterschiede bei der Attribution. Jede Werbeplattform schreibt Verkäufe weiterhin mit ihren eigenen Fenstern und Modellen gut. Um Kanäle nach einheitlichen Regeln zu vergleichen, nutze deine eigene Attribution.
• Andere Apps am selben Pixel. Event-IDs führen nur Events zusammen, die sie teilen.

Was es behebt, ist der Kauf, der stattgefunden hat, aber die Werbeplattform nie erreicht hat, weil das Browser-Event verloren ging. Was ROASaurus an jede Plattform sendet, steht unter Server-Side-Tracking und auf der Shopify-Integration.

Quellen

1. Shopify: Customer Privacy API
2. Shopify: Authenticate app proxies
3. Shopify Help Center: Manage your custom pixels
4. Shopify Help Center: Facebook data sharing
5. Meta: Handling Duplicate Pixel and Conversions API Events

In ROASaurus

• Hilfe: ROASaurus in Shopify einrichten
• Shopify-Integration
• Server-Side-Tracking in ROASaurus
• Hilfe: Einwilligung und Datenschutz

Weiterlesen