(informação) 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

(aviso) 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:

  1. Dentro de seu GTM, clicar em "tags" na arvore de opções na esquerda, depois clicar em "nova".
  2. Na próxima tela você poderá incluir o nome de sua tag, configurar ela e seu acionador. Primeiro, clique para configura-la.
  3. Dentro das configurações, selecione o tipo "HTML personalizado".
  4. 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:


(estrela azul) 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:



(estrela azul) 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.





(aviso) 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>




(estrela azul) 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.




(estrela azul) 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.



(estrela azul) Criação tag evento "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".



(ideia) É 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!

  • Sem rótulos