DOCS
Checkout•
HemAPI-referens Checkout REST API Google Analytics 4

Google Analytics 4 för iframe Checkout

Spåra hela kassaflödet med GA4 när ni använder en iframe-baserad äldre Checkout-integration.

Säljare som använder den äldre Checkout-integrationen (iframe värd på iglobalstores.com) kan nu spåra GA4-analyshändelser genom hela kassaflödet. Zonos Checkout vidarebefordrar automatiskt analyshändelser från iframen till den överordnade sidan med hjälp av ett lättviktigt reläskript, så att händelserna visas i er GA4-egendom som om de härstammade från er egen webbplats.

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

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

Hur det fungerar 

Eftersom Zonos Checkout körs inuti en iframe med ett annat ursprung kan den inte komma åt er sidas gtag-funktion direkt. Reläsystemet löser detta med en handskakning i två steg (steg 1–2) följt av vidarebefordran av händelser (steg 3):

  1. Checkout pingar den överordnade sidan -- När kassan laddas inuti iframen skickar den ett meddelande till det överordnade fönstret som visar att den är redo att vidarebefordra händelser.
  2. Den överordnade sidan bekräftar -- Reläskriptet på er sida tar emot pingen, upptäcker er befintliga GA4-konfiguration och signalerar tillbaka att det är redo att ta emot händelser.
  3. Händelser vidarebefordras -- Medan kunderna går igenom kassan skickas varje analyshändelse via postMessage till er sida, där reläskriptet vidarebefordrar den till gtag.

Alla meddelanden valideras mot betrodda Zonos-ursprung (zonos.com och iglobalstores.com) och sker 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 äldre Checkout-integration 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ägger ni till standardtaggen för Google Analytics 4 i <head> på sidan som är värd för Checkout-iframen. Ersätt G-XXXXXXXXXX med ert eget mät-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>

Obs! Om er webbplats redan har GA4-taggen installerad (t.ex. via Google Tag Manager eller en direkt inbäddad kodsnutt) kan ni hoppa över det här steget. Reläskriptet kommer att använda er befintliga gtag-funktion.

Ni hittar det här utdraget i er GA4-egendom under Admin -> Dataströmmar -> välj ert dataflöde -> 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. Zonos Dashboard har en customHTML-redigerare under Checkout-inställningar -- lägg till en <script>-tagg så här:

1<script>
2 window.Zonos.googleAnalyticId = "G-XXXXXXXXXX";
3</script>

Det här värdet skickas till den överordnade sidan under relähandskakningen. Om er sida inte redan har gtag laddad kommer reläskriptet att infoga GA4-bastaggen åt er med det här ID:t.

Steg 3: Lägg till Zonos analytics-reläskript

Lägg till följande skripttagg på samma sida, efter GA4-taggen. Det här skriptet lyssnar efter analyshändelser från Zonos Checkout-iframen och vidarebefordrar dem till er 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 <!-- ... 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>

Det är allt. När båda skripten finns på er sida slutför reläskriptet automatiskt handskakningen med Checkout-iframen och vidarebefordrar alla händelser i kassaflödet till er GA4-egendom.

GA4 händelsereferens 

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

Händelse↕Utlösare↕Ytterligare metadata↕
zonos-checkout-startKassan öppnas--
zonos-checkout-customer-infoKunden anger kunduppgifter--
zonos-checkout-shipping-infoKunden väljer en fraktmetodserviceLevelId
zonos-checkout-payment-infoKunden anger betalningsuppgifterpaymentMethod
zonos-checkout-payment-failBetalningsförsöket misslyckas--
zonos-checkout-successBeställningen slutförstransaction_id, currency, value, items
zonos-checkout-closeKunden stänger kassan--
purchaseBeställningen slutförs (GA4:s standardhändelse för e-handel)transaction_id, currency, value, items

Köphändelsemetadata

Händelsen purchase följer schemat för GA4:s e-handelshändelse purchase:

Fält↕Beskrivning↕
transaction_idZonos orderid eller kassasessions-ID
currencyTrebokstavig valutakod (t.ex. USD)
valueTotalt ordervärde
itemsEn lista med varukorgsartiklar, 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 frågeparametern zonosDebug=1 i er sid-URL:

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

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

  • Reläskriptet tar emot pingen från Checkout-iframen.
  • 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:et. Ni behöver bara 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:et injicerar skript inuti Checkout-iframen, vilket är begränsat till att spåra händelser på sidnivå inom iframens ursprung. Reläansatsen rekommenderas eftersom den skickar händelser till er egen GA4-egendom på er domän, vilket ger er fullständig insyn i hela kassaflödet i en enda egendom.

Ni kan tryggt ta bort alla GA4-skript från footerHTML när reläet är konfigurerat.

Fungerar detta med GA4:s 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 testordrar?

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

Var den här sidan till hjälp?

Få support·Juridiska dokument·© 2026 Zonos
På den här sidan:
  • Google Analytics 4 för iframe Checkout
  • Hur det fungerar
  • Förutsättningar
  • Inställning
  • GA4 händelsereferens
  • Felsökning
  • Vanliga frågor