Hur ställer jag in Facebook Pixel med Zonos äldre iframe Checkout?

Lägg till standard Meta Pixel-baskod på er sida som är värd för Checkout iframe, ställ in window.Zonos.facebookPixelId i er Checkout customHTML, aktivera Facebook Pixel i er Zonos-instrumentpanel och lägg till Zonos analyticsRelayOnInit.js-skriptet. Reläskriptet hanterar automatiskt kommunikationen över iframe och vidarebefordrar kassahändelser till Meta.

Vilka Facebook Pixel-evenemang spårar Zonos Checkout?

För varje trattsteg aktiverar Zonos både en anpassad händelse (zonos-checkout-start, zonos-checkout-customer-info, zonos-checkout-shipping-info, zonos-checkout-payment-info, zonos-checkout-payment-fail, zonos-checkout-success, zonos-checkout-close) och den matchande Meta-standardhändelsen där en sådan finns: InitiateCheckout för kassans start, AddPaymentInfo för betalningsinformation och Purchase för slutförd beställning.

Kan jag köra Google Analytics och Facebook Pixel samtidigt?

Ja. Samma analyticsRelayOnInit.js-skript hanterar båda leverantörerna i ett enda handslag. Lägg till båda bastaggarna på er sida, ställ in window.Zonos.googleAnalyticId och window.Zonos.facebookPixelId i customHTML och aktivera båda leverantörerna i er Zonos-instrumentpanel.

Hur felsöker jag Facebook Pixel-händelser från Zonos Checkout?

Lägg till frågeparametern zonosDebug=1 till er webbadress och öppna webbläsarens utvecklarkonsol för att se detaljerade loggar över relähandskakning och vidarebefordrade händelser. Chrome-tillägget Meta Pixel Helper är också användbart för att inspektera Pixel-samtal i realtid.

Checkout•

HemAPI-referens Checkout REST API Facebook Pixel

Facebook Pixel för iframe Checkout

Spåra hela kassan med Meta (Facebook) Pixel när ni använder en iframe-baserad äldre Checkout-integrering.

Säljare som använder den äldre Checkout-integrationen (iframe värd på iglobalstores.com) kan spåra Meta Pixel-händelser genom hela kassatratten. Zonos Checkout vidarebefordrar automatiskt analyshändelser från iframe till den överordnade sidan med samma lätta reläskript som används för Google Analytics 4, alltså händelser visas i er Meta Event Manager som om de kom från er egen webbplats.

För varje trattsteg sänds två händelser ut:

En anpassad händelse som heter zonos-checkout-... (via fbq('trackCustom', ...)) för anpassade målgrupper i hela tratten.
Den matchande Meta-standardhändelsen (via fbq('track', ...)) för inbyggd optimering, t.ex. InitiateCheckout, AddPaymentInfo och Purchase.

Integrerade integrationer behöver inte den här guiden. Om <zonos-checkout> återges direkt på er webbplats (ingen iframe), anropar Zonos er sidas window.fbq i stället — aktivera bara Facebook Pixel i Zonos-instrumentpanelen under Kassainställningar → Spårning och se till att er vanliga Meta Pixel-baskod laddas på sidan. Reläinställningen nedan krävs endast när Checkout är värd i en iframe med ett annat ursprung.

Hur det fungerar

Eftersom Zonos Checkout körs inuti en iframe på ett annat ursprung, är det kan inte direkt komma åt er sidas fbq-funktion. Reläsystemet löser detta med ett tvåstegs handslag (steg 1-2) följt av vidarebefordran av händelse (steg 3):

Checkout pingar föräldern -- När kassan laddas inuti iframe, den skickar ett meddelande till föräldrafönstret som indikerar att den är redo att vidarebefordras händelser, inklusive Pixel ID.
Föräldern erkänner -- Reläskriptet på er sida tar emot pinget, upptäcker (eller injicerar) er Meta Pixel-baskod och signalerar att den är redo att ta emot händelser.
Händelser vidarebefordras -- När kunderna går igenom kassan skickas varje analyshändelse via postMessage till er sida, där reläskriptet vidarebefordrar den till fbq med rätt track / trackCustom läge.

Alla meddelanden valideras mot betrodda Zonos-ursprung (zonos.com och iglobalstores.com) endast över HTTPS.

Förutsättningar

En Meta Pixel med ett Pixel-ID (en numerisk sträng, vanligtvis 15–16 siffror). Ni kan skapa en i Meta Events Manager.
En äldre Checkout-integrering som laddar Zonos Checkout i en iframe på er sida.
Facebook Pixel aktiverad i era Zonos Checkout-inställningar (i Zonos instrumentpanelen, under Kassainställningar -> Spårning).

