O pixel do Facebook, permite o monitoramento de conversões e o alcance do público relevante, aqueles que demonstram mais interesse pelo seu site. Basicamente, é uma ferramenta de análise que visa mensurar a eficácia das campanhas e medir as ações e comportamento dos visitantes da loja.
Tornando possível a criação de listas de clientes para seus anúncios na rede social, logo, se um cliente entrar no seu site, adicionar um produto no carrinho e não finalizar a compra, por exemplo, você poderá impactar esse cliente diretamente no Facebook, buscando recuperar a venda.
Neste artigo vamos explicar como configurar o pixel na plataforma via Tag Manager, mas ressaltamos que demais customizações poderão ser realizadas diretamente com seus desenvolvedores.
Também é importante ressaltar que esse artigo está voltado para o Style Editor, onde este possui as variáveis mencionadas abaixo, então caso a sua loja esteja utilizando a tecnologia do Storefront é importante que seja revisto junto com sua agência a criação das variáveis dentro da loja para o consumo do GTM e do Meta.
Por fim, ressaltamos que é seja realizado a migração para a API do Meta, pois ela já possui chamadas e acionamentos mais modernos e validações mais precisas dos dados, a documentação da atualização pode ser acessada aqui.
Variáveis
Primeiramente você deve entrar no Google Tag Manager, clicar em Variáveis e Variável Definida pelo Usuário. A criação deverá seguir exatamente os campos configurados abaixo. Isso dará acesso os parâmetros enviados para o data layer na plataforma, como valor da conversão, nome do produto, etc.
Portanto, crie as variáveis abaixo:
Título da Variável: google_tag_params
Depois, você deverá criar algumas outras variáveis com javascript personalizado, conforme abaixo. O exemplo do print screen deve ser replicado seguindo o título das outras variáveis mais abaixo.
Título da Variável: ecomm_prodid
function(){
if(window.location.href.match('checkout')){
var items = document.getElementsByClassName('fbits-responsive-carrinho-item')
var ids = [];
for (var i = 0; i< items.length; i ++){
ids.push(items[i].getAttribute('data-produtovarianteid'))
}
return ids;
}
else if (window.location.href.match('produto')) {
return document.getElementById('hdnProdutoVarianteId').value;
} else {
return null;
}
}
Título da Variável: ecomm_totalvalue
function() {
if(window.location.href.match('Confirmacao')){
return {{orderTotal}}
} else if (window.location.href.match('checkout')) {
var valor = document.getElementById('div-total')
valor = valor.innerText;
valor = valor.replace(/\R|\$|\s|\./g,'');
valor = valor.replace(',','.');
valor = Number(valor);
return valor;
} else {
var valores = {{google_tag_params}}.ecomm_totalvalue;
var totalvalue = 0;
for (var i = 0; i < valores.length; i++){
totalvalue = totalvalue+valores[i]
}
return totalvalue;
}
}
Título da Variável: pproductname
function() {
var pproductname='';
if({{google_tag_params}}!=undefined)
{
pproductname={{google_tag_params}}.pproductname;
}
return pproductname;
}
Título da Variável: pname
function() {
var pname='';
if({{google_tag_params}}!=undefined)
{
pname={{google_tag_params}}.pname;
}
return pname;
}
Título da Variável: psubtotal
function() {
var psubtotal='';
if({{google_tag_params}}!=undefined)
{
psubtotal={{google_tag_params}}.psubtotal;
}
return psubtotal;
}
Título da Variável: categoria
function() {
return window.dataLayer[0].google_tag_params.ecomm_pagetype;
}
Título da Variável: valorPedidoSemFrete
function valorPedidoSemFrete () {
var valorPedidoSemFrete = "";
valorPedidoSemFrete = Fbits.Carrinho.ValorTotal - Fbits.Carrinho.ValorFrete
valorPedidoSemFrete = parseFloat(valorPedidoSemFrete).toFixed(2)
return valorPedidoSemFrete
}
Título da Variável: orderTotal
function(){
function readCookie(name) {
var n = name + "=";
var cookie = document.cookie.split(';');
for(var i=0;i < cookie.length;i++) {
var c = cookie[i];
while (c.charAt(0)==' '){c = c.substring(1,c.length);}
if (c.indexOf(n) == 0){return c.substring(n.length,c.length);}
}
return null;
}
return readCookie('orderTotal')
}
Tags
Após a criação das variáveis é preciso criar as tags para captura dos eventos de visualizações de páginas de produto, carrinho e confirmação de compra.
Título Tag: Pixel Facebook
A primeira tag a ser inserida será o código base do Pixel do Facebook. Para isso, acesse "Tags", no menu lateral esquerdo, e clique em "Nova".
Informamos que o código base do Pixel do Facebook fica disponível em sua própria página do Facebook, logo, não fornecemos esse dado.
Acionamento
Com o acionamento dessa tag, em Acionadores de disparo, selecione "All Pages" e em Exceções crie a seguinte configuração:
Após a finalização das configurações do acionador e tag clique em "Salvar".
Visualização de Produto
Para a tag de visualização do produto crie uma tag conforme o exemplo abaixo:
Título da Tag: Facebook – Produto
<script>
fbq('track', 'ViewContent', {
content_type: 'product',
content_ids: ['{{ecomm_prodid}}'],
content_name: '{{pproductname}}',
content_category: '{{categoria}}',
value: '{{ecomm_totalvalue}}',
currency: 'BRL'
});
</script>
Após inserir o script acesse "Configurações avançadas", em seguida "Sequenciamento de tags", nesta opção marque o checkbox de "Disparar uma tag antes do disparo de Facebook - Produto" e selecione a tag que você havia criado com o Código base do Pixel do Facebook.
Repita esse processo para todas as demais tags.
Para o acionamento, localizado logo abaixo do HTML que você acabou de inserir, você deverá criar um acionador de exibição da página, configurando para que a tag dispare apenas nas páginas que contenham /produto/ na URL, conforme abaixo:
Visualização de Carrinho
O processo de criação da Tag para visitantes que chegaram ao carrinho é igual a tag acima, com a diferença dos códigos e acionador.
Título da Tag: Facebook – Carrinho
<script>
fbq('track', 'AddToCart', {
value: "{{valorPedidoSemFrete}}",
currency: 'BRL',
content_type: 'product',
content_ids: '{{ecomm_prodid}}'
});
</script>
Da mesma forma, precisamos criar um acionador para que a tag seja disparada apenas no carrinho. Para isso, a url precisa ser igual a https://checkout.sualoja.com.br/.
Confirmação de compra
Novamente repita o processo de criação de tag, substituindo a parte correspondente com o código abaixo:
Título da Tag: Facebook – Confirmação
<script>
fbq('track', 'Purchase', {
value: '{{valorPedidoSemFrete}}',
currency: 'BRL',
content_type: 'product',
content_ids: '{{ecomm_prodid}}',
});
</script>
Depois, basta adicionar o acionador com a url contendo "Confirmacao", conforme imagem abaixo:
Com isso, fechamos as três principais tags com as informações necessárias para garantir versatilidade na hora de segmentar seus anúncios no Facebook. Não esqueça de enviar as alterações realizadas no Google Tag Manager clicando em "Enviar", conforme abaixo:
Atenção: por tratar-se de uma aplicação externa, como medida de segurança, a plataforma pode realizar o bloqueio das URLs. Logo, caso isso ocorra, será necessário realizar a liberação das URLs em Gerenciar Políticas de Segurança para mais detalhes clique aqui.
Dúvidas Frequentes (FAQ)
Para conferir as dúvidas mais frequentes sobre o Pixel do Facebook clique aqui.