Hoe stel ik Facebook Pixel in met legacy iframe Checkout van Zonos?

Voeg de standaard Meta Pixel-basiscode toe aan de pagina die het Checkout-iframe host, stel window.Zonos.facebookPixelId in in uw Checkout customHTML, schakel Facebook Pixel in uw Zonos Dashboard in en voeg het Zonos analyticsRelayOnInit.js-script toe. Het relay-script handelt automatisch cross-iframe communicatie af en stuurt checkout-events door naar Meta.

Welke Facebook Pixel-events volgt Zonos Checkout?

Voor elke funnelstap verstuurt Zonos zowel een custom event (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) als het bijbehorende Meta standaardevent waar dat bestaat: InitiateCheckout bij checkout start, AddPaymentInfo bij betalingsinfo en Purchase bij orderafronding.

Kan ik Google Analytics en Facebook Pixel tegelijk gebruiken?

Ja. Hetzelfde analyticsRelayOnInit.js-script verwerkt beide providers in één handshake. Voeg beide basis tags toe aan uw pagina, stel window.Zonos.googleAnalyticId en window.Zonos.facebookPixelId in in customHTML en schakel beide providers in uw Zonos Dashboard in.

Checkout•

StartpaginaAPI-referentie Checkout REST API Facebook Pixel

Facebook Pixel voor iframe Checkout

Q: Hoe debug ik Facebook Pixel-events van Zonos Checkout?

Voeg de queryparameter zonosDebug=1 toe aan uw pagina-URL en open de developer console van uw browser om gedetailleerde logs te zien van de relay-handshake en doorgestuurde events. De Meta Pixel Helper Chrome-extensie is ook nuttig om Pixel-aanroepen in realtime te inspecteren.

Volg de volledige checkout funnel met Meta (Facebook) Pixel bij een iframe-gebaseerde legacy Checkout-integratie.

Merchants die de legacy Checkout-integratie gebruiken (iframe gehost op iglobalstores.com) kunnen Meta Pixel-events over de volledige checkout funnel volgen. Zonos Checkout stuurt analytics-events automatisch door vanuit het iframe naar de parentpagina met hetzelfde lichtgewicht relay-script dat wordt gebruikt voor Google Analytics 4, zodat events in uw Meta Events Manager verschijnen alsof ze vanaf uw eigen site afkomstig zijn.

Voor elke funnelstap worden twee events verzonden:

Een custom event genaamd zonos-checkout-... (via fbq('trackCustom', ...)) voor full-funnel custom audiences.
Het bijbehorende Meta standaardevent (via fbq('track', ...)) voor ingebouwde optimalisatie, bijv. InitiateCheckout, AddPaymentInfo en Purchase.

Native integraties hebben deze gids niet nodig. Als <zonos-checkout> direct op uw site rendert (geen iframe), roept Zonos de window.fbq van uw pagina aan — schakel Facebook Pixel in het Zonos Dashboard in onder Checkout settings → Tracking en zorg dat uw gebruikelijke Meta Pixel-basiscode op de pagina is geladen. De relay-setup hieronder is alleen vereist wanneer Checkout in een iframe op een andere origin wordt gehost.

Hoe het werkt

Omdat Zonos Checkout in een iframe op een andere origin draait, kan het niet rechtstreeks toegang krijgen tot de fbq-functie van uw pagina. Het relay-systeem lost dit op met een tweestaps-handshake (stappen 1-2) gevolgd door event forwarding (stap 3):

Checkout pingt de parent -- Wanneer de checkout in het iframe laadt, stuurt deze een bericht naar het parentvenster dat aangeeft dat events kunnen worden doorgestuurd, inclusief de Pixel-ID.
Parent bevestigt -- Het relay-script op uw pagina ontvangt de ping, detecteert (of injecteert) uw Meta Pixel-basiscode en signaleert terug dat het klaar is om events te ontvangen.
Events worden doorgestuurd -- Terwijl shoppers door checkout gaan, wordt elk analytics-event via postMessage naar uw pagina gestuurd, waar het relay-script het doorstuurt naar fbq met de juiste track / trackCustom-modus.

