Testar pixels personalizados

Depois de criar um pixel personalizado, é preciso testá-lo para garantir que ele envie os dados corretamente quando ocorrerem eventos em seu site.

Use o Shopify Pixel Helper para testar se os eventos do pixel são carregados e se você se inscreveu corretamente nos eventos da Shopify. O Shopify Pixel Helper permite testar o pixel personalizado na loja virtual para ver os eventos recebidos em tempo real, junto com os dados desses eventos.

Se o pixel personalizado se integra a uma plataforma de terceiros que tenha sua própria ferramenta de auxílio de pixels, use também essa ferramenta para testar se os eventos do pixel são processados e recebidos pela plataforma de terceiros. Por exemplo, se você adicionar um pixel personalizado do TikTok à loja, use o Shopify Pixel Helper e o auxiliar de pixel do TikTok para fazer os testes.

Use o Shopify Pixel Helper e o auxiliar de terceiros na mesma sessão do navegador para testar eventos das duas plataformas ao mesmo tempo.

Aqui está um script de pixel personalizado que vai disparar todos os eventos-padrão para a sandbox e registrar os dados de eventos no console. Os eventos-padrão ficarão visíveis no Shopify Pixel Helper. Além disso, inscreva-se em outras assinaturas em massa, all_events, all_custom_eventse all_dom_events, para descobrir tudo o que os pixels da web podem fornecer. Acesse a API Web Pixels para mais informações.

analytics.subscribe("all_standard_events", event => {
console.log("Event data ", event?.data);
});

Nesta página

Verificar se um pixel personalizado está conectado

Antes de testar o pixel personalizado, verifique se ele está conectado.

Etapas:

No admin da Shopify, acesse Configurações > Eventos de cliente.
Ao lado do pixel que você quer testar, verifique se a coluna Status exibe Conectado.
Se o pixel não estiver conectado, clique em … e em Conectar.

Usar o Shopify Pixel Helper para testar um pixel personalizado

Depois de verificar se o pixel personalizado está conectado, use o Shopify Pixel Helper para testar se o pixel está enviando e recebendo dados da loja. É possível testar apenas um pixel personalizado de cada vez.

Etapas:

No admin da Shopify, acesse Configurações > Eventos de cliente.
Clique no pixel personalizado que você quer testar.
Clique em Testar para abrir o pixel personalizado no site para testar.
Opcional: conforme as configurações de consentimento da loja e as configurações de privacidade do cliente do pixel personalizado, a caixa de diálogo Pixel Helper poderá exibir a mensagem Pixel aguardando consentimento. Siga um dos exemplos abaixo para continuar o teste:
- Aceite o rastreamento no banner de cookies ou nas preferências da loja.
- Clique em Dar autorização para continuar o teste.
- Se o pixel ainda não carregar, revise as configurações de privacidade do cliente.
Para ver quais eventos estão sendo carregados, visite cada página para a qual você quer testar o pixel e veja a caixa de diálogo Pixel Helper para garantir que a inscrição no evento foi realizada e que a função de chamada de retorno foi bem-sucedida na seção Eventos recebidos:
- Acesse uma nova página para testar o evento page_viewed.
- Clique em um produto para testar o evento product_viewed.
- Adicione um produto ao carrinho para testar o evento product_added_to_cart.
- Acesse o checkout para testar o evento checkout_started.
- Insira as informações de frete no checkout para testar se o evento checkout_shipping_info_submitted substitui o evento checkout_started.
- Conclua o checkout para testar se o evento checkout_completed substitui o evento checkout_shipping_info_submitted. Saiba mais sobre como fazer um pedido de teste.
Para ver os dados de eventos recebidos, clique no botão Maximizar para expandir a caixa de diálogo do auxiliar de pixels.

Ver a seção "Eventos recebidos"

Quando você testa quais eventos estão sendo carregados na etapa 5, um destes status é exibido na seção Eventos recebidos da caixa de diálogo Pixel Helper:

