Hur ställer jag in Google Analytics 4 med Zonos äldre iframe Checkout?

Lägg till standardkodavsnittet för GA4 gtag.js på er sida som är värd för Checkout iframe och lägg sedan till Zonos analyticsRelayOnInit.js-skriptet. Reläskriptet hanterar automatiskt kommunikationen över iframe och vidarebefordrar kassahändelser till er GA4-egendom.

Vilka GA4-evenemang spårar Zonos Checkout?

Zonos Checkout spårar hela kassatratten inklusive 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 och standard GA4-köphändelsen.

Behöver jag ändra mitt createTempCart API-anrop för GA4-spårning?

Nej. Reläsystemet fungerar oberoende av createTempCart API. Ni behöver bara lägga till GA4-taggen och Zonos reläskript på er sida.

Hur felsöker jag GA4-händelser från Zonos Checkout?

Lägg till zonosDebug=true frågeparametern till er webbadress och öppna webbläsarens utvecklarkonsol för att se detaljerade loggar över relähandskakning och vidarebefordrade händelser. Ni kan också använda GA4 DebugView i Google Analytics för att verifiera händelser i realtid.

Checkout•

HemAPI-referens Checkout REST API Google Analytics 4

Google Analytics 4 för iframe Checkout

Spåra hela kassatratten med GA4 när ni använder en iframe-baserad äldre Kassaintegration.

Säljare som använder den äldre Checkout-integrationen (iframe värd på iglobalstores.com) kan nu spåra GA4-analyshändelser i sin helhet kassatratt. Zonos Checkout vidarebefordrar automatiskt analyshändelser från iframe till den överordnade sidan med hjälp av ett lätt reläskript, så att händelser visas i din GA4-egendom som om den härrörde från er egen webbplats.

Integrerade integrationer behöver inte den här guiden. Om <zonos-checkout> återges direkt på er webbplats (ingen iframe) anropar Zonos er sidas window.gtag i plats — aktivera bara Google Analytics i Zonos-instrumentpanelen under Kassainställningar → Spårning och se till att er vanliga GA4-bastagg är laddas på sidan. Reläinställningen nedan krävs endast när Checkout är värd i en iframe med ett annat ursprung.

Vill ni spåra Meta Ads-konverteringar istället? Se den Facebook Pixel guide -- det använder samma reläskript och kan köras tillsammans med GA4.

Hur det fungerar

Eftersom Zonos Checkout körs inuti en iframe på ett annat ursprung, är det kan inte direkt komma åt er sidas gtag-funktion. Reläsystemet löser detta med ett tvåstegs handslag (steg 1-2) följt av vidarebefordran av händelse (steg 3):

Checkout pingar föräldern -- När kassan laddas inuti iframe, den skickar ett meddelande till föräldrafönstret som indikerar att den är redo att vidarebefordras händelser.
Föräldern erkänner -- Reläskriptet på er sida tar emot pinget, upptäcker er befintliga GA4-konfiguration och signalerar att den är redo att ta emot händelser.
Händelser vidarebefordras -- Var och en när kunderna går igenom kassan analytics händelse skickas via postMessage till er sida, där reläet skriptet vidarebefordrar det till gtag.

Alla meddelanden valideras mot betrodda Zonos-ursprung (zonos.com och iglobalstores.com) endast över HTTPS.

Förutsättningar

En GA4-egendom med ett mät-ID (format: G-XXXXXXXXXX). Ni kan skapa en i Google Analytics.
En legacy Checkout-integrering som laddar Zonos Checkout i en iframe på er sida.

Inställning

Steg 1: Lägg till GA4-taggen på er sida

Om ni inte redan har GA4 installerat på er webbplats, lägg till standarden Google Analytics 4-tagg till <head> på sidan som är värd för Checkout iframe. Byt ut G-XXXXXXXXXX mot ert eget mät-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>

Obs! Om er webbplats redan har GA4-taggen installerad (t.ex. via Google Taggstyrning eller ett direktutdrag) kan ni hoppa över det här steget. Relämanuset kommer att använda er befintliga gtag-funktion.

Du hittar det här utdraget i er GA4-egendom under Admin -> Data Strömmar -> välj er stream -> Visa tagginstruktioner -> Installera manuellt.