Inställning

Steg 1: Lägg till Meta Pixel-baskoden på er sida

Om ni inte redan har Meta Pixel installerad på er webbplats, lägg till standard-Pixelbaskoden i <head> på sidan som är värd för Checkout iframe. Byt ut YOUR_PIXEL_ID mot ert eget numeriska Pixel-ID.

1

3<script>

4 !(function (f, b, e, v, n, t, s) {

5 if (f.fbq) return;

6 n = f.fbq = function () {

7 n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);

8 };

9 if (!f._fbq) f._fbq = n;

10 n.push = n;

11 n.loaded = !0;

12 n.version = '2.0';

13 n.queue = [];

14 t = b.createElement(e);

15 t.async = !0;

16 t.src = v;

17 s = b.getElementsByTagName(e)[0];

18 s.parentNode.insertBefore(t, s);

19 })(

20 window,

21 document,

22 'script',

23 'https://connect.facebook.net/en_US/fbevents.js',

24 );

25 fbq('init', 'YOUR_PIXEL_ID');

26 fbq('track', 'PageView');

27</script>

Obs! Om er webbplats redan har Meta Pixel installerad (t.ex. via Google Tag Manager, Shopifys inbyggda integration eller ett direktutdrag) kan ni hoppa över detta steg. Reläskriptet kommer att använda er befintliga fbq-funktion.

Du hittar det här utdraget i er Meta Event Manager under er Pixel Inställningar -> Fortsätt Pixelkonfiguration -> Installera koden manuellt.

Steg 2: Skicka ert Pixel-ID till Zonos Checkout

Berätta för Zonos Checkout vilket Pixel ID ni ska använda genom att ställa in window.Zonos.facebookPixelId inuti er Checkouts customHTML. Zonos instrumentpanel avslöjar en customHTML-redigerare under kassainställningar -- lägg till en <script>-tagg så här:

1<script>

2 window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';

3</script>

Detta värde skickas till föräldern under relähandskakningen. Om er förälder sidan inte redan har fbq laddad, reläskriptet kommer att injicera Meta Pixelbaskod för er som använder detta ID.

Steg 3: Lägg till Zonos analytics relay script

Lägg till följande skripttagg på samma sida som laddar Checkout iframe, efter Meta Pixel-baskoden. Det här är samma skript som används för Google Analytics 4 -- ett enda relä hanterar båda leverantörerna, så om ni redan har lagt till det för GA4, hoppa över detta steg.

1<script

2 async

3 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"

4></script>

Komplett exempel

Så här ser hela konfigurationen ut i er sidas <head>:

1<head>

2 

4 

6 <script>

7 !(function (f, b, e, v, n, t, s) {

8 if (f.fbq) return;

9 n = f.fbq = function () {

10 n.callMethod

11 ? n.callMethod.apply(n, arguments)

12 : n.queue.push(arguments);

13 };

14 if (!f._fbq) f._fbq = n;

15 n.push = n;

16 n.loaded = !0;

17 n.version = '2.0';

18 n.queue = [];

19 t = b.createElement(e);

20 t.async = !0;

21 t.src = v;

22 s = b.getElementsByTagName(e)[0];

23 s.parentNode.insertBefore(t, s);

24 })(

25 window,

26 document,

27 'script',

28 'https://connect.facebook.net/en_US/fbevents.js',

29 );

30 fbq('init', 'YOUR_PIXEL_ID');

31 fbq('track', 'PageView');

32 </script>

34 

36 <script

37 async

38 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"

39 ></script>

40</head>

Det är allt. När båda skripten finns på er sida är Facebook Pixel aktiverad i er Zonos instrumentpanel och customHTML ställer in Pixel ID, reläet automatiskt vidarebefordrar alla kassatratthändelser till Meta.

Meta Pixel händelsereferens

För varje steg i tratten aktiverar Zonos Checkout både en anpassad händelse (så att ni kan bygga exakta målgrupper) och det matchande Meta-standardevenemanget (så det syns upp i Metas optimerings- och konverteringsrapportering). Alla evenemang inkluderar en isTestMode-flaggan och checkoutSessionId.

