Hvordan setter jeg opp Google Analytics 4 med Zonos eldre iframe Checkout?

Legg til standard GA4 gtag.js-utdrag på siden som hoster Checkout iframen, og legg deretter til Zonos analyticsRelayOnInit.js-skriptet. Relayskriptet håndterer automatisk kryssrammekommunikasjonen og formidler checkout-hendelser til GA4-egenskapen.

Hvilke GA4-hendelser sporer Zonos Checkout?

Zonos Checkout sporer hele checkout-trakten, inkludert 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, og standard GA4 purchase-hendelse med transaksjonsdetaljer.

Hvordan feilsøker jeg GA4-hendelser fra Zonos Checkout?

Legg til zonosDebug=1-spørreparameteren til side-URLen din, og åpne nettleserens utviklerkonsoll for å se detaljerte logger over relayhandskaken og formidlede hendelser. Du kan også bruke GA4 DebugView i Google Analytics for å bekrefte hendelser i sanntid.

Checkout•

HjemAPI-referanse Checkout REST API Google Analytics 4

Google Analytics 4 for iframe Checkout

Q: Trenger jeg å endre createTempCart API-anropet mitt for GA4-sporing?

Nei. Relaysystemet fungerer uavhengig av createTempCart API. Du trenger bare å legge til GA4-taggen og Zonos relayskriptet på siden.

Spor hele checkout-trakten med GA4 når du bruker en iframe-basert eldre Checkout-integrasjon.

Forhandlere som bruker eldre Checkout-integrasjon (iframe hostet på iglobalstores.com) kan nå spore GA4-analysehendelser over hele checkout-trakten. Zonos Checkout relayerer automatisk analysehendelser fra iframen til overordnet side ved hjelp av et lett relayskript, slik at hendelser vises i GA4-egenskapen din som om de stammer fra ditt eget nettsted.

Native integrasjoner trenger ikke denne veiledningen. Hvis <zonos-checkout> gjengis direkte på nettstedet ditt (ingen iframe), kaller Zonos sidenes window.gtag i stedet — bare aktiver Google Analytics i Zonos-dashbordet under Checkout-innstillinger → Sporing og sørg for at den vanlige GA4-basistaggen er lastet på siden. Relayoppsettet nedenfor kreves bare når Checkout er hostet i en iframe på et annet opphav.

Ser du etter å spore Meta Ads-konverteringer i stedet? Se Facebook Pixel-veiledningen -- den bruker det samme relayskriptet og kan kjøre ved siden av GA4.

Hvordan det fungerer

Fordi Zonos Checkout kjører inne i en iframe på et annet opphav, kan det ikke direkte få tilgang til sidenes gtag-funksjon. Relaysystemet løser dette med en to-trinn handshake (trinn 1-2) etterfulgt av hendelsesformidling (trinn 3):

Checkout pinger den overordnede siden -- Når checkout laster inne i iframen, sender den en melding til overordnet vindu som indikerer at den er klar til å relayere hendelser.
Overordnet side bekrefter -- Relayskriptet på siden mottar pingmeldingen, detekterer din eksisterende GA4-konfigurasjon, og signaliserer tilbake at det er klart til å motta hendelser.
Hendelser blir formidlet -- Etter hvert som kjøpere progrederer gjennom checkout, sendes hver analysehendelse via postMessage til siden, der relayskriptet formidler den til gtag.

Alle meldinger valideres mot klarerte Zonos-opphav (zonos.com og iglobalstores.com) over HTTPS bare.

Forutsetninger

En GA4-egenskap med en måle-ID (format: G-XXXXXXXXXX). Du kan opprette en i Google Analytics.
En eldre Checkout-integrasjon som laster Zonos Checkout i en iframe på siden din.

Oppsett

Trinn 1: Legg til GA4-taggen på siden

Hvis du ikke allerede har GA4 installert på nettstedet ditt, legg til standard Google Analytics 4-tag i <head> på siden som hoster Checkout iframen. Bytt ut G-XXXXXXXXXX med din egen måle-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>

Merk: Hvis nettstedet ditt allerede har GA4-taggen installert (f.eks. gjennom Google Tag Manager eller et direkte utdrag), kan du hoppe over dette trinnet. Relayskriptet vil bruke din eksisterende gtag-funksjon.

Du finner dette utdraget i GA4-egenskapen din under Admin -> Data Streams -> velg strømmen din -> View tag instructions -> Install manually.

