Server-side tracking på Shopify: så fungerar det och så sätter du upp det

Server-side tracking i Shopify innebär att varje köp når Meta, TikTok och andra annonsplattformar från din butiks orderdata, skickat av en server, och inte bara från en pixel i köparens webbläsare. Shopify rapporterar varje betald order till trackingappen via webhook, och appen skickar den till varje plattforms conversions API, matchad mot det annonsklick som förde köparen dit.

Den här guiden går igenom Shopify-delarna av det flödet: appinbäddningen i temat och app proxy, pixlar i kassan, webhooken orders/paid, ordermatchning, deduplicering, samtycke och uppsättningen i ROASaurus. För grundtanken, läs vad server-side tracking är först.

Så fungerar server-side tracking i Shopify

Klicket och köpet sker vid olika tidpunkter och på olika ställen. Klicket syns bara i webbläsaren, på landningssidan. Den betalda ordern är bara säker på Shopifys sida, när betalningen har genomförts. Server-side tracking registrerar det första, väntar på det andra och sätter ihop dem.

Shopify-delarna: appinbäddning, app proxy, pixlar och webhooks

En Shopify-butik ger en trackingapp fyra ställen att arbeta på. Var och en har olika uppgifter, och en komplett uppsättning använder alla fyra.

Appinbäddningen i temat och app proxy

En appinbäddning i temat är ett block som en app lägger till i ditt tema. Du slår på den i temaredigeraren, så det finns ingen kod att klistra in. Inbäddningen från ROASaurus laddar ett skript på varje sida. På landningssidan läser det klick-id:n som fbclid, ttclid och gclid samt UTM-parametrarna och lagrar dem med ett besökar-id från den egna domänen.

Skriptet skickar sina händelser via Shopifys app proxy. En app proxy vidarebefordrar anrop från en sökväg på din egen domän, till exempel yourstore.com/apps/roasaurus, till appens server. För webbläsaren är det ett anrop till din egen webbplats, vilket kan hjälpa mot annonsblockerare som blockerar kända trackingdomäner. Shopify tar bort Cookie-headern från anrop via app proxy och Set-Cookie-headern från svaren, så besökar-id:t färdas inuti själva händelsen, inte i en cookie.

Kundhändelser och pixlar i kassan

I Shopifys kassa körs trackingskript som pixlar i en sandbox, inte i själva sidan. Du hanterar dem under Settings › Customer events. Det finns två sorter. App-pixlar följer med en app och körs i en strikt sandbox. Anpassade pixlar läggs till av handlaren och körs i en mindre strikt sandbox, som kan ladda tredjepartsskript som Meta-pixeln.

ROASaurus använder båda. Dess app-pixel slås på när du installerar appen. Den rapporterar kassans start, kontaktsteget och den slutförda kassan till ROASaurus. Den valfria anpassade pixeln lägger till webbläsarpixlarna från Meta, TikTok, Snapchat, Pinterest och Reddit i kassan, och den skickar Google Ads-konverteringar.

Orderwebhooks

En webhook är ett meddelande som Shopify skickar till en app när något händer i butiken. ROASaurus prenumererar bland annat på orders/paid och orders/create. Ordern i webhooken innehåller order-id, värde, orderrader, kunduppgifter, varukorgs- och kassatokens, varukorgsattributen samt den IP-adress och webbläsare som ordern lades från. Den kommer från Shopifys servrar, så en annonsblockerare eller en stängd flik kan inte stoppa den.

Så matchas ordrar mot annonsklick

Webhooken talar om för ROASaurus att en order har betalats. För att skicka en användbar konvertering behöver ROASaurus också veta vilken besökare som la ordern, eftersom besökarposten innehåller klick-id:n. Den provar de här kopplingarna i ordning, från den mest direkta till den minst direkta:

Varukorgsattribut är anledningen till att matchningen är direkt i Shopify. De är nyckel-värde-par som lagras på varukorgen, och Shopify kopierar över dem till ordern. Ett värde som skrivits på produktsidan finns kvar när webhooken kommer, även om köparen stängde tacksidan i förtid.

Ett undantag: snabbkassaknappar som Buy it now hoppar över varukorgen. ROASaurus råder dig att stänga av dem, så att Add to cart alltid spåras. Ordrar som läggs via dem kan ändå matchas via kassans token.

En order, från början till slut

Så här går det till för en enskild order från en Meta-annons, med den anpassade pixeln installerad:

När köpet skickas: orders/paid eller orders/create

Vilken webhook som utlöser köpet beror på hur dina kunder betalar. Du väljer den som kassatyp i Store settings.

ROASaurus håller varje köp en kort stund efter att webhooken kommit in. Under den tiden kommer vanligtvis även händelsen för slutförd kassa från webbläsaren. Sidans URL, IP-adress och user agent läggs då till i serverhändelsen, tillsammans med klick-id:n från besökarposten. Ordrar som Shopify markerar som testordrar registreras men skickas inte till annonsplattformarna.

Så fungerar deduplicering med webbläsarpixlarna

När webbläsarpixlarna körs vid sidan av serverhändelserna får plattformen varje köp två gånger och måste behålla bara ett. Det gör den med händelse-id:t. ROASaurus ger båda kopiorna av ett köp samma id, byggt från Shopifys order-id: order-6123456789012 för ordern med id 6123456789012. Det är det långa numret i orderns admin-URL, inte ordernamnet som #1042. Kassapixeln använder det för webbläsarens Purchase, och servern använder det för conversions API-händelsen. Meta behåller till exempel en kopia när händelsenamnet och händelse-id:t stämmer överens och båda kommer in inom 48 timmar.