Steg 2: Skicka ert mät-ID till Zonos Checkout

Berätta för Zonos Checkout vilket GA4-mät-ID som ska användas genom att ställa in window.Zonos.googleAnalyticId i er Checkouts customHTML. Zonerna instrumentpanelen visar en customHTML-redigerare under kassainställningar -- lägg till en <script>-taggen så här:

1<script>

2 window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';

3</script>

Detta värde skickas till föräldern under relähandskakningen. Om er förälder sidan inte redan har gtag laddad, reläskriptet kommer att injicera GA4 bastagg för er som använder detta ID.

Steg 3: Lägg till Zonos analytics relay script

Lägg till följande skripttagg på samma sida, efter GA4-taggen. Detta manus lyssnar efter analyshändelser från Zonos Checkout iframe och vidarebefordrar dem till din gtag.

1<script

2 async

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

4></script>

Komplett exempel

Så här ser hela konfigurationen ut i er sidas <head>:

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>

Det är allt. När båda skripten finns på er sida kommer reläskriptet automatiskt slutför handskakningen med kassans iframe och vidarebefordrar all utcheckning kanalhändelser till er GA4-egendom.

GA4 händelsereferens

Zonos Checkout sänder ut följande händelser genom reläet. Alla evenemang inkluderar en isTestMode-flagga och checkoutSessionId.

Händelse↕	Utlösare↕	Ytterligare metadata↕
`zonos-checkout-start`	Kassan öppnar	--
`zonos-checkout-customer-info`	Shopper anger kundinformation	--
`zonos-checkout-shipping-info`	Shopper väljer en fraktmetod	`serviceLevelId`
`zonos-checkout-payment-info`	Shopper anger betalningsuppgifter	`paymentMethod`
`zonos-checkout-payment-fail`	Betalningsförsök misslyckas	--
`zonos-checkout-success`	Beställningen slutförs framgångsrikt	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	Shopper stänger kassan	--
`purchase`	Beställning slutförs (GA4 standard e-handelshändelse)	`transaction_id`, `currency`, `value`, `items`

Köphändelsemetadata

purchase-händelsen följer GA4 e-commerce purchase event schema:

Fält↕	Beskrivning↕
`transaction_id`	Zonos order-ID eller kassasessions-ID
`currency`	Tre bokstäver valutakod (t.ex. `USD`)
`value`	Totalt ordervärde
`items`	Uppsättning av kundvagnsartiklar, var och en med `item_id`, `item_name`, `price` och `quantity`

Felsökning

För att aktivera felsökningsloggning för reläskriptet, lägg till zonosDebug=1-frågan parameter till er webbadress:

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

Öppna webbläsarens utvecklarkonsol för att se detaljerade loggar över reläet handslag och vidarebefordrade händelser. Detta är användbart för att verifiera att:

Reläskriptet tar emot ping från kassans iframe.
GA4 är konfigurerad med rätt mät-ID.
Händelser vidarebefordras till gtag.

Vanliga frågor

Behöver jag ändra mitt `createTempCart` API-anrop?

Nej. Reläsystemet fungerar oberoende av createTempCart API. Bara du måste lägga till GA4-taggen och reläskriptet på er sida.

Vad händer om jag redan använder `footerHTML` för Google Analytics?

Parametern footerHTML i createTempCart API injicerar skript i kassans iframe, vilket är begränsat till spårning händelser på sidnivå inom iframe-ursprunget. Relämetoden rekommenderas eftersom det skickar händelser till er egen GA4-egendom på er domän, vilket ger er full trattsynlighet i en enskild egenskap.

Du kan säkert ta bort alla GA4-skript från footerHTML efter att ha konfigurerat relä.

Fungerar detta med GA4 felsökningsläge i Google Analytics?

Ja. Ni kan använda zonosDebug=1 för att aktivera reläskriptloggar i er webbläsares utvecklarkonsol och använda GA4 DebugView i Google Analytics för att verifiera händelser i realtid.

Spåras testorder?

Alla evenemang inkluderar ett isTestMode-fält. När Checkout är i testläge, händelser skickas fortfarande till GA4 men flaggade med isTestMode: true. Ni kan filtrera dessa ut i GA4 med anpassade mått om det behövs.

Boka en demo