Come configuro Google Analytics 4 con Zonos legacy iframe Checkout?

Aggiungi lo snippet standard gtag.js di GA4 alla pagina che ospita l'iframe di Checkout, poi aggiungi lo script Zonos analyticsRelayOnInit.js. Lo script di relay gestisce automaticamente la comunicazione cross-iframe e trasmette gli eventi di checkout alla tua proprietà GA4.

Quali eventi GA4 traccia Zonos Checkout?

Zonos Checkout traccia l'intero funnel di checkout inclusi 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, e l'evento standard GA4 purchase con i dettagli della transazione.

Checkout•

HomeRiferimento API Checkout REST API Google Analytics 4

Google Analytics 4 per Checkout con iframe

Q: Come eseguo il debug degli eventi GA4 da Zonos Checkout?

Aggiungi il parametro di query zonosDebug=true all'URL della tua pagina e apri la console per sviluppatori del tuo browser per vedere i log dettagliati dell'handshake del relay e degli eventi trasmessi. Puoi anche usare GA4 DebugView in Google Analytics per verificare gli eventi in tempo reale.

Traccia l'intero funnel di checkout con GA4 quando utilizzi un'integrazione legacy di Checkout basata su iframe.

I merchant che utilizzano l'integrazione legacy di Checkout (iframe ospitato su iglobalstores.com) possono ora tracciare gli eventi di analytics GA4 in tutto il funnel di checkout. Zonos Checkout trasmette automaticamente gli eventi di analytics dall'iframe alla pagina principale utilizzando uno script di relay leggero, così gli eventi appaiono nella tua proprietà GA4 come se provenissero dal tuo sito.

Le integrazioni native non necessitano di questa guida. Se <zonos-checkout> viene renderizzato direttamente sul tuo sito (senza iframe), Zonos chiama direttamente window.gtag della tua pagina -- basta abilitare Google Analytics nel dashboard Zonos in Impostazioni Checkout → Tracciamento e assicurarsi che il tag base GA4 abituale sia caricato sulla pagina. La configurazione del relay descritta di seguito è necessaria solo quando Checkout è ospitato in un iframe su un'origine diversa.

Vuoi invece tracciare le conversioni di Meta Ads? Consulta la guida Facebook Pixel -- utilizza lo stesso script di relay e può funzionare insieme a GA4.

Come funziona

Poiché Zonos Checkout viene eseguito all'interno di un iframe su un'origine diversa, non può accedere direttamente alla funzione gtag della tua pagina. Il sistema di relay risolve questo problema con un handshake in due passaggi (passaggi 1-2) seguito dal forwarding degli eventi (passaggio 3):

Checkout invia un ping alla pagina principale -- Quando il checkout si carica all'interno dell'iframe, invia un messaggio alla finestra principale indicando che è pronto a trasmettere gli eventi.
La pagina principale conferma -- Lo script di relay sulla tua pagina riceve il ping, rileva la tua configurazione GA4 esistente e segnala che è pronto a ricevere eventi.
Gli eventi vengono trasmessi -- Mentre gli acquirenti procedono nel checkout, ogni evento di analytics viene inviato tramite postMessage alla tua pagina, dove lo script di relay lo trasmette a gtag.

Tutti i messaggi vengono validati rispetto a origini Zonos attendibili (zonos.com e iglobalstores.com) esclusivamente tramite HTTPS.

Prerequisiti

Una proprietà GA4 con un ID di misurazione (formato: G-XXXXXXXXXX). Puoi crearne una in Google Analytics.
Un'integrazione legacy di Checkout che carica Zonos Checkout in un iframe sulla tua pagina.

Configurazione

Passaggio 1: aggiungi il tag GA4 alla tua pagina

Se non hai già installato GA4 sul tuo sito, aggiungi il tag standard di Google Analytics 4 nel <head> della pagina che ospita l'iframe di Checkout. Sostituisci G-XXXXXXXXXX con il tuo ID di misurazione.

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>

Nota: se il tuo sito ha già installato il tag GA4 (ad esempio tramite Google Tag Manager o uno snippet diretto), puoi saltare questo passaggio. Lo script di relay utilizzerà la tua funzione gtag esistente.

Puoi trovare questo snippet nella tua proprietà GA4 in Amministrazione -> Flussi di dati -> seleziona il tuo flusso -> Visualizza istruzioni tag -> Installa manualmente.

Passaggio 2: passa il tuo ID di misurazione a Zonos Checkout

