GOOGLE TAG MANAGER

Pixel do facebook, o que você está instalando?

Já parou para pensar quando você copia e cola um código do pixel do facebook o que esse script faz na prática? Nesse post você vai aprender como e o que os scripts de instalação estão fazendo na prática.

Lucian Fialho

Lucian Fialho

24 de julho de 2022

8 min
Pixel do facebook, o que você está instalando?

Já parou para pensar quando você copia e cola no seu Google Tag Manager um código do pixel do facebook o que esse script faz na prática? Nesse post você vai aprender como e o que os scripts de instalação estão fazendo na prática.

O que você está instalando?

Para que no seu gerenciador de anúncios você consiga visualizar as informções do comportamento do usuário dentro do seu site, é preciso instalar o pixel do facebook, esse pixel vai habilitar você a saber quantas pessoas sairam de um anúncio e foram para o seu site.

Existem diversos comportamentos dentro do facebook que são possíveis de serem mensurados vamos ver alguns deles:

  • PageView;
  • Lead;
  • Purchase;

First things first

O que é um pixel?

É um pedaço de código utilizado para comunicar a plataformas de terceiros (Facebook Ads, Google Ads, e etc) comportamentos do usuário dentro do seu site. É importante ressaltar que pixel, tag, master tag, são a mesma coisa, o que muda apenas é a maneira que cada plataforma nomeia cada 1 deles.

Base pixel vs Event pixel?

Para que você possa mensurar eventos de interação dos seus usuários no seu site, precisamos carregar um pacote que disponibiliza alguns recursos dentro site. Chamamos esse recursos de SDK (Software Development Kit), com esse pacote inicial estamos aptosa realizar a implementação dos demais eventos que iremos instalar dentro do nosso Google Tag Manager.

O “SDK" que o facebook nos disponibiliza tem a seguinte estrutura:

html
<!-- 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 PIXEL AQUI');
  
fbq('track', "PageView");
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=SEU PIXEL AQUI&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

No script acima temos uma divisão em 3 partes:

  1. Instalação do SDK;
  2. Inicialização do pixel;
  3. Mensuração do carregamento na página;

Agora vamos entender o que é cada 1:

  1. Instalação do SDK;
jsx
!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');

Esse trecho do código é responsável por carregar o sdk direto do facebook, se você olhar com atenção até consegue ver a url do arquivo: "https://connect.facebook.net/en_US/fbevents.js” é de lá que ele vai puxar todas as ferramentas que precisamos para fazer qualquer tipo de implementação do pixel.

  1. Inicialização do pixel;
jsx
fbq('init', 'SEU PIXEL AQUI');

Nessa linha o facebook utilizando já o sdk vai inicializar o seu pixel para quando for disparado um evento ele saber para qual conta de anúncio ele tem que enviar essa informação.

  1. Mensuração do carregamento da página;
jsx
fbq('track', "PageView");

Nessa linha é onde ele diz ao gerenciador de eventos do facebook que houve um carregamento de página, o base pixel do facebook deve ficar vinculado ao carregamento de todas as páginas por indicação do próprio facebook.

Um evento é nada mais que uma interação do usuário que queremos levar para dentro do facebook, o facebook lista alguns comportamentos padrões para você instalar no seu site, vou listar os principais:

  • PageView;
  • Lead;
  • Purchase;

Você pode ver a lista completa no link

A implementação segue o mesmo princípio do que mostrei no evento de PageView, a diferença e apenas os paramêtros que atribuem informações na conversão, por exemplo:

Um evento de lead pode mas não é obrigatório enviar informações personalizadas:

jsx
fbq('track', "Lead");

*Já um evento de Purchase deve levar informações personalizadas de valor (value) e o código da moeda (currency):

jsx
fbq('track', "Purchase", {value: 9.99, currency: "BRL"});

E aí curtiram? Esse post podia ser uma série né? O que acha? Se você curtiu vai la no meu instagram e me manda uma mensagem pedindo que eu faço a boa e monto mais 1 falando sobre parâmetros.

Lucian Fialho

Lucian Fialho

Fundador e CTO da Métricas Boss, com sólido background em tecnologia, tendo passado por empresas como Comprafacil.com e Leader.com. Atuou no desenvolvimento de lojas como Globo, Olimpíadas do Rio, Ipiranga Shop, entre outras.

Publicado em 24 de julho de 2022