Comment configurer Facebook Pixel avec Zonos Checkout legacy iframe ?

Ajoutez le code de base Meta Pixel standard à la page qui héberge l'iframe Checkout, définissez window.Zonos.facebookPixelId dans le customHTML de votre Checkout, activez Facebook Pixel dans votre Dashboard Zonos, et ajoutez le script Zonos analyticsRelayOnInit.js. Le script de relais gère automatiquement la communication inter-iframe et transmet les événements de checkout à Meta.

Quels événements Facebook Pixel Zonos Checkout suit-il ?

Pour chaque étape de l'entonnoir, Zonos déclenche à la fois un événement personnalisé (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) et l'événement standard Meta correspondant lorsqu'il en existe un : InitiateCheckout pour le début du checkout, AddPaymentInfo pour les informations de paiement, et Purchase pour la finalisation de commande.

Puis-je utiliser Google Analytics et Facebook Pixel en même temps ?

Oui. Le même script analyticsRelayOnInit.js gère les deux fournisseurs dans une seule poignée de main. Ajoutez les deux balises de base à votre page, définissez window.Zonos.googleAnalyticId et window.Zonos.facebookPixelId dans customHTML, et activez les deux fournisseurs dans votre Dashboard Zonos.

Checkout•

AccueilRéférence API Checkout REST API Facebook Pixel

Facebook Pixel pour iframe Checkout

Q: Comment déboguer les événements Facebook Pixel de Zonos Checkout ?

Ajoutez le paramètre de requête zonosDebug=1 à l'URL de votre page et ouvrez la console développeur de votre navigateur pour voir les journaux détaillés de la poignée de main du relais et des événements transférés. L'extension Chrome Meta Pixel Helper est également utile pour inspecter les appels Pixel en temps réel.

Suivez l'entonnoir complet de checkout avec Meta (Facebook) Pixel lorsque vous utilisez une intégration Checkout legacy basée sur iframe.

Les marchands utilisant l'intégration Checkout legacy (iframe hébergée sur iglobalstores.com) peuvent suivre les événements Meta Pixel sur l'ensemble de l'entonnoir de checkout. Zonos Checkout relaie automatiquement les événements analytiques depuis l'iframe vers la page parente à l'aide du même script de relais léger utilisé pour Google Analytics 4, de sorte que les événements apparaissent dans votre Meta Events Manager comme s'ils provenaient de votre propre site.

Pour chaque étape de l'entonnoir, deux événements sont émis :

Un événement personnalisé nommé zonos-checkout-... (via fbq('trackCustom', ...)) pour des audiences personnalisées sur l'entonnoir complet.
L'événement standard Meta correspondant (via fbq('track', ...)) pour l'optimisation intégrée, par ex. InitiateCheckout, AddPaymentInfo et Purchase.

Les intégrations natives n'ont pas besoin de ce guide. Si <zonos-checkout> s'affiche directement sur votre site (sans iframe), Zonos appelle la fonction window.fbq de votre page sur place — activez simplement Facebook Pixel dans le Dashboard Zonos sous Checkout settings → Tracking et assurez-vous que votre code de base Meta Pixel habituel est chargé sur la page. La configuration du relais ci-dessous n'est requise que lorsque Checkout est hébergé dans une iframe sur une origine différente.

Fonctionnement

Comme Zonos Checkout s'exécute dans une iframe sur une origine différente, il ne peut pas accéder directement à la fonction fbq de votre page. Le système de relais résout ce problème avec une poignée de main en deux étapes (étapes 1-2) suivie du transfert d'événements (étape 3) :

Checkout envoie un ping au parent — Lorsque le checkout se charge dans l'iframe, il envoie un message à la fenêtre parente indiquant qu'il est prêt à relayer les événements, y compris l'ID Pixel.
Le parent accuse réception — Le script de relais sur votre page reçoit le ping, détecte (ou injecte) votre code de base Meta Pixel et signale qu'il est prêt à recevoir les événements.
Les événements sont transférés — Au fur et à mesure que les acheteurs progressent dans le checkout, chaque événement analytique est envoyé via postMessage à votre page, où le script de relais le transmet à fbq avec le mode track / trackCustom approprié.