Indica a Zonos Checkout quale ID di misurazione GA4 utilizzare impostando window.Zonos.googleAnalyticId all'interno del customHTML del tuo Checkout. Il dashboard Zonos espone un editor customHTML nelle impostazioni Checkout -- aggiungi un tag <script> come questo:

1<script>

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

3</script>

Questo valore viene inviato alla pagina principale durante l'handshake del relay. Se la tua pagina principale non ha già gtag caricato, lo script di relay inietterà il tag base GA4 per te utilizzando questo ID.

Passaggio 3: aggiungi lo script di relay analytics di Zonos

Aggiungi il seguente tag script alla stessa pagina, dopo il tag GA4. Questo script rimane in attesa degli eventi di analytics dall'iframe di Zonos Checkout e li trasmette al tuo gtag.

1<script

2 async

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

4></script>

Esempio completo

Ecco come si presenta la configurazione completa nel <head> della tua 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>

Tutto qui. Una volta che entrambi gli script sono sulla tua pagina, lo script di relay completa automaticamente l'handshake con l'iframe di checkout e trasmette tutti gli eventi del funnel di checkout alla tua proprietà GA4.

Riferimento eventi GA4

Zonos Checkout genera i seguenti eventi tramite il relay. Tutti gli eventi includono un flag isTestMode e il checkoutSessionId.

Evento↕	Trigger↕	Metadati aggiuntivi↕
`zonos-checkout-start`	Il checkout si apre	--
`zonos-checkout-customer-info`	L'acquirente inserisce le informazioni cliente	--
`zonos-checkout-shipping-info`	L'acquirente seleziona un metodo di spedizione	`serviceLevelId`
`zonos-checkout-payment-info`	L'acquirente inserisce i dettagli di pagamento	`paymentMethod`
`zonos-checkout-payment-fail`	Il tentativo di pagamento fallisce	--
`zonos-checkout-success`	L'ordine si completa con successo	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	L'acquirente chiude il checkout	--
`purchase`	L'ordine si completa (evento e-commerce standard GA4)	`transaction_id`, `currency`, `value`, `items`

Metadati dell'evento Purchase

L'evento purchase segue lo schema dell'evento e-commerce purchase di GA4:

Campo↕	Descrizione↕
`transaction_id`	ID ordine Zonos o ID sessione di checkout
`currency`	Codice valuta a tre lettere (ad es. `USD`)
`value`	Valore totale dell'ordine
`items`	Array di articoli del carrello, ciascuno con `item_id`, `item_name`, `price` e `quantity`

Debug

Per abilitare il logging di debug per lo script di relay, aggiungi il parametro di query zonosDebug=1 all'URL della tua pagina:

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

Apri la console per sviluppatori del tuo browser per vedere i log dettagliati dell'handshake del relay e degli eventi trasmessi. Questo è utile per verificare che:

Lo script di relay riceva il ping dall'iframe di checkout.
GA4 sia configurato con l'ID di misurazione corretto.
Gli eventi vengano trasmessi a gtag.

Domande frequenti

Devo modificare la mia chiamata API `createTempCart`?

No. Il sistema di relay funziona indipendentemente dall'API createTempCart. Devi solo aggiungere il tag GA4 e lo script di relay alla tua pagina.

Cosa succede se uso già `footerHTML` per Google Analytics?

Il parametro footerHTML nell'API createTempCart inietta script all'interno dell'iframe di checkout, il che è limitato al tracciamento di eventi a livello di pagina all'interno dell'origine dell'iframe. L'approccio con relay è consigliato perché invia eventi alla tua stessa proprietà GA4 sul tuo dominio, offrendoti piena visibilità del funnel in un'unica proprietà.

Puoi rimuovere in sicurezza qualsiasi script GA4 da footerHTML dopo aver configurato il relay.

Funziona con la modalità debug GA4 in Google Analytics?

Sì. Puoi usare zonosDebug=1 per abilitare i log dello script di relay nella console per sviluppatori del tuo browser e utilizzare la GA4 DebugView in Google Analytics per verificare gli eventi in tempo reale.

Gli ordini di test vengono tracciati?

Tutti gli eventi includono un campo isTestMode. Quando Checkout è in modalità test, gli eventi vengono comunque inviati a GA4 ma contrassegnati con isTestMode: true. Puoi filtrarli in GA4 utilizzando dimensioni personalizzate se necessario.

Prenota una demo