Comment configurer Google Analytics 4 avec Zonos Checkout legacy iframe ?

Ajoutez l'extrait gtag.js GA4 standard à la page qui héberge l'iframe Checkout, puis ajoutez le script Zonos analyticsRelayOnInit.js. Le script de relais gère automatiquement la communication inter-iframe et transmet les événements de checkout à votre propriété GA4.

Quels événements GA4 Zonos Checkout suit-il ?

Zonos Checkout suit l'entonnoir complet de checkout, notamment 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 purchase GA4 standard avec les détails de transaction.

Checkout•

AccueilRéférence API Checkout REST API Google Analytics 4

Google Analytics 4 pour iframe Checkout

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

Ajoutez le paramètre de requête zonosDebug=true à 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. Vous pouvez également utiliser GA4 DebugView dans Google Analytics pour vérifier les événements en temps réel.

Suivez l'entonnoir complet de checkout avec GA4 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 désormais suivre les événements analytiques GA4 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 d'un script de relais léger, de sorte que les événements apparaissent dans votre propriété GA4 comme s'ils provenaient de votre propre site.

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.gtag de votre page sur place — activez simplement Google Analytics dans le Dashboard Zonos sous Checkout settings → Tracking et assurez-vous que votre balise GA4 de base habituelle est chargée 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.

Vous souhaitez plutôt suivre les conversions Meta Ads ? Consultez le guide Facebook Pixel — il utilise le même script de relais et peut fonctionner aux côtés de GA4.

Fonctionnement

Comme Zonos Checkout s'exécute dans une iframe sur une origine différente, il ne peut pas accéder directement à la fonction gtag 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.
Le parent accuse réception — Le script de relais sur votre page reçoit le ping, détecte votre configuration GA4 existante 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 à gtag.

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

Prérequis

Une propriété GA4 avec un ID de mesure (format : G-XXXXXXXXXX). Vous pouvez en créer une dans Google Analytics.
Une intégration Checkout legacy qui charge Zonos Checkout dans une iframe sur votre page.

Configuration

Étape 1 : Ajouter la balise GA4 à votre page

Si vous n'avez pas encore GA4 installé sur votre site, ajoutez la balise Google Analytics 4 standard dans le <head> de la page qui héberge l'iframe Checkout. Remplacez G-XXXXXXXXXX par votre propre ID de mesure.

1

3<script

4 async

5 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

6></script>

8<script>

9 window.dataLayer = window.dataLayer || [];

10 function gtag() {

11 dataLayer.push(arguments);

12 }

13 gtag("js", new Date());

14 gtag("config", "G-XXXXXXXXXX");

15</script>

Note : Si votre site a déjà la balise GA4 installée (par ex. via Google Tag Manager ou un extrait direct), vous pouvez ignorer cette étape. Le script de relais utilisera votre fonction gtag existante.

Vous trouverez cet extrait dans votre propriété GA4 sous Admin -> Data Streams -> sélectionnez votre flux -> View tag instructions -> Install manually.

Étape 2 : Transmettre votre ID de mesure à Zonos Checkout

Indiquez à Zonos Checkout quel ID de mesure GA4 utiliser en définissant window.Zonos.googleAnalyticId 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.googleAnalyticId = "G-XXXXXXXXXX";

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à gtag chargé, le script de relais injectera la balise GA4 de base 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, après la balise GA4. Ce script écoute les événements analytiques de l'iframe Zonos Checkout et les transmet à votre gtag.

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 async

8 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

9 ></script>

11 <script>

12 window.dataLayer = window.dataLayer || [];

13 function gtag() {

14 dataLayer.push(arguments);

15 }

16 gtag("js", new Date());

17 gtag("config", "G-XXXXXXXXXX");

18 </script>

20 

22 <script

23 async

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

25 ></script>

26</head>

Voilà. Une fois les deux scripts sur votre page, le script de relais termine automatiquement la poignée de main avec l'iframe checkout et transmet tous les événements de l'entonnoir de checkout à votre propriété GA4.

Référence des événements GA4

Zonos Checkout émet les événements suivants via le relais. Tous les événements incluent un indicateur isTestMode et le checkoutSessionId.

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

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

L'événement purchase suit le schéma de l' événement e-commerce GA4 purchase :

Champ↕	Description↕
`transaction_id`	ID de commande Zonos ou ID de session checkout
`currency`	Code devise à trois lettres (par ex. `USD`)
`value`	Valeur totale de la commande
`items`	Tableau d'articles du panier, chacun avec `item_id`, `item_name`, `price` et `quantity`

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.
GA4 est configuré avec le bon ID de mesure.
Les événements sont transférés vers gtag.

Questions fréquentes

Dois-je modifier mon appel API `createTempCart` ?

Non. Le système de relais fonctionne indépendamment de l'API createTempCart. Vous devez uniquement ajouter la balise GA4 et le script de relais à votre page.

Que faire si j'utilise déjà `footerHTML` pour Google Analytics ?

Le paramètre footerHTML dans l'API createTempCart injecte des scripts dans l'iframe checkout, ce qui se limite au suivi d'événements au niveau de la page dans l'origine de l'iframe. L'approche par relais est recommandée car elle envoie les événements à votre propre propriété GA4 sur votre domaine, vous offrant une visibilité complète de l'entonnoir dans une seule propriété.

Vous pouvez supprimer en toute sécurité tout script GA4 de footerHTML après avoir configuré le relais.

Est-ce compatible avec le mode débogage GA4 dans Google Analytics ?

Oui. Vous pouvez utiliser zonosDebug=1 pour activer les journaux du script de relais dans la console développeur de votre navigateur, et utiliser GA4 DebugView dans Google Analytics pour vérifier les événements en temps réel.

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 envoyés à GA4 mais marqués avec isTestMode: true. Vous pouvez les filtrer dans GA4 à l'aide de dimensions personnalisées si nécessaire.

Réserver une démo