DOCS

Google Analytics 4 til iframe-Checkout

Spor hele betalingstragten med GA4, når du bruger en iframe-baseret, ældre Checkout-integration.

Sælgere, der bruger den ældre Checkout-integration (iframe hostet på iglobalstores.com), kan nu spore GA4-analysehændelser i hele betalingstragten. Zonos Checkout videresender automatisk analysehændelser fra iframen til den overordnede side ved hjælp af et letvægtsrelæscript, så hændelserne fremstår i din GA4-ejendom, som om de stammede fra dit eget websted.

Native integrationer har ikke brug for denne vejledning. Hvis <zonos-checkout> gengives direkte på dit websted (uden iframe), kalder Zonos din sides window.gtag direkte -- aktivér blot Google Analytics i Zonos-dashboardet under Checkout-indstillingerSporing, og sørg for, at dit sædvanlige GA4-basistag er indlæst på siden. Relæopsætningen nedenfor er kun nødvendig, når Checkout er hostet i en iframe med en anden oprindelse.

Vil du hellere spore Meta Ads-konverteringer? Se Facebook Pixel-vejledningen -- den bruger det samme relæscript og kan køre parallelt med GA4.

Sådan fungerer det 

Fordi Zonos Checkout kører inde i en iframe med en anden oprindelse, kan den ikke tilgå din sides gtag-funktion direkte. Relæsystemet løser dette med et to-trins håndtryk (trin 1-2) efterfulgt af videresendelse af hændelser (trin 3):

  1. Checkout pinger den overordnede side -- Når kassen indlæses i iframen, sender den en besked til det overordnede vindue, der angiver, at den er klar til at videresende hændelser.
  2. Den overordnede side bekræfter -- Relæscriptet på din side modtager pinget, registrerer din eksisterende GA4-konfiguration og signalerer tilbage, at den er klar til at modtage hændelser.
  3. Hændelser videresendes -- Efterhånden som kunderne gennemfører kassen, sendes hver analysehændelse via postMessage til din side, hvor relæscriptet videresender den til gtag.

Alle beskeder valideres mod betroede Zonos-oprindelser (zonos.com og iglobalstores.com) udelukkende over HTTPS.

Forudsætninger 

  • En GA4-ejendom med et måle-id (format: G-XXXXXXXXXX). Du kan oprette en i Google Analytics.
  • En ældre Checkout-integration, der indlæser Zonos Checkout i en iframe på din side.

Opsætning 

Trin 1: Tilføj GA4-tagget til din side

Hvis du ikke allerede har GA4 installeret på dit websted, skal du tilføje det almindelige Google Analytics 4-tag til <head> på den side, der hoster Checkout-iframen. Erstat G-XXXXXXXXXX med dit eget måle-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>

Bemærk: Hvis dit websted allerede har GA4-tagget installeret (f.eks. via Google Tag Manager eller et direkte kodestykke), kan du springe dette trin over. Relæscriptet vil bruge din eksisterende gtag-funktion.

Du kan finde dette kodestykke i din GA4-ejendom under Admin -> Datastrømme -> vælg din stream -> Se tag-instruktioner -> Installer manuelt.

Trin 2: Send dit måle-id til Zonos Checkout

Fortæl Zonos Checkout, hvilket GA4-måle-id der skal bruges, ved at angive window.Zonos.googleAnalyticId i din Checkouts customHTML. Zonos- dashboardet har en customHTML-editor under Checkout-indstillinger -- tilføj et <script>-tag som dette:

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

Denne værdi sendes til den overordnede side under relæhåndtrykket. Hvis den overordnede side ikke allerede har gtag indlæst, indsætter relæscriptet GA4-basistagget for dig med dette id.

Trin 3: Tilføj Zonos' analytics-relæscript

Tilføj følgende script-tag til den samme side, efter GA4-tagget. Dette script lytter efter analysehændelser fra Zonos Checkout-iframen og videresender dem til din gtag.

1<script
2 async
3 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"
4></script>

Komplet eksempel

Sådan ser den fulde opsætning ud i din sides <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 er alt. Når begge scripts er på din side, fuldfører relæscriptet automatisk håndtrykket med checkout-iframen og videresender alle hændelser i betalingstragten til din GA4-ejendom.

GA4-hændelsesreference 

Zonos Checkout udsender følgende hændelser via relæet. Alle hændelser inkluderer et isTestMode-flag og checkoutSessionId.

HændelseUdløserYderligere metadata
zonos-checkout-startCheckout åbner--
zonos-checkout-customer-infoKunden indtaster kundeoplysninger--
zonos-checkout-shipping-infoKunden vælger en forsendelsesmetodeserviceLevelId
zonos-checkout-payment-infoKunden indtaster betalingsoplysningerpaymentMethod
zonos-checkout-payment-failBetalingsforsøg mislykkes--
zonos-checkout-successOrdren gennemførestransaction_id, currency, value, items
zonos-checkout-closeKunden lukker kassen--
purchaseOrdren gennemføres (GA4's standard e-handelshændelse)transaction_id, currency, value, items

Metadata for purchase-hændelsen

purchase-hændelsen følger skemaet for GA4's e-handels-purchase-hændelse:

FeltBeskrivelse
transaction_idZonos-ordre-id eller checkout-session-id
currencyTrebogstavskode for valuta (f.eks. USD)
valueOrdrens samlede værdi
itemsArray af varer i kurven, hver med item_id, item_name, price og quantity

Fejlretning 

For at aktivere fejlretningslogning for relæscriptet skal du tilføje forespørgselsparameteren zonosDebug=1 til din side-URL:

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

Åbn din browsers udviklerkonsol for at se detaljerede logs for relæhåndtrykket og de videresendte hændelser. Dette er nyttigt til at bekræfte, at:

  • Relæscriptet modtager pinget fra checkout-iframen.
  • GA4 er konfigureret med det korrekte måle-id.
  • Hændelser videresendes til gtag.

Almindelige spørgsmål 

Skal jeg ændre mit createTempCart API-kald?

Nej. Relæsystemet fungerer uafhængigt af createTempCart-API'et. Du skal blot tilføje GA4-tagget og relæscriptet til din side.

Hvad hvis jeg allerede bruger footerHTML til Google Analytics?

Parameteren footerHTML i createTempCart-API'et indsætter scripts inde i checkout-iframen, hvilket er begrænset til at spore hændelser på sideniveau inden for iframens oprindelse. Relætilgangen anbefales, fordi den sender hændelser til din egen GA4-ejendom på dit domæne, hvilket giver dig fuldt overblik over tragten i én samlet ejendom.

Du kan roligt fjerne eventuelle GA4-scripts fra footerHTML, når du har sat relæet op.

Fungerer dette med GA4's fejlretningstilstand i Google Analytics?

Ja. Du kan bruge zonosDebug=1 til at aktivere logs for relæscriptet i din browsers udviklerkonsol og bruge GA4 DebugView i Google Analytics til at bekræfte hændelser i realtid.

Spores testordrer?

Alle hændelser inkluderer et isTestMode-felt. Når Checkout er i testtilstand, sendes hændelser stadig til GA4, men markeres med isTestMode: true. Du kan filtrere dem fra i GA4 ved hjælp af tilpassede dimensioner, hvis det er nødvendigt.

Book en demo

Var denne side nyttig?