Como funciona
Como o Zonos Checkout está sendo executado dentro de um iframe em uma origem diferente, ele não
pode acessar diretamente a função gtag em sua página. O sistema de
relay resolve isso com um handshake de duas etapas (etapas 1-2)
seguido pelo encaminhamento de eventos (etapa 3):
- Checkout envia um ping para a página principal -- Quando o checkout é carrega dentro do iframe, envia uma mensagem para a janela principal indicando que está pronto para transmitir eventos.
- Confirmações da página inicial – O script de retransmissão em sua página recebe o ping, detecta sua configuração GA4 existente e sinaliza que está pronto para receber eventos.
- Os eventos são encaminhados -- À medida que os compradores avançam no
checkout, cada evento analítico é enviado via
postMessagepara o seu página, onde o script de retransmissão o encaminha paragtag.
Todas as mensagens são validadas em fontes confiáveis Zonos
(zonos.com e iglobalstores.com) somente por HTTPS.
Pré-requisitos
- Uma propriedade GA4 com um ID de medição (formato:
G-XXXXXXXXXX). Você pode criar um em Google Analytics. - Uma integração herdada de Checkout que carrega Zonos Checkout em um iframe em sua página.
Configuração
Etapa 1: adicione a tag GA4 à sua página
Se você ainda não tem o GA4 instalado em seu site, adicione a tag GA4 padrão.
Google Analytics 4 a <head> da página que hospeda o iframe Checkout.
Substitua G-XXXXXXXXXX pelo seu próprio ID de medição.
<!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX');</script>Observação: se o seu site já tiver a tag GA4 instalada (por exemplo, via Gerenciador de tags do Google ou um snippet direto), você pode pular esta etapa. O roteiro de o relé usará sua função
gtagexistente.
Você pode encontrar esse snippet em sua propriedade do GA4 em Administrador -> Dados Streams -> selecione seu stream -> Ver instruções da tag -> Instalar manualmente.
Etapa 2: passe seu ID de medição para Zonos Checkout
Informe ao Zonos Checkout qual ID de medição do GA4 usar configurando
window.Zonos.googleAnalyticId dentro do customHTML do seu Checkout. O
Dashboard de Zonos expõe um editor de customHTML na configuração
Checkout - adicione uma tag <script> como esta:
<script> window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';</script>Este valor é enviado para a página principal durante o handshake.
transmissão. Se sua página principal ainda não tiver gtag carregado, o script
o relé injetará a tag base GA4 para você usando esse ID.
Etapa 3: adicionar o script de retransmissão analítica Zonos
Adicione a seguinte tag de script à mesma página, após o
Etiqueta GA4. Este script escuta eventos de análise de iframe.
Zonos Checkout e os encaminha para seu gtag.
<script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"></script>Exemplo completo
Esta é a aparência da configuração completa no <head> da sua página:
<head> <!-- ... sus etiquetas head existentes ... --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX" ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script> <!-- Zonos analytics relay for iframe checkout --> <script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js" ></script></head>Isso é tudo. Quando os dois scripts estiverem na sua página, o O Relay conclui automaticamente o handshake com o iframe checkout e encaminha todos os eventos do funil de checkout para sua propriedade GA4.
Referência de evento GA4
Zonos Checkout emite os seguintes eventos via relé. tudo
Os eventos incluem um sinalizador isTestMode e checkoutSessionId.
| Evento↕ | Gatilho↕ | Metadados adicionais↕ |
|---|---|---|
zonos-checkout-start | A finalização da compra é aberta | -- |
zonos-checkout-customer-info | O comprador insere informações do cliente | -- |
zonos-checkout-shipping-info | O comprador seleciona um método de envio | serviceLevelId |
zonos-checkout-payment-info | O comprador insere os dados de pagamento | paymentMethod |
zonos-checkout-payment-fail | Tentativa de pagamento falha | -- |
zonos-checkout-success | O pedido foi concluído com sucesso | transaction_id, currency, value, items |
zonos-checkout-close | O comprador fecha o checkout | -- |
purchase | O pedido foi concluído (evento de comércio eletrônico padrão GA4) | transaction_id, currency, value, items |
Comprar metadados de eventos
O evento purchase segue o esquema de
Evento de comércio eletrônico GA4 purchase:
| Campo↕ | Descrição↕ |
|---|---|
transaction_id | ID do pedido Zonos ou ID da sessão de checkout |
currency | Código de moeda de três letras (por exemplo, USD) |
value | Valor total do pedido |
items | Matriz de itens do carrinho, cada um com item_id, item_name, price e quantity |
Depuração
Para ativar o log de depuração do script de retransmissão, adicione o
Consulte o parâmetro zonosDebug=1 no URL da sua página:
https://www.yourstore.com/checkout?zonosDebug=1Abra o console do desenvolvedor do seu navegador para visualizar registros detalhados do handshake de retransmissão e eventos encaminhados. Isto é útil verificar que:
- O script de retransmissão recebe o ping do iframe de checkout.
- GA4 está configurado com o ID de medição correto.
- Os eventos estão sendo encaminhados para
gtag.
Perguntas frequentes
Preciso modificar minha chamada de API createTempCart?
Não. O sistema de retransmissão funciona independentemente da API
createTempCart. Você só precisa adicionar a tag GA4 e o script.
transmitir para sua página.
E se eu já usar footerHTML para Google Analytics?
O parâmetro footerHTML na API
createTempCart
injeta scripts dentro do iframe de checkout, que é limitado ao rastreamento
de eventos no nível da página na origem do iframe. É recomendado o
abordagem de retransmissão porque envia eventos para sua própria propriedade GA4 em seu
domínio, proporcionando visibilidade total do funil em uma única propriedade.
Você pode remover com segurança qualquer script GA4 de footerHTML após
para configurar a transmissão.
Isso funciona com o modo de depuração GA4 em Google Analytics?
Sim. Você pode usar zonosDebug=1 para ativar logs de script.
retransmitir no console do desenvolvedor do seu navegador e usar
GA4 DebugView no Google
Analytics para verificar eventos em tempo real.
Os pedidos de teste são rastreados?
Todos os eventos incluem um campo isTestMode. Quando Checkout está no modo
teste, os eventos ainda são enviados para GA4, mas são marcados com
isTestMode: true. Você pode filtrá-los no GA4 usando dimensões personalizadas
se você precisar.
Google Analytics 4 para iframe Checkout
Acompanhe todo o funil de checkout com o GA4 usando um Integração legada de Checkout baseada em iframe.
Comerciantes que usam a integração legada Checkout (iframe hospedado em
iglobalstores.com) pode rastrear eventos de backup. Análise GA4 em todo o funil de checkout. O Zonos Checkout retransmite automaticamente eventos do iframe para a página principal usando um script de retransmissão leve, para que os eventos apareçam em sua propriedade GA4 como se tivessem origem em seu próprio site.