Nesta documentação você vai aprender:
• A integrar sua loja online ao pixel do Facebook e seus principais eventos: Visualizar conteúdo, Adicionar ao carrinho, Iniciar finalização da compra e a Compra Pontos de atenção:
• Existem outras formas de integração do pixel com tags e acionadores diferentes, nesta documentação você vai aprender uma destas formas de integração via GTM container Web
• Se a loja possuir personalizações de layout, talvez alguma orientação aqui proposta pode não funcionar devidamente, sendo necessário revisar integração de algum evento junto a uma pessoal desenvolvedora.
Passo-a-passo de como criar o esqueleto das tags:
- Dentro de seu GTM, clicar em "tags" na arvore de opções na esquerda, depois clicar em "nova".
- Na próxima tela você poderá incluir o nome de sua tag, configurar ela e seu acionador. Primeiro, clique para configura-la.
- Dentro das configurações, selecione o tipo "HTML personalizado".
- Dentro da caixa que será apresentada, poderá colar o código dos respectivos eventos, como são cinco eventos, serão necessárias cinco tags nestes moldes. Prints para ilustrar:
Integração com pixel:
Dentro da tag "HTML personalizado", colar o código a seguir. Lembre-se substituir "seu-id-pixel-aqui" pelo seu ID do pixel.
<!-- Facebook Pixel Code -->
<script>
!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');
fbq('init', 'seu-id-pixel-aqui');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
Criando acionador para tag de integração com pixel:
Após colar o código na tag, clique em "acionamento" e selecione "All pages".
A tag finalizada ficará como no print a seguir, bastando salvar no botão azul logo acima em seu GTM:
Criação tag evento "Visualizar conteúdo":
Crie uma nova tag dentro de seu GTM seguindo os primeiros passos descritos nesta documentação.
Dentro da tag, incluir o código a seguir:
<script>
setTimeout(function () {
fbq('track', 'ViewContent', {
content_ids: product.SKU,
content_type: 'product',
value: product.RetailPrice,
currency: 'BRL'
});
}, 1500);
</script>
Criando acionador evento "Visualizar conteúdo":
Clique em "acionamento" e selecionem o acionador "exibição de página".
Lá dentro, coloquem em "algumas exibições de página", e abaixo: "Page URL > contém > -p".
A tag vai ficar como no print a seguir, bastando salva-la clicando no botão azul no canto superior direito em seu GTM.
Ponto de atenção:
Para que este evento funcione plenamente, certifique-se que no template da página do produto exista a codificação do contexto do produto:
<script>
var product = {{ Product | json }};
</script>
Criação tag evento "Adicionar ao carrinho":
Crie uma nova tag dentro de seu GTM seguindo os primeiros passos descritos nesta documentação.
Dentro da tag, incluir o código a seguir:
<script>
var productIds = [];
browsingContext.Common.Basket.Items.forEach(function(item){
productIds.push(item.SKU);
});
fbq('track', 'AddToCart', {
content_ids: productIds,
content_type: 'product',
value: browsingContext.Common.Basket.Total,
currency: 'BRL'
});
</script>
Criando acionador evento "Adicionar ao carrinho":
Clique em "acionamento" e selecionem o acionador "exibição de página".
Lá dentro, coloquem em "algumas exibições de página", e abaixo: "Page URL > termina com > carrinho".
A tag vai ficar como no print a seguir, bastando salva-la clicando no botão azul no canto superior direito em seu GTM. Criação tag evento "Iniciar finalização da compra":
Crie uma nova tag dentro de seu GTM seguindo os primeiros passos descritos nesta documentação.
Dentro da tag, incluir o código a seguir:
<script>
fbq('track', 'InitiateCheckout');
</script>
Criando acionador evento "Adicionar ao carrinho":
Clique em "acionamento" e selecionem o acionador "exibição de página".
Lá dentro, coloquem em "algumas exibições de página", e abaixo: "Page URL > contém > checkout/easy".
A tag vai ficar como no print a seguir, bastando salva-la clicando no botão azul no canto superior direito em seu GTM. Criação tag evento "Iniciar finalização da compra":
Crie uma nova tag dentro de seu GTM seguindo os primeiros passos descritos nesta documentação.
Dentro da tag, incluir o código a seguir:
<script>
var productsData = [];
var products = [];
var contentIds = [];
var basketTotal = EasyCheckout.ModelData.Basket.Total;
EasyCheckout.ModelData.Basket.Items.forEach(function (item) {
productsData.push({
id: item.SKU,
quantity: item.Quantity
});
products.push(item.Name);
contentIds.push(item.SKU);
});
fbq('track', 'Purchase', {
contents: productsData,
content_name: products,
content_ids: contentIds,
content_type: 'product',
value: basketTotal,
currency: 'BRL'
});
</script>
Criando acionador evento "Compra":
Clique em "acionamento" e selecionem o acionador "Evento personalizado". Lá dentro, em "nome do evento", coloquem "purchase".
A tag vai ficar como no print a seguir, bastando salva-la clicando no botão azul no canto superior direito em seu GTM.
♦ Finalizando:
Após as alterações, lembre-se de enviar para o site sua integração. Quando existirem "alterações em sua área de trabalho", elas não são refletidas até que cliquem em "enviar". É bom salientar que, dentro do GTM existem campos para preencher suas alterações como nomes das tags, acionadores, variáveis e versões, que são justamente estas que enviam para o site. É legal sempre por nomes sugestivos para manter bem documentadas suas alterações e configurações efetuadas para deixar tudo bem organizado para futuras revisões.
Espero que as orientações tenham te ajuda. Abraços!