Tous les messages sont validés par rapport aux origines Zonos de confiance (zonos.com et iglobalstores.com) en HTTPS uniquement.

Prérequis

Un Meta Pixel avec un ID Pixel (chaîne numérique, généralement 15-16 chiffres). Vous pouvez en créer un dans Meta Events Manager.
Une intégration Checkout legacy qui charge Zonos Checkout dans une iframe sur votre page.
Facebook Pixel activé dans vos paramètres Zonos Checkout (dans le Dashboard Zonos, sous Checkout settings -> Tracking).

Configuration

Étape 1 : Ajouter le code de base Meta Pixel à votre page

Si vous n'avez pas encore Meta Pixel installé sur votre site, ajoutez le code de base Pixel standard dans le <head> de la page qui héberge l'iframe Checkout. Remplacez YOUR_PIXEL_ID par votre propre ID Pixel numérique.

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>

Note : Si votre site a déjà Meta Pixel installé (par ex. via Google Tag Manager, l'intégration native Shopify ou un extrait direct), vous pouvez ignorer cette étape. Le script de relais utilisera votre fonction fbq existante.

Vous trouverez cet extrait dans votre Meta Events Manager sous votre Pixel Settings -> Continue Pixel Setup -> Install code manually.

Étape 2 : Transmettre votre ID Pixel à Zonos Checkout

Indiquez à Zonos Checkout quel ID Pixel utiliser en définissant window.Zonos.facebookPixelId dans le customHTML de votre Checkout. Le Dashboard Zonos expose un éditeur customHTML sous Checkout settings — ajoutez une balise <script> comme ceci :

1<script>

2 window.Zonos.facebookPixelId = "YOUR_PIXEL_ID";

3</script>

Cette valeur est envoyée au parent lors de la poignée de main du relais. Si votre page parente n'a pas déjà fbq chargé, le script de relais injectera le code de base Meta Pixel pour vous en utilisant cet ID.

Étape 3 : Ajouter le script de relais analytique Zonos

Ajoutez la balise script suivante sur la même page qui charge l'iframe Checkout, après le code de base Meta Pixel. Il s'agit du même script utilisé pour Google Analytics 4 — un seul relais gère les deux fournisseurs. Si vous l'avez déjà ajouté pour GA4, ignorez cette étape.

1<script

2 async

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

4></script>

Exemple complet

Voici à quoi ressemble la configuration complète dans le <head> de votre page :

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>

Voilà. Une fois les deux scripts sur votre page, Facebook Pixel activé dans votre Dashboard Zonos, et customHTML définissant l'ID Pixel, le relais transmet automatiquement tous les événements de l'entonnoir de checkout à Meta.

Référence des événements Meta Pixel

Pour chaque étape de l'entonnoir, Zonos Checkout déclenche à la fois un événement personnalisé (pour que vous puissiez construire des audiences précises) et l'événement standard Meta correspondant (pour qu'il apparaisse dans l'optimisation et les rapports de conversion Meta). Tous les événements incluent un indicateur isTestMode et le checkoutSessionId.

Déclencheur↕	Événement personnalisé (`fbq('trackCustom', ...)`)↕	Événement standard (`fbq('track', ...)`)↕	Métadonnées supplémentaires↕
Ouverture du checkout	`zonos-checkout-start`	`InitiateCheckout`	--
L'acheteur saisit ses informations client	`zonos-checkout-customer-info`	none	--
L'acheteur sélectionne un mode d'expédition	`zonos-checkout-shipping-info`	none	`serviceLevelId`
L'acheteur saisit les détails de paiement	`zonos-checkout-payment-info`	`AddPaymentInfo`	`paymentMethod`
Échec de la tentative de paiement	`zonos-checkout-payment-fail`	none	--
Commande finalisée avec succès	`zonos-checkout-success`	none	`order_id`, `currency`, `value`, `contents`, `content_ids`
Commande finalisée (événement e-commerce)	`purchase`	`Purchase`	`order_id`, `currency`, `value`, `contents`, `content_ids`
L'acheteur ferme le checkout	`zonos-checkout-close`	none	--

Les étapes sans équivalent standard Meta (par ex. informations client, informations d'expédition) déclenchent uniquement l'événement personnalisé zonos-checkout-.... Vous pouvez les cibler dans Meta Ads Manager via des audiences personnalisées en utilisant « Event = zonos-checkout-customer-info », etc.

Métadonnées de l'événement Purchase

L'événement standard Purchase suit le schéma de l' événement Meta Pixel Purchase . Les articles du panier sont mappés depuis le tableau items de style GA vers le tableau Meta contents :

Champ↕	Description↕
`value`	Valeur totale de la commande
`currency`	Code devise à trois lettres (par ex. `USD`)
`order_id`	ID de commande Zonos ou ID de session checkout
`contents`	Tableau d'articles du panier, chacun avec `id`, `quantity` et `item_price`
`content_ids`	Tableau d'IDs d'articles (SKU, ID produit ou nom de produit de secours)
`content_type`	Toujours `"product"`
`num_items`	Quantité totale sur tous les articles

Débogage

Pour activer la journalisation de débogage du script de relais, ajoutez le paramètre de requête zonosDebug=1 à l'URL de votre page :

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

Ouvrez la console développeur de votre navigateur pour voir les journaux détaillés de la poignée de main du relais et des événements transférés. Cela est utile pour vérifier que :

Le script de relais reçoit le ping de l'iframe checkout.
Meta Pixel est configuré avec le bon ID Pixel.
Les événements sont transférés vers fbq avec le mode track / trackCustom attendu.

L'extension Chrome Meta Pixel Helper est également utile pour inspecter les appels Pixel en temps réel.

Questions fréquentes

Pourquoi deux événements sont-ils déclenchés pour la même étape (par ex. `zonos-checkout-start` et `InitiateCheckout`) ?

Les événements standard Meta alimentent l'optimisation des conversions, les rapports publicitaires et les audiences similaires prêtes à l'emploi. Les événements personnalisés zonos-checkout-... vous permettent de construire des audiences personnalisées plus granulaires sur l'étape exacte de l'entonnoir, même lorsqu'il n'existe pas d'équivalent standard Meta (par ex. informations client, informations d'expédition). Déclencher les deux vous offre le meilleur des deux mondes sans perdre de signal.

Que faire si j'utilise à la fois Google Analytics et Facebook Pixel ?

Vous n'avez pas besoin de deux scripts de relais — le même analyticsRelayOnInit.js gère les deux fournisseurs dans une seule poignée de main. Ajoutez la balise de base GA4 et le code de base Meta Pixel à votre <head>, définissez window.Zonos.googleAnalyticId et window.Zonos.facebookPixelId dans customHTML, et activez les deux fournisseurs dans votre Dashboard Zonos. Chaque événement est distribué aux fournisseurs activés.

Que faire si ma page parente n'a pas Meta Pixel installé ?

Si votre customHTML définit window.Zonos.facebookPixelId et que le script de relais ne détecte pas de fbq sur la page, il injectera le code de base Meta Pixel pour vous lors de la poignée de main en utilisant l'ID Pixel que vous avez fourni. Vous pouvez également préinstaller le code de base Meta Pixel vous-même si vous souhaitez déclencher PageView et d'autres événements en dehors de l'entonnoir de checkout.

Les commandes de test sont-elles suivies ?

Tous les événements incluent un champ isTestMode. Lorsque Checkout est en mode test, les événements sont toujours relayés vers Meta mais marqués avec isTestMode: true. Vous pouvez les filtrer dans Meta Ads Manager ou les exclure avec des règles de conversion personnalisées.

L'API Conversions (CAPI) remplace-t-elle ceci ?

Non — il s'agit d'une intégration Pixel côté navigateur qui s'exécute dans les navigateurs de vos acheteurs. L'API Conversions Meta est un canal serveur-à-serveur distinct que certains marchands utilisent aux côtés du Pixel pour la redondance. Les deux sont complémentaires et le relais Zonos ne gère que le Pixel côté navigateur.

Réserver une démo