DOCS
Checkout•
StartpaginaAPI-referentie Checkout REST API Google Analytics 4

Google Analytics 4 voor iframe Checkout

Volg de volledige checkout funnel met GA4 bij een iframe-gebaseerde legacy Checkout-integratie.

Merchants die de legacy Checkout-integratie gebruiken (iframe gehost op iglobalstores.com) kunnen nu GA4 analytics-events volgen door de volledige checkout funnel. Zonos Checkout stuurt analytics-events automatisch door vanuit het iframe naar de parentpagina met een lichtgewicht relay-script, zodat events verschijnen in uw GA4-property alsof ze vanaf uw eigen site afkomstig zijn.

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

Wilt u in plaats daarvan Meta Ads-conversies volgen? Zie de Facebook Pixel-gids -- deze gebruikt hetzelfde relay-script en kan naast GA4 draaien.

Hoe het werkt 

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

  1. 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.
  2. Parent bevestigt -- Het relay-script op uw pagina ontvangt de ping, detecteert uw bestaande GA4-configuratie en signaleert terug dat het klaar is om events te ontvangen.
  3. 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 gtag.

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

Vereisten 

  • Een GA4-property met een measurement ID (formaat: G-XXXXXXXXXX). U kunt er een aanmaken in Google Analytics.
  • Een legacy Checkout-integratie die Zonos Checkout in een iframe op uw pagina laadt.

Setup 

Stap 1: Voeg de GA4-tag toe aan uw pagina

Als GA4 nog niet op uw site is geïnstalleerd, voeg dan de standaard Google Analytics 4-tag toe aan de <head> van de pagina die het Checkout-iframe host. Vervang G-XXXXXXXXXX door uw eigen measurement ID.

1<!-- Google tag (gtag.js) -->
2 
3<script
4 async
5 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
6></script>
7 
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>

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

U vindt dit snippet in uw GA4-property onder Admin -> Data Streams -> selecteer uw stream -> View tag instructions -> Install manually.

Stap 2: Geef uw measurement ID door aan Zonos Checkout

Geef Zonos Checkout door welke GA4 measurement ID moet worden gebruikt door window.Zonos.googleAnalyticId 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.googleAnalyticId = "G-XXXXXXXXXX";
3</script>

Deze waarde wordt tijdens de relay-handshake naar de parent gestuurd. Als uw parentpagina nog geen gtag heeft geladen, injecteert het relay-script de GA4- basis tag voor u met dit ID.

Stap 3: Voeg het Zonos analytics relay-script toe

Voeg de volgende script-tag toe aan dezelfde pagina, na de GA4-tag. Dit script luistert naar analytics-events van het Zonos Checkout-iframe en stuurt ze door naar uw gtag.

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 <!-- ... your existing head tags ... -->
3 
4 <!-- Google tag (gtag.js) -->
5 
6 <script
7 async
8 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
9 ></script>
10 
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>
19 
20 <!-- Zonos analytics relay for iframe checkout -->
21 
22 <script
23 async
24 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"
25 ></script>
26</head>

Dat is alles. Zodra beide scripts op uw pagina staan, voltooit het relay-script automatisch de handshake met het checkout-iframe en stuurt alle checkout funnel-events door naar uw GA4-property.

GA4 events-referentie 

Zonos Checkout verstuurt de volgende events via het relay. Alle events bevatten een isTestMode-flag en de checkoutSessionId.

Event↕Trigger↕Additional metadata↕
zonos-checkout-startCheckout opent--
zonos-checkout-customer-infoShopper voert klantgegevens in--
zonos-checkout-shipping-infoShopper selecteert verzendmethodeserviceLevelId
zonos-checkout-payment-infoShopper voert betalingsgegevens inpaymentMethod
zonos-checkout-payment-failBetalingspoging mislukt--
zonos-checkout-successOrder voltooidtransaction_id, currency, value, items
zonos-checkout-closeShopper sluit checkout--
purchaseOrder voltooid (GA4 standaard e-commerce event)transaction_id, currency, value, items

Purchase event-metadata

Het purchase-event volgt het GA4 e-commerce purchase event-schema:

Field↕Description↕
transaction_idZonos order-ID of checkout session-ID
currencyValutacode van drie letters (bijv. USD)
valueTotaal orderbedrag
itemsArray van winkelwagenitems, elk met item_id, item_name, price en quantity

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.
  • GA4 is geconfigureerd met de juiste measurement ID.
  • Events worden doorgestuurd naar gtag.

Veelgestelde vragen 

Moet ik mijn createTempCart API-aanroep wijzigen?

Nee. Het relay-systeem werkt onafhankelijk van de createTempCart API. U hoeft alleen de GA4-tag en het relay-script aan uw pagina toe te voegen.

Wat als ik al footerHTML gebruik voor Google Analytics?

De footerHTML-parameter in de createTempCart API injecteert scripts in het checkout-iframe, wat beperkt is tot tracking van page-level events binnen de iframe-origin. De relay-aanpak wordt aanbevolen omdat events naar uw eigen GA4-property op uw domein worden gestuurd, wat volledige funnelzichtbaarheid in één property geeft.

U kunt GA4-scripts veilig uit footerHTML verwijderen nadat u de relay hebt ingesteld.

Werkt dit met GA4 debugmodus in Google Analytics?

Ja. U kunt zonosDebug=1 gebruiken voor relay-script logs in de developer console van uw browser, en GA4 DebugView in Google Analytics gebruiken om events in realtime te verifiëren.

Worden testorders gevolgd?

Alle events bevatten een isTestMode-veld. Wanneer Checkout in testmodus staat, worden events nog steeds naar GA4 gestuurd maar gemarkeerd met isTestMode: true. U kunt deze uitfilteren in GA4 met custom dimensions indien nodig.

Was deze pagina nuttig?

Krijg ondersteuning·Juridische documenten·© 2026 Zonos
Op deze pagina:
  • Google Analytics 4 voor iframe Checkout
  • Hoe het werkt
  • Vereisten
  • Setup
  • GA4 events-referentie
  • Debuggen
  • Veelgestelde vragen