Trinn 2: Send måle-IDen til Zonos Checkout

Fortell Zonos Checkout hvilken GA4-måle-ID som skal brukes ved å sette window.Zonos.googleAnalyticId inne i Checkout sin customHTML. Zonos-dashbordet har et customHTML-redigeringsfelt under Checkout-innstillinger -- legg til en <script>-tag som denne:

1<script>

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

3</script>

Denne verdien sendes til den overordnede siden under relayhandskaken. Hvis den overordnede siden ikke allerede har gtag lastet, vil relayskriptet injisere GA4- basistaggen for deg ved å bruke denne IDen.

Trinn 3: Legg til Zonos-analyserelayskriptet

Legg til følgende script-tag på samme side, etter GA4-taggen. Dette skriptet lytter etter analysehendelser fra Zonos Checkout iframen og formidler dem til gtag.

1<script

2 async

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

4></script>

Komplett eksempel

Her er hvordan det komplette oppsettet ser ut i sidenes <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 er alt. Når begge skriptene er på siden, fullfører relayskriptet automatisk handskaken med checkout iframen og formidler alle checkout-trakthendelser til GA4-egenskapen.

GA4-hendelsesreferanse

Zonos Checkout sender følgende hendelser gjennom relayskriptet. Alle hendelser inkluderer en isTestMode-flagg og checkoutSessionId.

Hendelse↕	Utløser↕	Ekstra metadata↕
`zonos-checkout-start`	Checkout åpnes	--
`zonos-checkout-customer-info`	Kjøper oppgir kundeinformasjon	--
`zonos-checkout-shipping-info`	Kjøper velger en forsendelsesmetode	`serviceLevelId`
`zonos-checkout-payment-info`	Kjøper oppgir betalingsdetaljer	`paymentMethod`
`zonos-checkout-payment-fail`	Betalingsforsøk mislykkes	--
`zonos-checkout-success`	Ordre fullføres vellykket	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	Kjøper lukker checkout	--
`purchase`	Ordre fullføres (GA4 standard e-handel-hendelse)	`transaction_id`, `currency`, `value`, `items`

Metadata for `purchase`-hendelsen

purchase-hendelsen følger GA4 e-handel purchase hendelse skjema:

Felt↕	Beskrivelse↕
`transaction_id`	Zonos ordre-ID eller checkout-sesjons-ID
`currency`	Trebokstavs valutakode (f.eks. `USD`)
`value`	Total ordreverdi
`items`	Array av handlevognartikler, hver med `item_id`, `item_name`, `price`, og `quantity`

Feilsøking

For å aktivere feilsøkingslogging for relayskriptet, legg til zonosDebug=1-spørreparameteren til side-URLen din:

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

Åpne nettleserens utviklerkonsoll for å se detaljerte logger for relayhandskaken og formidlede hendelser. Dette er nyttig for å bekrefte at:

Relayskriptet mottar pingmeldingen fra checkout iframen.
GA4 er konfigurert med riktig måle-ID.
Hendelser blir formidlet til gtag.

Vanlige spørsmål

Trenger jeg å endre `createTempCart` API-samtalen?

Nei. Relaysystemet fungerer uavhengig av createTempCart API. Du trenger bare å legge til GA4-taggen og relayskriptet på siden.

Hva hvis jeg allerede bruker `footerHTML` for Google Analytics?

footerHTML-parameteren i createTempCart API injiserer skripter inne i checkout iframen, som er begrenset til å spore side-nivåhendelser innenfor iframens opphav. Relaymetoden anbefales fordi den sender hendelser til din egen GA4-egenskap på domenet ditt, noe som gir deg full traktoverskrift i en enkelt egenskap.

Du kan trygt fjerne eventuelle GA4-skripter fra footerHTML etter å ha satt opp relayskriptet.

Fungerer dette med GA4 debug-modus i Google Analytics?

Ja. Du kan bruke zonosDebug=1 for å aktivere relayskript-logger i nettleserens utviklerkonsoll, og bruke GA4 DebugView i Google Analytics for å bekrefte hendelser i sanntid.

Blir testordrer sporet?

Alle hendelser inkluderer et isTestMode-felt. Når Checkout er i test-modus, sendes hendelser fremdeles til GA4, men er merket med isTestMode: true. Du kan filtrere disse ut i GA4 ved å bruke egendefinerte dimensjoner om nødvendig.

Bestill en demo