Hoe stel ik Google Analytics 4 in met legacy iframe Checkout van Zonos?

Voeg de standaard GA4-tag toe aan de pagina die het Checkout-iframe host, stel window.Zonos.googleAnalyticId in in uw Checkout customHTML en voeg het Zonos analyticsRelayOnInit.js-script toe. Het relay-script handelt automatisch cross-iframe communicatie af en stuurt checkout-events door naar GA4.

Welke GA4-events volgt Zonos Checkout?

Zonos Checkout verstuurt events zoals 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 en purchase via het relay-script naar uw GA4-property.

Hoe debug ik GA4-events van Zonos Checkout?

Voeg zonosDebug=1 toe aan uw pagina-URL voor relay-script logs en gebruik GA4 DebugView in Google Analytics om events in realtime te verifiëren.

Checkout•

StartpaginaAPI-referentie Checkout REST API Google Analytics 4

Google Analytics 4 voor iframe Checkout

Q: Moet ik mijn createTempCart API-aanroep wijzigen voor GA4-tracking?

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.

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):

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.
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.
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

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>

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 

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>

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-start`	Checkout opent	--
`zonos-checkout-customer-info`	Shopper voert klantgegevens in	--
`zonos-checkout-shipping-info`	Shopper selecteert verzendmethode	`serviceLevelId`
`zonos-checkout-payment-info`	Shopper voert betalingsgegevens in	`paymentMethod`
`zonos-checkout-payment-fail`	Betalingspoging mislukt	--
`zonos-checkout-success`	Order voltooid	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	Shopper sluit checkout	--
`purchase`	Order 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_id`	Zonos order-ID of checkout session-ID
`currency`	Valutacode van drie letters (bijv. `USD`)
`value`	Totaal orderbedrag
`items`	Array 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.

Boek een demo