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 fbq 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, incluindo Pixel ID.
- Confirmações da página inicial – O script de retransmissão em sua página recebe o ping, detecta (ou injeta) seu código base Meta Pixel 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 parafbqcom modotrack/trackCustomcorrespondente.
Todas as mensagens são validadas em fontes confiáveis de Zonos (zonos.com
e iglobalstores.com) somente por HTTPS.
Pré-requisitos
- Um Meta Pixel com um Pixel ID (uma sequência numérica, geralmente 15-16 dígitos). Você pode criar um em Gerenciador de Meta Eventos.
- Uma integração herdada de Checkout que carrega Zonos Checkout em um iframe em sua página.
- Facebook Pixel habilitado na configuração Zonos Checkout (no Dashboard de Zonos, nas configurações de Checkout -> Rastreamento).
Configuração
Etapa 1: adicione a base de código Meta Pixel à sua página
Se você ainda não possui o Meta Pixel instalado em seu site, adicione a base de código
Padrão de pixel para <head> da página que hospeda o iframe Checkout.
Substitua YOUR_PIXEL_ID pelo seu próprio Pixel ID numérico.
<!-- Meta Pixel Code --> <script> !(function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s); })( window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', ); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView');</script>Observação: Se o seu site já tiver o Meta Pixel instalado (por exemplo, via Google Tag Manager, a integração nativa do Shopify ou um snippet direto), você pode pule esta etapa. O script de retransmissão usará sua função
fbqexistente.
Você pode encontrar esse snippet em seu Meta Events Manager em Configurações -> Continue a configuração do Pixel -> Instale o código manualmente.
Etapa 2: passe seu Pixel ID para Zonos Checkout
Informe ao Zonos Checkout qual Pixel ID usar configurando
window.Zonos.facebookPixelId dentro do customHTML do seu Checkout. O
Dashboard de Zonos expõe um editor customHTML nas configurações Checkout; adicionar
uma tag <script> como esta:
<script> window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';</script>Este valor é enviado para a página principal durante o handshake.
transmissão. Se sua página principal ainda não tiver fbq carregado, o script
O relé injetará o código base Meta Pixel para você usando este
IDENTIFICAÇÃO.
Etapa 3: adicionar o script de retransmissão analítica Zonos
Adicione a seguinte tag <script> à mesma página que carrega o iframe
de Checkout, após o código base de Meta Pixel. Este é o mesmo script
usado para Google Analytics 4: uma única retransmissão trata de ambos
provedores, portanto, se você já o adicionou para GA4, pule esta etapa.
<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 em <head> na sua página:
<head> <!-- ... your existing head tags ... --> <!-- Meta Pixel Code --> <script> !(function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s); })( window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', ); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView'); </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. Assim que ambos os scripts estiverem na sua página, Facebook Pixel será
habilitado em seu Dashboard, Zonos e customHTML defina o Pixel ID, o
O Relay encaminha automaticamente todos os eventos do funil de checkout
para Gol.
Referência de evento Meta Pixel
Para cada etapa do funil, Zonos Checkout dispara um evento personalizado
(para que você possa criar públicos precisos) como o evento Meta padrão
correspondente (para aparecer nos relatórios de otimização e desempenho).
Metaconversão). Todos os eventos incluem um sinalizador isTestMode e o
checkoutSessionId.
| Gatilho↕ | Evento personalizado (fbq('trackCustom', ...))↕ | Evento padrão (fbq('track', ...))↕ | Metadados adicionais↕ |
|---|---|---|---|
| A finalização da compra é aberta | zonos-checkout-start | InitiateCheckout | -- |
| O comprador insere informações do cliente | zonos-checkout-customer-info | nenhum | -- |
| O comprador seleciona um método de envio | zonos-checkout-shipping-info | nenhum | serviceLevelId |
| O comprador insere informações de pagamento | zonos-checkout-payment-info | AddPaymentInfo | paymentMethod |
| Tentativa de pagamento falha | zonos-checkout-payment-fail | nenhum | -- |
| O pedido foi concluído com sucesso | zonos-checkout-success | nenhum | order_id, currency, value, contents, content_ids |
| O pedido foi concluído (evento de comércio eletrônico) | purchase | Purchase | order_id, currency, value, contents, content_ids |
| O comprador fecha o checkout | zonos-checkout-close | nenhum | -- |
Etapas sem um equivalente de meta padrão (por exemplo, informações do usuário) cliente, informações de envio) dispara apenas o evento personalizado
zonos-checkout-.... Você pode segmentá-los no Meta Ads Manager usando públicos personalizados usando "Event=zonos-checkout-customer-info" etc.
Comprar metadados de eventos
O evento padrão Purchase segue o esquema de
Evento Meta Pixel Purchase.
Os itens do carrinho são mapeados da matriz items estilo GA para
a matriz contents do Meta:
| Campo↕ | Descrição↕ |
|---|---|
value | Valor total do pedido |
currency | Código de moeda de três letras (por exemplo, USD) |
order_id | Zonos ID do pedido ou ID da sessão de checkout |
contents | Matriz de itens do carrinho, cada um com id, quantity e item_price |
content_ids | Matriz de IDs de item (SKU, ID do produto ou nome alternativo do produto) |
content_type | Sempre "product" |
num_items | Quantidade total em todos os itens |
Depuração
Para ativar o log de depuração do script de retransmissão, adicione
o parâmetro de consulta zonosDebug=1 ao 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.
- Meta Pixel está definido com o ID de pixel correto.
- Os eventos são encaminhados para
fbqcom o modotrack/trackCustomesperado.
A extensão do Chrome Ajudante Meta Pixel Também é útil para inspecionar chamadas para Pixel em tempo real.
Perguntas frequentes
Por que dois eventos são disparados para a mesma etapa (por exemplo, zonos-checkout-start e InitiateCheckout)?
Eventos Meta padrão impulsionam a otimização de conversão,
Relatórios de anúncios e públicos semelhantes de forma integrada. Os eventos
Os públicos-alvo personalizados zonos-checkout-... permitem criar públicos-alvo personalizados
mais granular na etapa exata do funil, mesmo quando não há
equivalente Meta padrão (por exemplo, informações do cliente, informações do cliente,
envio). Fotografar ambos oferece o melhor dos dois mundos sem perder nenhum
sinal.
O que acontece se eu executar Google Analytics e Facebook Pixel ao mesmo tempo?
Você não precisa de dois scripts de retransmissão: o mesmo analyticsRelayOnInit.js
gerencia ambos os provedores em um único handshake. Adicionar etiqueta
Base GA4 e base de código Meta Pixel para seu <head>, defina ambos
window.Zonos.googleAnalyticId como window.Zonos.facebookPixelId em
customHTML e habilite ambos os provedores em seu Dashboard de Zonos. Cada evento
É distribuído a fornecedores qualificados.
O que acontece se minha página inicial não tiver o Meta Pixel instalado?
Se o seu customHTML configura window.Zonos.facebookPixelId e o script
relé detecta que não há fbq na página, ele injetará o código base
de Meta Pixel por você durante o handshake usando o Pixel ID
que ele forneceu. Você também pode pré-instalar a base de código Meta Pixel
por conta própria se quiser acionar PageView e outros eventos fora do funil
check-out.
Os pedidos de teste são registrados?
Todos os eventos incluem um campo isTestMode. Quando Checkout está no modo
No modo de teste, os eventos ainda são transmitidos para o Meta, mas são marcados com
isTestMode: true. Você pode filtrá-los no Meta Ads Manager ou excluí-los com
regras de conversão personalizadas.
A API de conversões (CAPI) substitui isso?
Não - esta é uma integração Pixel do lado do navegador em execução navegadores dos seus compradores. A API Meta Conversions é um canal separado servidor para servidor que alguns comerciantes usam em conjunto com o Pixel para redundância. Ambos são complementares e o relé Zonos gerencia apenas o Pixel no lado do navegador.
Facebook Pixel para iframe Checkout
Acompanhe todo o funil de checkout com Meta (Facebook) Pixel ao usar uma integração herdada baseada em iframe Checkout.
Comerciantes que usam a integração legada Checkout (iframe hospedado em
iglobalstores.com) pode rastrear eventos de segurança. Meta Pixel em todo o funil de checkout. O Zonos Checkout retransmite automaticamente eventos do iframe para a página principal usando o mesmo script de retransmissão leve usado para Google Analytics 4, de para que os eventos apareçam no seu Meta Events Manager como se tivessem sido originado de seu próprio site.Para cada etapa do funil, dois eventos são emitidos:
zonos-checkout-...(viafbq('trackCustom', ...)) para públicos personalizados de funil completo.fbq('track', ...)) para otimização integrada, por exemplo,InitiateCheckout,AddPaymentInfoePurchase.