Rastreamento por pixel na página pós-venda

Aviso

Os scripts de rastreamento são personalizações avançadas não qualificadas para receber atendimento da equipe da Shopify. Como seu uso requer conhecimento de linguagens de web design, como HTML, CSS, JavaScript e Liquid, considere contratar um Parceiro da Shopify caso você não se sinta à vontade para trabalhar com scripts.

Se a loja tiver instalado um app que adiciona uma página de pós-venda ao checkout, talvez o rastreamento personalizado por pixels não capture determinados eventos. Os pixels incluídos na caixa Scripts adicionais rastreiam apenas os eventos na página de status do pedido, que vem após a página pós-venda no checkout. Por isso, se um cliente sair da loja na página pós-venda, nenhum evento na página de status do pedido será rastreado.

Para capturar os eventos de conversão corretamente, é possível adicionar um script que rastreia eventos na página pós-venda, inclusive compras adicionais, como upsells. No entanto, lembre-se de ajustar o script da página de status do pedido para ignorar eventos já capturados pelo script da página pós-venda.

A maneira como a loja rastreia os eventos precisa ser alterada apenas se você usar um pixel de rastreamento personalizado. Por exemplo, se você configurar o Google Analytics em Loja virtual > Preferências, ele já vai capturar corretamente os eventos na página pós-venda.

Considerações

O script adicional da página pós-venda é semelhante aos da página de status do pedido, mas com algumas diferenças fundamentais:

• O script é adicionado à página pós-venda, não à página de status do pedido.
• O campo permite apenas JavaScript. Códigos Liquid não são aceitos.
• A única tag HTML permitida é <script>.
• O script é executado dentro de um sandbox e não está incluído na página principal.
• O script só poderá ser adicionado à página pós-venda se a loja tiver instalado um app que inclua uma página desse tipo ao checkout.

A execução do script dentro de um sandbox garante que o script seja seguro e usado para a finalidade pretendida.

O Atendimento ao cliente da Shopify não pode auxiliar com scripts de páginas pós-venda. Se você precisar de ajuda, é possível fazer uma publicação na Comunidade Shopify ou contratar um Parceiro da Shopify.

Compatibilidade com scripts na página de status do pedido

Para que os pixels rastreiem corretamente todos os eventos de conversão, configure scripts de rastreamento tanto na página pós-venda quanto na página de status do pedido. Lembre-se de que é possível usar a variável do Liquid post_purchase_page_accessed nos scripts executados na página de status do pedido para evitar a contagem duplicada dos eventos de conversão.

Se um cliente acessar a página de pós-venda e navegar até a página de status do pedido, a variável post_purchase_page_accessed retornará true. Se um cliente não chegar à página pós-venda, a variável retornará false.

Por exemplo, use o formato abaixo para os scripts na página de status do pedido:

{% if first_time_accessed == true and post_purchase_page_accessed == false %}
<script>
   // insert your tracking script
</script>
{% endif %}

APIs disponíveis

Use as variáveis globais de JavaScript para dar aos scripts de rastreamento acesso aos dados necessários, que estão disponíveis em window.Shopify .

Acompanhar compras feitas na página pós-venda

Para acompanhar compras adicionais feitas pela página pós-venda, inscreva-se no evento Shopify.on.

Depois da inscrição, as ações abaixo ocorrerão sempre que um conjunto de alterações pós-venda for aplicado:

• O manipulador é chamado com dois argumentos do tipo Order: order e outdated order.
• As globais em window.Shopify serão atualizadas para que os scripts possam usar os dados mais recentes.

Os manipuladores inscritos nesse evento podem ter apenas 500 ms para serem executados. Sendo assim, não se esqueça de carregar todas as dependências necessárias antecipadamente.

Adicionar o script da página pós-venda

Antes de adicionar o script da página pós-compra, para que o campo pós-compra seja exibido no seu admin da Shopify, configure o canal do Google e do YouTube ou faça download um app de pós-compra de terceiros.

Etapas:

1. No admin da Shopify, acesse Configurações > Checkout.
2. Insira o script no campo Scripts adicionais pós-venda.
3. Clique em salvar.

Script de exemplo

Use o modelo básico de script abaixo para ajudar você a criar seu próprio script de página pós-venda. Este exemplo usa o Google Analytics para rastrear a conversão inicial e explica como acompanhar compras adicionais. Vale lembrar que este é um exemplo muito simples e que seu script final provavelmente será diferente dele.

Exemplo de arquivos de script

Exemplo de script para a página de status do pedido:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // make sure the initial conversion isn't tracked twice
  {% if first_time_accessed == false or post_purchase_page_accessed == true %}
    return;
  {% endif %}
  // set up google analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');
  // track initial conversion
  var order = window.Shopify.order;

  gtag('event', 'purchase', {
    affiliation: 'My Shopify Store',
    transaction_id: Number(order.id).toString(),
    value: order.totalPrice,
    currency: order.currency,
    items: order.lineItems.map((item) => ({
      id: Number(item.id).toString(),
      name: item.title,
      category: item.product.type,
      price: item.price,
      quantity: item.quantity,
      variant: Number(item.variant.sku).toString(),
    })),
  });
})();
</script>