Händelse-id:t fungerar bara mellan händelser som bär det. Om en annan app skickar samma pixel har dess händelser egna id:n, och plattformen räknar ordern igen. I Shopify är de vanliga orsakerna kanalen Facebook & Instagram kopplad till samma pixel, TikTok-appen och pixelkod som har klistrats in i theme.liquid. Vår guide om dubbla köphändelser visar hur du hittar dem, och Förhindra dubbelräkning listar åtgärderna.

Samtycke via Shopifys Customer Privacy API

Shopifys Customer Privacy API lagrar varje besökares cookieval. Din cookiebanner fyller i det, oavsett om du använder Shopifys egen banner eller en samtyckesapp som är kopplad till API:et. Skript och pixlar kan sedan fråga det om marknadsföring är tillåten för den här besökaren.

Med Respect visitor consent påslaget, vilket är standard i Store settings, frågar ROASaurus-skriptet i butiken och kassapixlarna API:et innan de spårar.

E-postadresser, telefonnummer, namn och adresser hashas med SHA-256 innan de skickas till en annonsplattform. Ytterligare tre detaljer spelar roll:

• Din banner avgör. ROASaurus följer det som API:et rapporterar. Om API:et inte är tillgängligt på sidan behandlar ROASaurus besökaren som samtyckande, så kontrollera att din banner är kopplad till det.
• Landningssidan finns kvar på ordern. Shopify lagrar landningssidans adress med varje order, och den kan innehålla kampanjtaggar och klick-id:n. ROASaurus använder den i sina egna attributionsrapporter, även för besökare som tackade nej, och skickar den inte till annonsplattformarna.
• Att skicka ordern är ett juridiskt beslut. Om den betalda ordern från en besökare som tackat nej alls får skickas är en juridisk fråga för din butik.

Vår guide om Consent Mode v2 och GDPR förklarar reglerna på en övergripande nivå, och Samtycke och integritet har detaljerna.

Så sätter du upp server-side tracking i Shopify med ROASaurus

Gör uppsättningen i den här ordningen:

1. Installera appen

   Gå till Add a store, välj Shopify, ange din .myshopify.com-domän och klicka på Install app. Godkänn appen i Shopify. ROASaurus registrerar orderwebhooks och slår på sin app-pixel.

2. Slå på appinbäddningen i temat

   Klicka på Open theme editor på sidan Tracking & platforms, slå på ROASaurus-appinbäddningen och spara.

3. Lägg till kassapixeln

   Gå till Settings › Customer events i Shopify admin och lägg till en anpassad pixel med namnet ROASaurus. Ställ in dess behörighet på Not required, eftersom ROASaurus-skriptet själv kontrollerar besökarens marknadsföringsval. Klistra in snippeten från Tracking & platforms. Du behöver den här pixeln för webbläsarpixlar i kassan och för Google Ads.

4. Anslut dina annonsplattformar

   Klicka på Add pixel för varje plattform på Tracking & platforms, eller på Connect with Facebook för Meta. Låt alternativet att även ladda webbläsarpixeln vara påslaget om du vill ha deduplicerade webbläsarhändelser.

5. Kontrollera butiksinställningarna

   Välj din kassatyp i Store settings och låt Respect visitor consent vara påslaget om du säljer där samtycke krävs.

6. Ta bort andra avsändare

   Ta bort den här pixeln från inställningarna för datadelning i kanalen Facebook & Instagram. Det räcker inte att sänka nivån på datadelningen, eftersom varje nivå, även Standard, skickar Meta-pixeln från webbläsaren. Om TikTok-appen skickar samma pixel, stäng av den där också och ta bort pixelkod från ditt tema.

Snippeten för den anpassade pixeln ser ut så här. Kopiera den från Tracking & platforms, där din butiksnyckel redan är ifylld. Uppsättningsguiden för Shopify har samma steg.

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

Så kontrollerar du att det fungerar

Testa med en riktig order innan du litar på siffrorna:

1. Öppna din butik med ?roasaurus=connected i slutet av URL:en. Ett meddelande bekräftar att skriptet är aktivt.
2. För Meta klistrar du in koden från Events Manager › Test events i fältet Test event code för pixeln.
3. Lägg en riktig order med lågt pris och återbetala den efteråt. Testordrar i Shopify skickas inte.
4. I Event log visas serverleveransen för ordern som skickad för varje plattform, med plattformens svar.
5. Kontrollera i plattformens testvy att Purchase från webbläsaren och från servern delar händelse-id:t order- plus Shopifys order-id.
6. Ta bort testhändelsekoden efteråt.

Vad server-side tracking i Shopify inte löser

• Nekat samtycke. Ordrar från besökare som tackat nej till marknadsföringscookies skickas, men utan klick-id, så annonsplattformarna matchar dem sämre.
• Safaris cookiebegränsningar. En köpare som kommer tillbaka efter mer än 7 dagar kan se ut som en ny besökare. En förstapartssubdomän för tracking håller insamlingen på din domän, men Safari kan ändå begränsa de cookies till 7 dagar.
• Attributionsskillnader. Varje annonsplattform tillskriver fortfarande försäljning med egna fönster och modeller. För att jämföra kanaler med en och samma uppsättning regler använder du din egen attribution.
• Andra appar på samma pixel. Händelse-id:n slår bara ihop händelser som delar dem.

Det den löser är köpet som inträffade men aldrig nådde annonsplattformen eftersom webbläsarhändelsen gick förlorad. För vad ROASaurus skickar till varje plattform, se server-side tracking och Shopify-integrationen.

Källor

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

I ROASaurus

• Hjälp: sätt upp ROASaurus på Shopify
• Shopify-integration
• Server-side tracking i ROASaurus
• Hjälp: samtycke och integritet

Läs vidare