Alle berichten worden alleen via HTTPS gevalideerd tegen vertrouwde Zonos-origins (zonos.com en iglobalstores.com).

Vereisten

Een Meta Pixel met een Pixel-ID (een numerieke string, doorgaans 15-16 cijfers). U kunt er een aanmaken in Meta Events Manager.
Een legacy Checkout-integratie die Zonos Checkout in een iframe op uw pagina laadt.
Facebook Pixel ingeschakeld in uw Zonos Checkout-instellingen (in het Zonos Dashboard, onder Checkout settings -> Tracking).

Setup

Stap 1: Voeg de Meta Pixel-basiscode toe aan uw pagina

Als Meta Pixel nog niet op uw site is geïnstalleerd, voeg dan de standaard Pixel-basiscode toe aan de <head> van de pagina die het Checkout-iframe host. Vervang YOUR_PIXEL_ID door uw eigen numerieke 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>

Opmerking: Als uw site Meta Pixel al heeft geïnstalleerd (bijv. via Google Tag Manager, de native Shopify-integratie of een direct snippet), kunt u deze stap overslaan. Het relay-script gebruikt uw bestaande fbq-functie.

U vindt dit snippet in uw Meta Events Manager onder uw Pixel Settings -> Continue Pixel Setup -> Install code manually.

Stap 2: Geef uw Pixel-ID door aan Zonos Checkout

Geef Zonos Checkout door welke Pixel-ID moet worden gebruikt door window.Zonos.facebookPixelId in te stellen in de customHTML van uw Checkout. Het Zonos Dashboard biedt een customHTML-editor onder Checkout settings -- voeg een <script>-tag toe zoals deze:

1<script>

2 window.Zonos.facebookPixelId = "YOUR_PIXEL_ID";

3</script>

Deze waarde wordt tijdens de relay-handshake naar de parent gestuurd. Als uw parentpagina nog geen fbq heeft geladen, injecteert het relay-script de Meta Pixel-basiscode voor u met dit ID.

Stap 3: Voeg het Zonos analytics relay-script toe

Voeg de volgende script-tag toe aan dezelfde pagina die het Checkout-iframe laadt, na de Meta Pixel-basiscode. Dit is hetzelfde script dat wordt gebruikt voor Google Analytics 4 -- één relay verwerkt beide providers, dus als u het al voor GA4 hebt toegevoegd, sla deze stap over.

1<script

2 async

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

4></script>

Volledig voorbeeld

Zo ziet de volledige setup eruit in de <head> van uw pagina:

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>

Dat is alles. Zodra beide scripts op uw pagina staan, Facebook Pixel is ingeschakeld in uw Zonos Dashboard en customHTML het Pixel-ID instelt, stuurt de relay automatisch alle checkout funnel-events door naar Meta.

Meta Pixel events-referentie

Voor elke stap in de funnel verstuurt Zonos Checkout zowel een custom event (zodat u precieze audiences kunt opbouwen) als het bijbehorende Meta standaardevent (zodat het verschijnt in de optimalisatie- en conversierapportage van Meta). Alle events bevatten een isTestMode-flag en de checkoutSessionId.

Trigger↕	Custom event (`fbq('trackCustom', ...)`)↕	Standaardevent (`fbq('track', ...)`)↕	Extra metadata↕
Checkout opent	`zonos-checkout-start`	`InitiateCheckout`	--
Shopper voert klantgegevens in	`zonos-checkout-customer-info`	none	--
Shopper selecteert verzendmethode	`zonos-checkout-shipping-info`	none	`serviceLevelId`
Shopper voert betalingsgegevens in	`zonos-checkout-payment-info`	`AddPaymentInfo`	`paymentMethod`
Betalingspoging mislukt	`zonos-checkout-payment-fail`	none	--
Order voltooid	`zonos-checkout-success`	none	`order_id`, `currency`, `value`, `contents`, `content_ids`
Order voltooid (e-commerce event)	`purchase`	`Purchase`	`order_id`, `currency`, `value`, `contents`, `content_ids`
Shopper sluit checkout	`zonos-checkout-close`	none	--

