Como configuro o Google Analytics 4 com o Checkout legado da Zonos em iframe?

Adicione o fragmento gtag.js padrão do GA4 à página que aloja o iframe do Checkout e, em seguida, adicione o script analyticsRelayOnInit.js da Zonos. O script de retransmissão gere automaticamente a comunicação entre iframes e reencaminha os eventos do checkout para a sua propriedade GA4.

Que eventos do GA4 o Zonos Checkout monitoriza?

O Zonos Checkout monitoriza todo o funil de checkout, incluindo 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 o evento purchase padrão do GA4 com os detalhes da transação.

Checkout•

InícioReferência da API Checkout REST API Google Analytics 4

Google Analytics 4 para Checkout em iframe

Q: Como depuro os eventos do GA4 provenientes do Zonos Checkout?

Adicione o parâmetro de consulta zonosDebug=true ao URL da sua página e abra a consola de programador do seu navegador para ver registos detalhados do handshake de retransmissão e dos eventos reencaminhados. Também pode utilizar o DebugView do GA4 no Google Analytics para verificar os eventos em tempo real.

Acompanhe todo o funil de checkout com o GA4 ao utilizar uma integração legada do Checkout baseada em iframe.

Os comerciantes que utilizam a integração legada do Checkout (iframe alojado em iglobalstores.com) podem agora monitorizar eventos de análise do GA4 em todo o funil de checkout. O Zonos Checkout retransmite automaticamente os eventos de análise do iframe para a página principal através de um script de retransmissão leve, para que os eventos surjam na sua propriedade GA4 como se tivessem origem no seu próprio site.

As integrações nativas não precisam deste guia. Se o <zonos-checkout> for apresentado diretamente no seu site (sem iframe), a Zonos chama o window.gtag da sua página no próprio local — basta ativar o Google Analytics no Dashboard da Zonos em Definições do Checkout → Monitorização e garantir que a etiqueta base habitual do GA4 está carregada na página. A configuração de retransmissão abaixo só é necessária quando o Checkout está alojado num iframe numa origem diferente.

Pretende monitorizar conversões do Meta Ads? Consulte o guia do Facebook Pixel -- utiliza o mesmo script de retransmissão e pode funcionar em conjunto com o GA4.

Como funciona

Como o Zonos Checkout é executado dentro de um iframe numa origem diferente, não consegue aceder diretamente à função gtag da sua página. O sistema de retransmissão resolve isto com um handshake em dois passos (passos 1-2), seguido do reencaminhamento de eventos (passo 3):

O Checkout envia um ping à página principal -- Quando o checkout é carregado dentro do iframe, envia uma mensagem à janela principal a indicar que está pronto para retransmitir eventos.
A página principal confirma -- O script de retransmissão na sua página recebe o ping, deteta a sua configuração GA4 existente e responde a indicar que está pronto para receber eventos.
Os eventos são reencaminhados -- À medida que os compradores avançam no checkout, cada evento de análise é enviado através de postMessage para a sua página, onde o script de retransmissão o reencaminha para o gtag.

Todas as mensagens são validadas face a origens fidedignas da Zonos (zonos.com e iglobalstores.com), exclusivamente através de HTTPS.

Pré-requisitos

Uma propriedade GA4 com um ID de medição (formato: G-XXXXXXXXXX). Pode criar uma no Google Analytics.
Uma integração legada do Checkout que carrega o Zonos Checkout num iframe na sua página.

Configuração

Passo 1: adicione a etiqueta GA4 à sua página

Se ainda não tiver o GA4 instalado no seu site, adicione a etiqueta padrão do Google Analytics 4 ao <head> da página que aloja o iframe do Checkout. Substitua G-XXXXXXXXXX pelo seu próprio ID de medição.

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 o seu site já tiver a etiqueta GA4 instalada (por exemplo, através do Google Tag Manager ou de um fragmento de código direto), pode ignorar este passo. O script de retransmissão utilizará a sua função gtag existente.

Pode encontrar este fragmento na sua propriedade GA4 em Administração -> Streams de dados -> selecione o seu stream -> Ver instruções da etiqueta -> Instalar manualmente.

Passo 2: transmita o seu ID de medição ao Zonos Checkout

