Os Shopify Web Pixels são a solução do Shopify para rastrear dados de compras, como taxas de conversão. Existem duas formas principais de interagir com eles:

App Web Pixels
Custom Web Pixels

App Web Pixels

Alguns pixels de apps (por exemplo, Omega Facebook Pixel) se integram diretamente aos Shopify Web Pixels. Esses apps não exigem nenhuma configuração adicional para funcionar com a Aftersell.

Custom Web Pixels

Os pixels personalizados permitem soluções sob medida caso nenhum pixel de app disponível no marketplace do Shopify atenda às suas necessidades. A seguir, detalhamos como converter scripts de rastreamento existentes da página de status do pedido para usar pixels personalizados. Observe os riscos potenciais dos pixels personalizados antes de prosseguir. Se você usa especificamente o Google Tag Manager, o Shopify fornece documentação útil para concluir essa migração. Há 3 etapas principais para criar um pixel personalizado para rastreamento de conversões.

Preparar o SDK JavaScript de terceiros
Configurar o rastreamento de conversões usando web pixels
Conectar seu pixel personalizado

1. Preparando o SDK JavaScript de terceiros

Você vai querer remover qualquer HTML presente no código do pixel fornecido. Qualquer JavaScript carregado por meio de uma tag HTML <script> deve, em vez disso, ser carregado usando uma abordagem apenas com JavaScript. Esse processo é abordado em mais detalhes aqui. Um exemplo usando o Google Tag Manager Código do pixel original:

<!-- Global site tag (gtag.js) - Google Analytics -->  
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>  
<script>  
  window.dataLayer = window.dataLayer || [];  
  function gtag(){dataLayer.push(arguments);}  
  gtag('js', new Date());  
  gtag('config', ''YOUR_PIXEL_ID'');  
</script>

Após remover o HTML e retrabalhar as tags <script>:

const script = document.createElement('script');  
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');  
script.setAttribute('async', '');  
document.head.appendChild(script);  
  
window.dataLayer = window.dataLayer || [];  
function gtag(){dataLayer.push(arguments);}  
gtag('js', new Date());  
gtag('config', 'YOUR_PIXEL_ID');

Observe que o SDK de pixel do Google não transmite dados automaticamente a partir de um pixel personalizado do Shopify. Para transmitir dados, você precisa se inscrever nos eventos.

2. Configurando o rastreamento de conversões usando web pixels

Para rastrear conversões usando pixels personalizados, inscreva-se no evento checkout_completed fornecido pelo Shopify. Esse evento é disparado na página pós-compra, se ela for exibida ao seu cliente, ou na página de agradecimento, caso contrário. Esse evento é disparado apenas uma vez em qualquer um dos casos, então nenhuma lógica extra é necessária para evitar a contagem dupla de uma compra.

analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});

Use esta referência para ver quais pontos de dados você pode obter do event. Evento checkout_completed do Shopify Um exemplo de pixel personalizado da Meta Código de rastreamento disparado quando um checkout é concluído:

!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');  
  
// replace YOUR_PIXEL_ID with the pixel ID provided by third-party  
fbq('init', YOUR_PIXEL_ID);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});

3. Conectando seu pixel personalizado

Antes de adicionar um pixel personalizado, remova ou modifique quaisquer pixels existentes para garantir que os eventos de clientes não sejam contados duas vezes. O código de pixel existente deve ser removido manualmente de qualquer lugar em que exista, como theme.liquid, checkout.liquid (apenas lojistas Plus) e os Additional scripts nas configurações do seu checkout. Feito isso, siga estas etapas para conectar um pixel personalizado à sua loja.

Acesse Settings > Customer Events > Custom Pixels > Add Custom Pixel
1. Digite um nome para o seu pixel personalizado.
Cole o código do seu pixel personalizado na seção “Code”.
Garanta que as configurações de privacidade do cliente estejam devidamente configuradas.
Clique em “Save” no seu pixel personalizado.
Clique em “Connect” para ativar seu pixel personalizado!

Primeiros passos

Página inicial

Melhores práticas

Upsells pós-compra

Upsells no checkout (Shopify Plus)

Página de agradecimento

Upsells na página de produto

Rokt Thanks

Estratégias

Análises e rastreamento

Integrações

Aftersell MCP

Faturamento e conta

Solução de problemas

Configurando web pixels do Shopify

App Web Pixels

Custom Web Pixels

1. Preparando o SDK JavaScript de terceiros

2. Configurando o rastreamento de conversões usando web pixels

3. Conectando seu pixel personalizado

​App Web Pixels

​Custom Web Pixels

​1. Preparando o SDK JavaScript de terceiros

​2. Configurando o rastreamento de conversões usando web pixels

​3. Conectando seu pixel personalizado

App Web Pixels

Custom Web Pixels

1. Preparando o SDK JavaScript de terceiros

2. Configurando o rastreamento de conversões usando web pixels

3. Conectando seu pixel personalizado