Exemplo de script para a página pós-venda:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // set up google analytics
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');

  // make sure the initial conversion isn't tracked twice
  if (!Shopify.wasPostPurchasePageSeen) {
    var order = window.Shopify.order;

    // track initial conversion
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: order.lineItems.map(function(item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  }

  // set up additional conversion tracking
  Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
    // identify which items were recently added, if any
    var oldItems = previousOrder.lineItems.map(function (line) { return line.id; });

    var addedItems = newOrder.lineItems.filter(
      function (line) { return oldItems.indexOf(line.id) < 0; }
    );

    // no new items were added, so we skip conversion tracking
    if (addedItems.length === 0) {
      return;
    }

    // track additional purchase
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: addedItems.map(function (item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  });
})();
</script>

Referências

A tabela abaixo contém as definições de tipo para os atributos que são expostos a scripts adicionais pós-venda por window.Shopify:

Campo	Definição
window.Shopify
shop	As informações da loja onde o pedido foi feito.
order	As informações do pedido.
pageUrl	O URL da página atual.
wasPostPurchasePageSeen	Indica se o cliente viu a página de pós-venda durante o checkout. Terá o valor false para a primeira renderização e true nos demais casos, como quando a página é recarregada.
on(event: string, handler: function): void	Inscreve-se em um event. No momento, apenas o evento CheckoutAmended é aceito.
off(event: string, handler: function): void	Cancela handler no event específico. No momento, apenas o evento CheckoutAmended é aceito.
Shop
id	O ID da loja.
currency	A moeda da loja no formato ISO 4217. Por exemplo, USD. Para saber mais, consulte shop.currency.
Order
id	O identificador interno do pedido.
number	A representação do nome do pedido em número inteiro. Por exemplo, 1025.
checkoutToken	O identificador interno do checkout.
customer	O cliente associado ao pedido.
lineItem	Os itens de linha do pedido.
subtotalPrice	O preço subtotal de todos os itens do pedido após a aplicação de descontos no item de linha e no carrinho. Esse valor não inclui tributos (a menos que eles estejam incluídos nos preços), custos de frete ou gorjetas.
totalPrice	O preço total do pedido.
currency	O código ISO 4217 da moeda do pedido.
discounts	A soma do valor dos descontos aplicados ao pedido.
Customer
id	O ID do cliente.
email	O e-mail do cliente.
acceptsMarketing	Se o cliente aceitou marketing. Será true se o cliente aceitar marketing e false se não aceitar.
hasAccount	Se o e-mail do cliente está associado a uma conta de cliente ou não. Será true se o e-mail estiver listado em uma conta de cliente e false se não estiver. Para saber mais, consulte customer.has_account.
firstName	O nome do cliente.
lastName	O sobrenome do cliente.
ordersCount	O número total de pedidos que o cliente fez.
totalSpent	O valor total gasto pelo cliente em todos os pedidos.
LineItem
finalLinePrice	O preço combinado de todos os itens no item de linha. Esse valor é igual a line_item.final_price multiplicado por line_item.quantity.
finalPrice	O preço do item de linha, incluindo todos os valores de desconto no nível de linha.
lineLevelTotalDiscount	O valor total de todos os descontos aplicados especificamente ao item de linha. Esse valor não inclui descontos adicionados ao carrinho.
optionsWithValues	Uma matriz dos valores selecionados nas opções de produto do item. Para saber mais, consulte line_item.options_with_values.
originalLinePrice	O preço calculado considerando a quantidade de itens incluídos na linha, antes da aplicação dos descontos. Esse valor é igual a line_item.original_price multiplicado por line_item.quantity.
originalPrice	O preço original do item de linha antes da aplicação dos descontos.
price	O preço unitário do item de linha. Esse valor reflete todos os descontos aplicados ao item. Disponível apenas para lojas localizadas na Alemanha ou na França.
product	O produto do item de linha.
properties	Uma matriz de informações personalizadas de um item que foi adicionado ao carrinho. Para saber mais, consulte line_item.properties.
quantity	A quantidade do item de linha.
title	O título do item de linha. Para saber mais, consulte line_item.title.
variant	A variante do item de linha.
Product
id	O ID do produto.
type	O tipo de produto.
ProductVariant
id	O ID da variante.
sku	A SKU da variante.
CartDiscount
id	O identificador interno da solicitação de desconto.
code	O código do desconto, se houver.
type	O tipo de desconto. Os valores possíveis são: automatic, discount_code, manual e script.
amount	O valor total do desconto aplicado ao preço do pedido.