Utlösare↕	Anpassad händelse (`fbq('trackCustom', ...)`)↕	Standardhändelse (`fbq('track', ...)`)↕	Ytterligare metadata↕
Kassan öppnar	`zonos-checkout-start`	`InitiateCheckout`	--
Shopper anger kundinformation	`zonos-checkout-customer-info`	ingen	--
Shopper väljer en fraktmetod	`zonos-checkout-shipping-info`	ingen	`serviceLevelId`
Shopper anger betalningsuppgifter	`zonos-checkout-payment-info`	`AddPaymentInfo`	`paymentMethod`
Betalningsförsök misslyckas	`zonos-checkout-payment-fail`	ingen	--
Beställningen slutförs framgångsrikt	`zonos-checkout-success`	ingen	`order_id`, `currency`, `value`, `contents`, `content_ids`
Beställning slutförs (e-handelshändelse)	`purchase`	`Purchase`	`order_id`, `currency`, `value`, `contents`, `content_ids`
Shopper stänger kassan	`zonos-checkout-close`	ingen	--

Steg utan en Meta-standardmotsvarighet (t.ex. kundinformation, fraktinformation) aktivera endast den anpassade zonos-checkout-...-händelsen. Ni kan rikta in er på dessa i Meta Ads Manager via anpassade målgrupper med "Event = zonos-checkout-customer-info", osv.

Köphändelsemetadata

Standardhändelsen Purchase följer Meta Pixel Purchase event schema. Varukorgsartiklar mappas från items-arrayen i GA-stil till Metas contents array:

Fält↕	Beskrivning↕
`value`	Totalt ordervärde
`currency`	Valutakod med tre bokstäver (t.ex. `USD`)
`order_id`	Zonos order-ID eller kassasessions-ID
`contents`	Uppsättning av kundvagnsartiklar, var och en med `id`, `quantity` och `item_price`
`content_ids`	Matris av artikel-ID:n (SKU, produkt-ID eller reservproduktnamn)
`content_type`	Alltid `"product"`
`num_items`	Total kvantitet för alla artiklar

Felsökning

För att aktivera felsökningsloggning för reläskriptet, lägg till zonosDebug=1-frågan parameter till er webbadress:

1https://www.yourstore.com/checkout?zonosDebug=1

Öppna webbläsarens utvecklarkonsol för att se detaljerade loggar över reläet handslag och vidarebefordrade händelser. Detta är användbart för att verifiera att:

Reläskriptet tar emot ping från kassans iframe.
Meta Pixel är konfigurerad med rätt Pixel-ID.
Händelser vidarebefordras till fbq med den förväntade track / trackCustom läge.

Den Meta Pixel Helper Chrome-tillägget är också användbart för att inspektera Pixel-samtal i realtid.

Vanliga frågor

Varför utlöses två händelser för samma steg (t.ex. `zonos-checkout-start` och `InitiateCheckout`)?

Metas standardhändelser driver konverteringsoptimering, annonsrapportering och lookalike publik utanför boxen. De anpassade zonos-checkout-...-händelserna låter er bygga mer detaljerade anpassade målgrupper på det exakta trattsteget, även när ingen Meta standardmotsvarighet finns (t.ex. kundinformation, fraktinformation). Avfyrar båda ger er det bästa av två världar utan att förlora någon signal.

Vad händer om jag kör både Google Analytics och Facebook Pixel?

Du behöver inte två reläskript -- samma analyticsRelayOnInit.js hanterar båda leverantörerna i ett enda handslag. Lägg till GA4-bastaggen och Meta Pixel baskod till er <head>, ställ in både window.Zonos.googleAnalyticId och window.Zonos.facebookPixelId i customHTML, och aktivera båda leverantörerna i er Zonos instrumentpanel. Varje evenemang sprids till vilken leverantör som helst som är aktiverad.

Vad händer om min överordnade sida inte har Meta Pixel installerad?

Om er customHTML ställer in window.Zonos.facebookPixelId och reläskriptet upptäcker ingen fbq på sidan, kommer den att injicera Meta Pixel-baskoden åt er under handskakningen med det Pixel-ID ni angav. Ni kan också förinstallera Meta Pixel-baskoden själva om ni vill avfyra PageView och andra händelser utanför kassan.

Spåras testorder?

Alla evenemang inkluderar ett isTestMode-fält. När Checkout är i testläge, händelser är fortfarande vidarebefordrade till Meta men flaggade med isTestMode: true. Ni kan filtrera dessa i Meta Ads Manager eller exkludera dem med anpassade konverteringsregler.

Ersätter Conversions API (CAPI) detta?

Nej – det här är en Pixel-integration på webbläsaren som körs i era kunders webbläsare. Meta Conversions API är en separat server-till-server-kanal som vissa handlare använder tillsammans med Pixel för redundans. De två kompletterar varandra och Zonos relä hanterar endast Pixel-sidan på webbläsaren.

Boka en demo