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 àfbqavec le modetrack/trackCustomapproprié.
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.
<!-- Meta Pixel Code --> <script> !(function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s); })( window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', ); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView');</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
fbqexistante.
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 :
<script> window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';</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.
<script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"></script>Exemple complet
Voici à quoi ressemble la configuration complète dans le <head> de votre page :
<head> <!-- ... vos balises head existantes ... --> <!-- Meta Pixel Code --> <script> !(function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s); })( window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', ); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView'); </script> <!-- Relais analytique Zonos pour iframe checkout --> <script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js" ></script></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 :
https://www.yourstore.com/checkout?zonosDebug=1Ouvrez 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
fbqavec le modetrack/trackCustomattendu.
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.
Facebook Pixel pour iframe Checkout
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 :
zonos-checkout-...(viafbq('trackCustom', ...)) pour des audiences personnalisées sur l'entonnoir complet.fbq('track', ...)) pour l'optimisation intégrée, par ex.InitiateCheckout,AddPaymentInfoetPurchase.