Como configuro o Facebook Pixel com o iframe legado do Zonos Checkout?

Adicione a base de código Meta Pixel padrão à página que hospeda o iframe Checkout, defina window.Zonos.facebookPixelId no customHTML de seu Checkout, habilite Facebook Pixel em seu Dashboard da Zonos e adicione o script analyticsRelayOnInit.js de Zonos. O script de retransmissão lida automaticamente com a comunicação entre iframes e encaminha eventos de checkout para Meta.

Quais eventos Facebook Pixel o Zonos Checkout registra?

Para cada etapa do funil, Zonos dispara um evento personalizado (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 Meta padrão correspondente quando existe: InitiateCheckout ao iniciar o checkout, AddPaymentInfo para informações de pagamento e Purchase para a conclusão do pedido.

Posso executar Google Analytics e Facebook Pixel ao mesmo tempo?

Sim. O mesmo script analyticsRelayOnInit.js gerencia ambos os provedores em um único handshake. Adicione as duas tags base à sua página, defina window.Zonos.googleAnalyticId e window.Zonos.facebookPixelId como customHTML e ative ambos os provedores em seu Dashboard de Zonos.

Como faço para depurar eventos do Facebook Pixel do Zonos Checkout?

Adicione o parâmetro de consulta zonosDebug=1 ao URL da sua página e abra o console do desenvolvedor do seu navegador para visualizar logs detalhados do handshake de retransmissão e eventos encaminhados. A extensão Meta Pixel Helper Chrome também é útil para inspecionar chamadas para Pixel em tempo real.

Checkout•

InícioReferência da API Checkout REST API Facebook Pixel

Facebook Pixel para iframe do Checkout

Acompanhe todo o funil de checkout com o Meta (Facebook) Pixel ao usar uma integração legada do Checkout baseada em iframe.

Comerciantes que usam a integração legada do Checkout (iframe hospedado em iglobalstores.com) podem rastrear eventos do Meta Pixel em todo o funil de checkout. O Zonos Checkout retransmite automaticamente os eventos de analytics do iframe para a página principal usando o mesmo script de retransmissão leve usado para o Google Analytics 4, de modo que os eventos aparecem no seu Meta Events Manager como se tivessem se originado do seu próprio site.

Para cada etapa do funil, dois eventos são emitidos:

Um evento personalizado chamado zonos-checkout-... (via fbq('trackCustom', ...)) para públicos personalizados de funil completo.
O evento padrão correspondente do Meta (via fbq('track', ...)) para otimização integrada, por exemplo, InitiateCheckout, AddPaymentInfo e Purchase.

Integrações nativas não precisam deste guia. Se <zonos-checkout> for renderizado diretamente em seu site (sem iframe), a Zonos chama o window.fbq da sua página diretamente — basta ativar o Facebook Pixel no dashboard da Zonos em Configurações do Checkout → Rastreamento e garantir que o código base habitual do Meta Pixel esteja carregado na página. A configuração de retransmissão abaixo só é necessária quando o Checkout está hospedado em um iframe de origem diferente.

Como funciona

Como o Zonos Checkout é executado dentro de um iframe em uma origem diferente, ele não pode acessar diretamente a função fbq da sua página. O sistema de retransmissão resolve isso com um handshake de duas etapas (etapas 1-2) seguido pelo encaminhamento de eventos (etapa 3):

O Checkout envia um ping para a página principal -- Quando o checkout é carregado dentro do iframe, ele envia uma mensagem para a janela principal indicando que está pronto para retransmitir eventos, incluindo o Pixel ID.
A página principal confirma -- O script de retransmissão na sua página recebe o ping, detecta (ou injeta) seu código base do Meta Pixel e sinaliza de volta que está pronto para receber eventos.
Os eventos são encaminhados -- À medida que os compradores avançam pelo checkout, cada evento de analytics é enviado via postMessage para a sua página, onde o script de retransmissão o encaminha para o fbq com o modo track / trackCustom apropriado.

Todas as mensagens são validadas contra origens confiáveis da Zonos (zonos.com e iglobalstores.com), somente via HTTPS.

Pré-requisitos

Um Meta Pixel com um Pixel ID (uma sequência numérica, geralmente com 15-16 dígitos). Você pode criar um no Meta Events Manager.
Uma integração legada do Checkout que carrega o Zonos Checkout em um iframe na sua página.
Facebook Pixel habilitado nas configurações do seu Zonos Checkout (no dashboard da Zonos, em Configurações do Checkout -> Rastreamento).

Configuração

Etapa 1: adicione o código base do Meta Pixel à sua página

Se você ainda não tem o Meta Pixel instalado no seu site, adicione o código base padrão do Pixel ao <head> da página que hospeda o iframe do Checkout. Substitua YOUR_PIXEL_ID pelo seu próprio Pixel ID numérico.

1

3<script>

4 !(function (f, b, e, v, n, t, s) {

5 if (f.fbq) return;

6 n = f.fbq = function () {

7 n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);

8 };

9 if (!f._fbq) f._fbq = n;

10 n.push = n;

11 n.loaded = !0;

12 n.version = '2.0';

13 n.queue = [];

14 t = b.createElement(e);

15 t.async = !0;

16 t.src = v;

17 s = b.getElementsByTagName(e)[0];

18 s.parentNode.insertBefore(t, s);

19 })(

20 window,

21 document,

22 'script',

23 'https://connect.facebook.net/en_US/fbevents.js',

24 );

