Como adicionar código de rastreamento de conversões apenas na página de checkout no Shopify

O rastreamento de conversões vai ajudar você a entender melhor o valor total do seu site Shopify e de quaisquer campanhas de marketing online que você esteja executando. Com o rastreamento de conversões configurado, você poderá acompanhar quantos produtos está vendendo e qual canal de marketing trouxe o cliente para o seu site. Ao adicionar o rastreamento de conversões à página de checkout da sua loja, você consegue monitorar facilmente com que frequência seus clientes chegam ao checkout e concluem uma compra.

Isso ajuda a entender as tendências de compra da sua loja Shopify. Para adicionar o código de rastreamento de conversões à página de checkout da sua loja seguindo os padrões mais recentes do Shopify, você precisa entender as tarefas a seguir.

Google Analytics

Primeiro, você precisará adicionar o código de rastreamento de conversões do Google Analytics da sua loja usando o framework de Customer Events do Shopify. Aqui está um guia para configurar isso usando o Customer Events do Shopify e o sistema de pixels personalizados.

Rastreando pedidos

O Shopify atualizou a forma como scripts de rastreamento devem ser implementados. A seção Additional Scripts (descontinuada) e o checkout.liquid não são mais suportados. Siga estes passos para configurar o rastreamento de conversões:

• Vá em Settings no admin do Shopify
• Clique em Customer Events
• Clique em Custom pixels
• Clique em Add pixel para criar um novo pixel personalizado ou editar um existente
• Cole seu código de rastreamento no editor de código do pixel personalizado
• Clique em Save e, em seguida, clique em Connect pixel para ativá-lo
• Teste usando as ferramentas de desenvolvedor do navegador ou o Shopify Pixel Helper

Importante: A partir de 28 de agosto de 2025, scripts em checkout.liquid e Additional Scripts não podem mais ser editados. Todo o rastreamento de conversões agora deve usar o framework Customer Events com pixels personalizados ou pixels de apps. Se você ainda não migrou, os métodos legados de rastreamento deixaram de funcionar.

Adicionar rastreamento de conversões

Para adicionar o rastreamento de conversões apenas na página de agradecimento, você pode criar um pixel personalizado que se inscreve no evento checkout_completed:

analytics.subscribe("checkout_completed", (event) => {
  /* Start Tracking Code */
  gtag('event', 'conversion', {
    'send_to': 'AW-xxxx/xxxx',
    'currency': event.data.checkout.currencyCode,
    'transaction_id': event.data.checkout.order.id,
    'value': event.data.checkout.totalPrice.amount
  });
  /* End Tracking Code */
});

Ambiente de rastreamento em sandbox de segurança

Agora, o Shopify executa todas as personalizações do checkout e pixels em um ambiente seguro em sandbox. Isso melhora a segurança, o desempenho e a privacidade do cliente, mas também significa que seu código precisa cumprir padrões rigorosos. Pixels personalizados não podem acessar elementos do DOM diretamente nem renderizar elementos de interface, mas podem se inscrever em eventos padronizados de customer events.

Rastreamento básico de conversões

Digamos que um terceiro tenha pedido para você integrar um pixel de rastreamento como este:

<img src="https://www.tracking.com/u?amount=<AMOUNT>&amp;order-id=<ORDER_ID>&amp;currency=<CURRENCY>" height="1" width="1" />

Para implementar isso em um pixel personalizado, você se inscreveria no evento checkout_completed e acessaria os seguintes dados:

• O preço total do pedido em event.data.checkout.totalPrice.amount
• O ID do pedido em event.data.checkout.order.id
• A moeda em event.data.checkout.currencyCode

Quando o cliente concluir o checkout, seu pixel personalizado será disparado com os dados corretos:

analytics.subscribe("checkout_completed", (event) => {
  const img = document.createElement('img');
  img.src = `https://www.tracking.com/pixel.gif?amount=${event.data.checkout.totalPrice.amount}&order-id=${event.data.checkout.order.id}&currency=${event.data.checkout.currencyCode}`;
  img.height = 1;
  img.width = 1;
  document.body.appendChild(img);
});

Quando o cliente concluir o checkout, o código acima garantirá que o pixel seja disparado com os dados corretos usando métodos seguros e atualizados.

Rastreamento de upsell pós-compra

Se você estiver usando upsells pós-compra com apps de Checkout Extensibility, você pode rastrear conversões tanto pelo evento checkout_completed (que dispara na primeira página de oferta de upsell) quanto por eventos adicionais de compra para obter insights mais completos:

analytics.subscribe("checkout_completed", (event) => {
  // Track initial purchase completion
  console.log('Purchase completed', event.data.checkout);
});

Solução de problemas

• A seção Additional Scripts agora é apenas para visualização a partir de 28 de agosto de 2025. Todo o rastreamento deve ser migrado para Customer Events com pixels personalizados ou pixels de apps.
• Use a aba Network das ferramentas de desenvolvedor do navegador para validar que o evento checkout_completed foi disparado e que seu código de rastreamento foi executado com sucesso.
• Você também pode usar o Shopify Pixel Helper para testar seus pixels personalizados e verificar se os eventos estão sendo rastreados corretamente.
• Observação: o Google Tag Manager não consegue depurar Customer Events devido à natureza em sandbox do ambiente de checkout do Shopify. Evite depender do modo de pré-visualização do GTM — em vez disso, inspecione os logs de rede manualmente usando o console de desenvolvedor do seu navegador.
• Se estiver migrando de métodos antigos de rastreamento, certifique-se de desconectar pixels legados para evitar rastreamento de conversões duplicado.