Um ponto verde indica que a inscrição no evento foi feita e que a função de chamada de retorno foi bem-sucedida.
Um ponto vermelho indica que a inscrição no evento foi feita, mas a função de chamada de retorno falhou. Saiba como solucionar problemas do pixel personalizado.
O auxiliar de pixel exibe erros não detectados que ocorrem no nível superior ou na função de callback. Os erros de nível superior serão exibidos quando o auxiliar de pixel for carregado. As mensagens de erro de callback são exibidas quando você clica para expandir um evento com um ponto vermelho.
O exemplo de código a seguir contém um erro de callback e um erro de nível superior. Dependendo de onde o erro de nível superior estiver localizado, o pixel poderá funcionar parcialmente.

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Para saber mais sobre como corrigir erros de JavaScript, visite O que deu errado? Resolvendo problemas no JavaScript.

Solucionar problemas do pixel personalizado

Se o pixel não carregar ou for acionado durante o teste e você já tiver revisado os dados de evento e o código do pixel para verificar se há erros, tente estas medidas de solução de problemas.

Revisar as configurações de privacidade do cliente

Se o pixel não carregar ou for acionado durante os testes, talvez o motivo sejam as configurações de privacidade do cliente.

No admin da Shopify, acesse Configurações > Privacidade do cliente para verificar configurações de privacidade do cliente no admin da Shopify que podem se aplicar à sessão. Siga estas etapas de acordo com a situação:

Se a loja opera em uma região com configurações de privacidade de clientes que exigem consentimento, verifique se você deu autorização pelo banner de cookies.
Se não houver configurações de privacidade do cliente que bloqueiem o carregamento do pixel, tente limpar os cookies do navegador para redefinir o banner e dar consentimento.

Caso você use uma ferramenta de terceiros para gerenciar o consentimento, entre em contato com o provedor em questão para pedir ajuda.

Solução de problemas adicionais

Caso ainda não esteja claro se o pixel personalizado está corretamente inscrito em um evento do cliente, tome as seguintes medidas de solução de problemas:

Limpe os cookies do navegador.
Se você está testando um evento-padrão, leia as descrições relacionadas na documentação para desenvolvedores. Assim, você garante que está seguindo as etapas necessárias para acionar o evento.

Testar o auxiliar de pixel de terceiros

O kit de desenvolvimento de software (SDK, na sigla em inglês) do pixel contém as ferramentas para coletar informações sobre o comportamento do cliente. Use o auxiliar de pixel de terceiros do provedor de pixels para testar os comportamentos abaixo e garantir que o SDK do pixel está funcionando conforme o esperado:

Testar se o SDK do pixel de terceiros é carregado

As etapas para verificar a aba de rede dependem do navegador usado. Por exemplo, para saber como verificar a aba de rede no Google Chrome, consulte a documentação para desenvolvedores Inspecionar atividade de rede.

Para testar se o SDK do pixel de terceiros é carregado, primeiro você precisa recuperar o código do URL do SDK do provedor de terceiros para adicioná-lo ao código do pixel. Se precisar de ajuda, entre em contato com o provedor do pixel de terceiros.

Etapas:

No admin da Shopify, acesse Configurações > Eventos de cliente.
Clique no pixel personalizado que você quer testar.
Na seção Código, insira o SDK do pixel que o provedor de terceiros forneceu ao final do código do pixel.
Clique em Salvar.
Acesse sua loja virtual e verifique a aba de rede para consultar se o URL do SDK do provedor de terceiros está sendo transferido por download.
Opcional: se o SDK do pixel de terceiros não carregar, verifique se há erros de execução de JavaScript no sandbox. Por exemplo, no Chrome, é possível selecionar um iFrame específico para analisar os logs do console e, em seguida, filtrar os logs para o pixel específico que está em testes. Para saber mais sobre como verificar erros de execução de JavaScript no Chrome, consulte a documentação Depurar JavaScript do Chrome.

Se o SDK de pixel de terceiros não carregar durante os testes, entre em contato com o provedor em questão para pedir ajuda.

Outros testes do SDK de pixel de terceiros

Para testar se um SDK de pixel de terceiros é inicializado ou se coleta eventos, consulte a documentação do provedor em questão.

Para testar se um SDK de pixel coleta eventos, verifique a aba de rede do navegador. Vale destacar que as etapas para verificar a aba de rede dependem do navegador usado. Por exemplo, para saber como verificar a aba de rede no navegador Google Chrome, consulte a documentação para desenvolvedores Inspecionar atividade de rede.