25 fbq('init', 'YOUR_PIXEL_ID');

26 fbq('track', 'PageView');

27</script>

Observação: Se o seu site já tem o Meta Pixel instalado (por exemplo, via Google Tag Manager, a integração nativa do Shopify ou um snippet direto), você pode pular esta etapa. O script de retransmissão usará sua função fbq existente.

Você pode encontrar esse snippet no seu Meta Events Manager em Configurações do seu Pixel -> Continuar configuração do Pixel -> Instalar código manualmente.

Etapa 2: passe seu Pixel ID para o Zonos Checkout

Informe ao Zonos Checkout qual Pixel ID usar configurando window.Zonos.facebookPixelId dentro do customHTML do seu Checkout. O dashboard da Zonos expõe um editor de customHTML nas configurações do Checkout -- adicione uma tag <script> como esta:

1<script>

2 window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';

3</script>

Esse valor é enviado para a página principal durante o handshake de retransmissão. Se sua página principal ainda não tiver o fbq carregado, o script de retransmissão injetará o código base do Meta Pixel para você usando esse ID.

Etapa 3: adicione o script de retransmissão de analytics da Zonos

Adicione a seguinte tag de script à mesma página que carrega o iframe do Checkout, após o código base do Meta Pixel. Este é o mesmo script usado para o Google Analytics 4 -- uma única retransmissão cuida dos dois provedores, então, se você já o adicionou para o GA4, pule esta etapa.

1<script

2 async

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

4></script>

Exemplo completo

Veja como fica a configuração completa no <head> da sua página:

1<head>

2 

4 

6 <script>

7 !(function (f, b, e, v, n, t, s) {

8 if (f.fbq) return;

9 n = f.fbq = function () {

10 n.callMethod

11 ? n.callMethod.apply(n, arguments)

12 : n.queue.push(arguments);

13 };

14 if (!f._fbq) f._fbq = n;

15 n.push = n;

16 n.loaded = !0;

17 n.version = '2.0';

18 n.queue = [];

19 t = b.createElement(e);

20 t.async = !0;

21 t.src = v;

22 s = b.getElementsByTagName(e)[0];

23 s.parentNode.insertBefore(t, s);

24 })(

25 window,

26 document,

27 'script',

28 'https://connect.facebook.net/en_US/fbevents.js',

29 );

30 fbq('init', 'YOUR_PIXEL_ID');

31 fbq('track', 'PageView');

32 </script>

34 

36 <script

37 async

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

39 ></script>

40</head>

Pronto. Assim que os dois scripts estiverem na sua página, o Facebook Pixel estiver habilitado no dashboard da Zonos, e o customHTML definir o Pixel ID, a retransmissão encaminha automaticamente todos os eventos do funil de checkout para o Meta.

Referência de eventos do Meta Pixel

Para cada etapa do funil, o Zonos Checkout dispara tanto um evento personalizado (para que você possa criar públicos precisos) quanto o evento padrão correspondente do Meta (para que apareça nos relatórios de otimização e conversão do Meta). Todos os eventos incluem um sinalizador isTestMode e o checkoutSessionId.

