Testar pixels personalizados

Depois de criar um pixel personalizado, é preciso testá-lo para garantir que ele seja carregado e que você se inscreveu corretamente nos eventos de cliente em sua loja virtual.

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.

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.

Dica

Se você tiver uma loja de desenvolvimento, teste os pixels nela para verificar se funcionam conforme o esperado antes de adicioná-los à loja virtual ativa.

Verificar se um pixel personalizado está conectado

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

Etapas:

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

Usar o Shopify Pixel Helper para testar um pixel personalizado

Observação

O Shopify Pixel Helper não é compatível com lojas de comércio headless ou lojas protegidas por senha.

Se a loja virtual for protegida por senha, considere remover a senha para usar o Shopify Pixel Helper.

Depois de verificar se o pixel personalizado está conectado, use o Shopify Pixel Helper para testar se o pixel está carregando e recebendo dados.

O Shopify Pixel Helper permite testar o pixel na loja virtual para ver os eventos recebidos em tempo real, junto com os dados desses eventos. É possível testar apenas um pixel personalizado de cada vez.

Etapas:

1. No admin da Shopify, acesse Configurações > Eventos de cliente.
2. Clique no pixel personalizado que você quer testar.
3. Clique em Testar para abrir o pixel personalizado no site para testar.

4. 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.

5. 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.

6. 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.

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.

Observação

Banners de cookie permitem solicitar aos clientes o consentimento para o uso de cookies. Acesse a Shopify App Store para adicionar um à loja.

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 de terceiros do pixel é carregado
• Testar se o SDK de terceiros do pixel é inicializado e recebe eventos

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:

1. No admin da Shopify, acesse Configurações > Eventos de cliente.
2. Clique no pixel personalizado que você quer testar.
3. Na seção Código, insira o SDK do pixel que o provedor de terceiros forneceu ao final do código do pixel.
4. Clique em Salvar.
5. 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.
6. 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.