Indique ao Zonos Checkout qual o ID de medição do GA4 a utilizar, definindo window.Zonos.googleAnalyticId no customHTML do seu Checkout. O Dashboard da Zonos disponibiliza um editor de customHTML nas definições do Checkout -- adicione uma etiqueta <script> como esta:

1<script>

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

3</script>

Este valor é enviado à página principal durante o handshake de retransmissão. Se a sua página principal ainda não tiver o gtag carregado, o script de retransmissão injetará a etiqueta base do GA4 por si, utilizando este ID.

Passo 3: adicione o script de retransmissão de análise da Zonos

Adicione a seguinte etiqueta de script à mesma página, depois da etiqueta GA4. Este script fica à escuta dos eventos de análise do iframe do Zonos Checkout e reencaminha-os para o seu gtag.

1<script

2 async

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

4></script>

Exemplo completo

Eis o aspeto da configuração completa no <head> da sua página:

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>

E está concluído. Assim que ambos os scripts estiverem na sua página, o script de retransmissão conclui automaticamente o handshake com o iframe do checkout e reencaminha todos os eventos do funil de checkout para a sua propriedade GA4.

Referência de eventos do GA4

O Zonos Checkout emite os seguintes eventos através da retransmissão. Todos os eventos incluem um indicador isTestMode e o checkoutSessionId.

Evento↕	Acionador↕	Metadados adicionais↕
`zonos-checkout-start`	O checkout é aberto	--
`zonos-checkout-customer-info`	O comprador introduz as informações de cliente	--
`zonos-checkout-shipping-info`	O comprador seleciona um método de envio	`serviceLevelId`
`zonos-checkout-payment-info`	O comprador introduz os dados de pagamento	`paymentMethod`
`zonos-checkout-payment-fail`	A tentativa de pagamento falha	--
`zonos-checkout-success`	A encomenda é concluída com êxito	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	O comprador fecha o checkout	--
`purchase`	A encomenda é concluída (evento padrão de comércio eletrónico do GA4)	`transaction_id`, `currency`, `value`, `items`

Metadados do evento de compra

O evento purchase segue o esquema do evento de comércio eletrónico purchase do GA4:

Campo↕	Descrição↕
`transaction_id`	ID da encomenda Zonos ou ID da sessão de checkout
`currency`	Código de moeda de três letras (por exemplo, `USD`)
`value`	Valor total da encomenda
`items`	Array de artigos do carrinho, cada um com `item_id`, `item_name`, `price` e `quantity`

Depuração

Para ativar o registo de depuração do script de retransmissão, adicione o parâmetro de consulta zonosDebug=1 ao URL da sua página:

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

Abra a consola de programador do seu navegador para ver registos detalhados do handshake de retransmissão e dos eventos reencaminhados. Isto é útil para verificar que:

O script de retransmissão recebe o ping do iframe do checkout.
O GA4 está configurado com o ID de medição correto.
Os eventos estão a ser reencaminhados para o gtag.

Perguntas frequentes

Tenho de modificar a minha chamada à API `createTempCart`?

Não. O sistema de retransmissão funciona de forma independente da API createTempCart. Só precisa de adicionar a etiqueta GA4 e o script de retransmissão à sua página.

E se já utilizar o `footerHTML` para o Google Analytics?

O parâmetro footerHTML da API createTempCart injeta scripts dentro do iframe do checkout, o que se limita a monitorizar eventos ao nível da página dentro da origem do iframe. A abordagem de retransmissão é a recomendada porque envia os eventos para a sua própria propriedade GA4 no seu domínio, proporcionando visibilidade total do funil numa única propriedade.

Pode remover em segurança quaisquer scripts GA4 do footerHTML depois de configurar a retransmissão.

Isto funciona com o modo de depuração do GA4 no Google Analytics?

Sim. Pode utilizar zonosDebug=1 para ativar os registos do script de retransmissão na consola de programador do seu navegador e utilizar o DebugView do GA4 no Google Analytics para verificar os eventos em tempo real.

As encomendas de teste são monitorizadas?

Todos os eventos incluem um campo isTestMode. Quando o Checkout está em modo de teste, os eventos continuam a ser enviados para o GA4, mas são assinalados com isTestMode: true. Se necessário, pode filtrá-los no GA4 através de dimensões personalizadas.

Marcar uma demonstração