Rastreamento por pixel na página pós-venda
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.
Nesta página
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
eoutdated 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:
- No admin da Shopify, acesse Configurações > Checkout.
- Insira o script no campo Scripts adicionais pós-venda.
- 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. |
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. |