Conversion-Pixel auf Shopify

Shopify unterstützt das Einfügen eines rohen <script>-Tags im Checkout nicht mehr — Tracking von Drittanbietern läuft über Custom Pixels, eine sandboxed Umgebung, die auf Shopifys Customer Events API aufbaut. Diese Anleitung zeigt, wie Sie das Styrar-Conversion-Pixel in ein Custom Pixel einbinden.

Die Sandbox gibt Ihnen keinen direkten DOM-Zugriff, daher rufen Sie statt des Einbindens von Styrars Script-Tag den Tracking-Endpunkt direkt mit fetch auf, sobald ein Shopify-Customer-Event ausgelöst wird.

Einrichtung

1. Gehen Sie in Ihrem Shopify-Admin zu Settings → Customer events → Add custom pixel.

2. Benennen Sie es (z. B. „Styrar conversions") und fügen Sie Code wie diesen hinzu:

   JavaScript

   analytics.subscribe('checkout_completed', (event) => {
     const url = new URL(window.location.href);
     const clickToken = url.searchParams.get('styrar_ck') ||
       (typeof localStorage !== 'undefined' && localStorage.getItem('styrar_ck'));
     if (!clickToken) return;
   
     fetch('https://api.styrar.com/v1/pixel/track', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         clickToken,
         eventName: 'purchase',
         value: event.data.checkout.totalPrice.amount,
         eventData: { currency: event.data.checkout.totalPrice.currencyCode },
       }),
       keepalive: true,
     });
   });
   

   Abonnieren Sie das Event, das zu der Conversion passt, die Sie messen möchten — checkout_completed, payment_info_submitted, product_added_to_cart und weitere sind alle verfügbar.

3. Netzwerkzugriff erlauben. Shopify blockiert ausgehende Anfragen von Custom Pixels standardmäßig. Fügen Sie in den Einstellungen desselben Pixels api.styrar.com unter Permissions → Connect to third-party servers hinzu, sonst schlägt die obige Anfrage stillschweigend fehl.

4. Setzen Sie das Pixel auf Active.

Hinweis zum Click-Token

Die Pixel-Sandbox von Shopify kann localStorage nicht wie eine normale Seite lesen, daher muss styrar_ck zum Zeitpunkt des Events noch in der URL vorhanden sein (oder als Cart-Attribut mitgeführt werden). Wenn Ihr Checkout-Flow den Query-Parameter vor checkout_completed entfernt, erfassen Sie das Token früher — bei page_viewed — und speichern Sie es als Cart-Attribut, um es später wieder auslesen zu können.

Dies verwendet weiterhin genau denselben öffentlichen, unauthentifizierten POST /v1/pixel/track-Endpunkt wie jede andere Plattform — es gibt keine Shopify-spezifische App, die auf Styrars Seite installiert werden müsste.

Verwandte Themen

• Conversion-Pixel — vollständige Referenz