Gatilho↕	Evento personalizado (`fbq('trackCustom', ...)`)↕	Evento padrão (`fbq('track', ...)`)↕	Metadados adicionais↕
O checkout é aberto	`zonos-checkout-start`	`InitiateCheckout`	--
O comprador insere as 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 os dados de pagamento	`zonos-checkout-payment-info`	`AddPaymentInfo`	`paymentMethod`
A tentativa de pagamento falha	`zonos-checkout-payment-fail`	nenhum	--
O pedido é concluído com sucesso	`zonos-checkout-success`	nenhum	`order_id`, `currency`, `value`, `contents`, `content_ids`
O pedido é concluído (evento de e-commerce)	`purchase`	`Purchase`	`order_id`, `currency`, `value`, `contents`, `content_ids`
O comprador fecha o checkout	`zonos-checkout-close`	nenhum	--

Etapas sem um evento padrão equivalente do Meta (por exemplo, informações do cliente, informações de envio) disparam apenas o evento personalizado zonos-checkout-.... Você pode segmentar esses eventos no Meta Ads Manager por meio de públicos personalizados usando "Event = zonos-checkout-customer-info", etc.

Metadados do evento Purchase

O evento padrão Purchase segue o esquema do evento Purchase do Meta Pixel. Os itens do carrinho são mapeados do array items no estilo GA para o array 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`	ID do pedido da Zonos ou ID da sessão de checkout
`contents`	Array de itens do carrinho, cada um com `id`, `quantity` e `item_price`
`content_ids`	Array de IDs dos itens (o SKU, ID do produto ou nome do produto como alternativa)
`content_type`	Sempre `"product"`
`num_items`	Quantidade total de 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 à URL da sua página:

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

Abra o console do desenvolvedor do seu navegador para ver logs detalhados do handshake de retransmissão e dos eventos encaminhados. Isso é útil para verificar que:

O script de retransmissão recebe o ping do iframe do checkout.
O Meta Pixel está configurado com o Pixel ID correto.
Os eventos estão sendo encaminhados para o fbq com o modo track / trackCustom esperado.

A extensão do Chrome Meta Pixel Helper também é útil para inspecionar chamadas do Pixel em tempo real.

Perguntas frequentes

Por que dois eventos são disparados para a mesma etapa (por exemplo, `zonos-checkout-start` e `InitiateCheckout`)?

Os eventos padrão do Meta impulsionam a otimização de conversão, os relatórios de anúncios e os públicos semelhantes de forma nativa. Os eventos personalizados zonos-checkout-... permitem criar públicos personalizados mais granulares na etapa exata do funil, mesmo quando não existe um equivalente padrão do Meta (por exemplo, informações do cliente, informações de envio). Disparar os dois oferece o melhor dos dois mundos sem perder nenhum sinal.

E se eu estiver usando o Google Analytics e o Facebook Pixel ao mesmo tempo?

Você não precisa de dois scripts de retransmissão -- o mesmo analyticsRelayOnInit.js cuida dos dois provedores em um único handshake. Adicione a tag base do GA4 e o código base do Meta Pixel ao seu <head>, defina window.Zonos.googleAnalyticId e window.Zonos.facebookPixelId no customHTML, e habilite os dois provedores no dashboard da Zonos. Cada evento é distribuído para os provedores que estiverem habilitados.

E se a minha página principal não tiver o Meta Pixel instalado?

Se o seu customHTML definir window.Zonos.facebookPixelId e o script de retransmissão detectar que não há fbq na página, ele injetará o código base do Meta Pixel para você durante o handshake, usando o Pixel ID fornecido. Você também pode pré-instalar o código base do Meta Pixel por conta própria, caso queira disparar PageView e outros eventos fora do funil de checkout.

Os pedidos de teste são rastreados?

Todos os eventos incluem um campo isTestMode. Quando o Checkout está em modo de teste, os eventos ainda são retransmitidos para o Meta, mas 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 do Pixel do lado do navegador, que roda nos navegadores dos seus compradores. A Meta Conversions API é um canal separado, servidor a servidor, que alguns comerciantes usam junto com o Pixel para redundância. Os dois são complementares, e a retransmissão da Zonos cuida apenas do Pixel do lado do navegador.

Agendar uma demonstração