Stappen zonder Meta standaard equivalent (bijv. klantgegevens, verzendinfo) versturen alleen het custom zonos-checkout-...-event. U kunt deze targeten in Meta Ads Manager via custom audiences met "Event = zonos-checkout-customer-info", enz.

Purchase event-metadata

Het Purchase standaardevent volgt het Meta Pixel Purchase event-schema. Winkelwagenitems worden gemapt vanuit de GA-style items-array naar Meta's contents-array:

Veld↕	Beschrijving↕
`value`	Totaal orderbedrag
`currency`	Valutacode van drie letters (bijv. `USD`)
`order_id`	Zonos order-ID of checkout session-ID
`contents`	Array van winkelwagenitems, elk met `id`, `quantity` en `item_price`
`content_ids`	Array van item-ID's (SKU, product-ID of fallback productnaam)
`content_type`	Altijd `"product"`
`num_items`	Totale hoeveelheid over alle items

Debuggen

Schakel debug logging voor het relay-script in door de queryparameter zonosDebug=1 toe te voegen aan uw pagina-URL:

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

Open de developer console van uw browser om gedetailleerde logs te zien van de relay- handshake en doorgestuurde events. Dit is nuttig om te verifiëren dat:

Het relay-script de ping van het checkout-iframe ontvangt.
Meta Pixel is geconfigureerd met de juiste Pixel-ID.
Events worden doorgestuurd naar fbq met de verwachte track / trackCustom-modus.

De Meta Pixel Helper Chrome-extensie is ook nuttig om Pixel-aanroepen in realtime te inspecteren.

Veelgestelde vragen

Waarom worden twee events verzonden voor dezelfde stap (bijv. `zonos-checkout-start` en `InitiateCheckout`)?

Meta's standaardevents ondersteunen conversie-optimalisatie, advertentierapportage en lookalike- audiences out of the box. De custom zonos-checkout-...-events laten u meer granulaire custom audiences opbouwen op de exacte funnelstap, zelfs wanneer geen Meta- standaard equivalent bestaat (bijv. klantgegevens, verzendinfo). Beide versturen geeft u het beste van beide werelden zonder signaalverlies.

Wat als ik zowel Google Analytics als Facebook Pixel gebruik?

U hebt geen twee relay-scripts nodig -- hetzelfde analyticsRelayOnInit.js verwerkt beide providers in één handshake. Voeg de GA4-basistag en de Meta Pixel- basiscode toe aan uw <head>, stel zowel window.Zonos.googleAnalyticId als window.Zonos.facebookPixelId in customHTML in en schakel beide providers in uw Zonos Dashboard in. Elk event wordt doorgestuurd naar de providers die zijn ingeschakeld.

Wat als mijn parentpagina Meta Pixel niet heeft geïnstalleerd?

Als uw customHTML window.Zonos.facebookPixelId instelt en het relay-script geen fbq op de pagina detecteert, injecteert het de Meta Pixel-basiscode voor u tijdens de handshake met het Pixel-ID dat u hebt opgegeven. U kunt de Meta Pixel- basiscode ook zelf vooraf installeren als u PageView en andere events buiten de checkout funnel wilt versturen.

Worden testorders gevolgd?

Alle events bevatten een isTestMode-veld. Wanneer Checkout in testmodus staat, worden events nog steeds doorgestuurd naar Meta maar gemarkeerd met isTestMode: true. U kunt deze uitfilteren in Meta Ads Manager of uitsluiten met custom conversion rules.

Vervangt Conversions API (CAPI) dit?

Nee -- dit is een browser-side Pixel-integratie die in de browsers van uw shoppers draait. De Meta Conversions API is een apart server-to-server-kanaal dat sommige merchants naast de Pixel gebruiken voor redundantie. Beide vullen elkaar aan en de relay van Zonos verwerkt alleen de browser-side Pixel.

Boek een demo