Pixel da Meta

Avançado

Veja dicas sobre como fazer implementações alternativas ao usar o pixel com apps da web de página única e rastrear conversões com cliques no botão e rolamento de página.

Regulamento Geral sobre a Proteção de Dados

Se você realizar negócios em países que estão sujeitos ao Regulamento Geral sobre a Proteção de Dados (RGPD), consulte o nosso documento sobre o RGPD para saber como ficar em conformidade.

Instalar o pixel usando uma tag IMG

Apesar da instalação de pixels usando a tag IMG ser possível, sugerimos que você consulte o nosso guia de implementação para ver outras opções.

Caso seja necessário instalar o pixel usando uma implementação leve, instale-o com uma tag <img>. Para fazer isso, adicione o código abaixo entre uma tag <noscript> de abertura e fechamento no cabeçalho ou no corpo do site e substitua {pixel-id} pela identificação do pixel e {standard-event} por um evento padrão.

<img src="https://www.facebook.com/tr?id=&#123;pixel-id&#125;&amp;ev=&#123;standard-event&#125;" height="1" width="1" style="display:none"/>

Os pixels instalados com uma tag <img> também são compatíveis com parâmetros, que podem ser incluídos na string da consulta. Por exemplo:

<img src="https://www.facebook.com/tr?id=12345
  &amp;ev=ViewContent
  &amp;cd[content_name]=ABC%20Leather%20Sandal
  &amp;cd[content_category]=Shoes
  &amp;cd[content_type]=product
  &amp;cd[content_ids]=1234
  &amp;cd[value]=0.50
  &amp;cd[currency]=USD" height="1" width="1" style="display:none"/>

Limitações

  • Não podem ser inicializados várias vezes a cada carregamento da página
  • Não podem monitorar eventos standard ou personalizados acionados por interações de IU (como o clique de um botão)
  • Estão sujeitos aos limites de HTTP GET ao enviar dados personalizados ou URLs longas
  • Não podem ser carregados de modo assíncrono

Exemplo de instalação da tag IMG

Veja abaixo um exemplo de instalação da tag IMG do Pixel da Meta em páginas essenciais de um site fictício com uma identificação do pixel fictícia (12345) e parâmetros personalizados (por exemplo, cd[currency]=USD).

Na página do produto, é usado um pixel para rastrear um evento PageView e outro para rastrear um evento ViewContent:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=ViewContent"/>

Na página de adicionar ao carrinho, é usado um pixel para rastrear um evento PageView e outro para rastrear um evento AddToCard, com dados personalizados:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=AddToCart&cd[currency]=USD&cd[value]=0.00"/>

Na página de compra, é usado um pixel para rastrear um evento PageView e outro para rastrear um evento Purchase, com dados sobre a compra:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=Purchase&cd[currency]=USD&cd[value]=0.00"/>

Pixel de IMG da Mensuração de Eventos Agregados para iOS 14.5 ou versões posteriores

A Mensuração de Eventos Agregados da Meta é um protocolo que permite a mensuração de eventos da web e do app de pessoas que usam dispositivos iOS 14.5 ou posteriores. A modelagem estatística foi criada e pode ser usada com objetivo de fornecer uma visão mais completa dos resultados quando há dados parciais ou faltantes.

Recomendamos que você acesse a seção Instalar o pixel usando uma tag IMG deste documento ao usar uma tag IMG do pixel. Também é possível não usar a tag e seguir as instruções do nosso guia de implementação.

Ausência de dados do pixel de IMG

JavaScript de tempo de execução

Se você configurar o pixel de IMG com o JavaScript de tempo de execução para gerar uma classe de imagem JavaScript sem anexar essa classe na árvore DOM do site (por exemplo, usando bibliotecas JavaScript de terceiros para enviar seu pixel de IMG), será preciso adicionar o código abaixo. Caso contrário, a Meta não receberá os dados do pixel de IMG.

var nativeBridge = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.receiveImgPixel;
if (nativeBridge) {
    const postObj = {
        id: {pixel-id},
        ev: {standard-event},
        cd: {stringified-custom-data},
        dpo: {data-processing-options},          // Optional CCPA param
        dpoco: {data-processing-option-country}, // Optional CCPA param
        dpost: {data-processing-option-state},   // Optional CCPA param
    };
    nativeBridge.postMessage(JSON.stringify(postObj));
}

Atributo sandbox

Se você colocar a IMG de pixel em um iframe que tenha o atributo sandbox, será preciso adicionar o valor allow-scripts. Caso contrário, o Facebook não receberá os dados do pixel de IMG.

Ativação da AEM para cenários de redirecionamento automático

Expandimos a funcionalidade da AEM para considerar versões de todos os sites associados a anunciantes em que eventos de pixel otimizados são disparados (como em cenários específicos em que os anunciantes dependem de encurtadores de URL e redirecionamentos baseados na localização geográfica, possuem várias linhas de negócios ou dependem de agências para veicular anúncios). Se você se encaixa em um desses cenários e quer habilitar a AEM, recomendamos que siga estas etapas:

  • Use o mesmo Pixel da Meta (ou seja, o mesmo ID do pixel e par de nome do evento do pixel) em domínios relevantes em que quer obter conversões.
  • Verifique se os eventos da AEM a partir dos quais você quer obter conversões são prioridade nesses domínios.

Como rastrear cliques em botões

Quando um visitante clica em um botão, o código JavaScript do Pixel da Meta detecta automaticamente e transmite os campos de formulário relevantes para a Meta.

Vamos imaginar que você tem um site de comércio eletrônico e o botão "Adicionar ao carrinho" não navega até uma nova página. Convém ativar um evento quando o botão é clicado.

Neste exemplo, ativaremos um evento ViewContent padrão ao carregar a página. Quando alguém clicar no botão Adicionar ao carrinho, ativaremos um evento-padrão AddToCart.

Para isso, primeiro carregue o código do Pixel da Meta que você deseja inicializar ao carregar a página:

<!-- Facebook Pixel Code --> <script> fbq('track', 'ViewContent', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 0.50, currency: 'USD' }); </script> <!-- End Facebook Pixel Code -->

Depois, dispare AddToCart ao carregar uma nova página ou quando o botão Adicionar ao carrinho for clicado. Há várias maneiras de lidar com cliques em botões. Este é um exemplo de como adicionar um eventListener a um botão.

<!-- Somewhere there is a button that performs Add to Cart --> <button id="addToCartButton">Add To Cart</button> <!-- Add Pixel Events to the button's click handler --> <script type="text/javascript"> var button = document.getElementById('addToCartButton'); button.addEventListener( 'click', function() { fbq('track', 'AddToCart', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 4.99, currency: 'USD' }); }, false ); </script>

Há várias maneiras de controlar eventos de clique. Sempre chame a função fbq após o clique.

Dependendo da maneira como você implementou o pixel, a Ferramenta para Pixel poderá mostrar um erro antes de o botão ser clicado. É possível verificar se o pixel está sendo acionado corretamente clicando no botão. Essa ação ignora o erro da ferramenta.

Como acionar eventos com base na visibilidade

Neste exemplo, vamos imaginar que você tem um blog e deseja rastrear usuários que leem o conteúdo completo de um artigo. Não há outra ação do usuário a não ser rolar a tela até o final.

Esta é uma amostra de HTML de uma página na qual o Pixel é carregado:

<!DOCTYPE html> <html> <head> <!-- 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', '<FB_PIXEL_ID>'); fbq('track', "PageView"); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> </head> <body> <h1>Scroll Page until the Lead event is fired</h1> <div style="height: 120vh; width: 100vw; background-color: #00f;"></div> <h1 id="fb-fire-pixel">Lead event will fire when this phrase enters the screen</h1> <div style="height: 120vh; width: 100vw; background-color: #000;"></div> </body> </html>

Quando o elemento h1 com id=fb-fire-pixel aparece, devemos disparar o evento Lead padrão. Para verificar se um elemento está visível na tela, adicionamos estes códigos à página:

// This code should be loaded together with Meta Pixel

var executeWhenElementIsVisible = function(dom_element, callback) {

  if (!(dom_element instanceof HTMLElement)) {
    console.error('dom_element must be a valid HTMLElement');
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function isOnViewport(elem) {
    var rect = elem.getBoundingClientRect();
    var docElem = document.documentElement;
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
      rect.right <= (window.innerWidth || docElem.clientWidth)
    );
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && isOnViewport(dom_element)) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  window.addEventListener('scroll', executeCallback, false);
};

Depois, precisamos definir como disparar o pixel quando o elemento estiver visível na tela:

// Get the element that should be visible to trigger the pixel fire
var element = document.getElementById('fb-fire-pixel');

// Then, set the event to be tracked when element is visible
// Note that second parameter is a function, not a function call
executeWhenElementIsVisible(element, function() {
  fbq('track', 'Lead');
});

Como acionar eventos com base no percentual ou comprimento da página

Neste exemplo, vamos imaginar que você deseja rastrear usuários que leem um certo comprimento ou porcentual da página. Não há outra ação do usuário a não ser rolar a tela até o porcentual ou comprimento desejado.

Este primeiro exemplo é para rastrear o comprimento da página lido pelo usuário. No exemplo, disparamos o pixel principal depois que o usuário leu até 500 pixels do comprimento da página.

var executeWhenReachedPageLength = function(length, callback) {
  if (typeof length !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof length,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getCurrentScrolledLengthPosition() > length) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getWindowLength() >= length) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPageLength(10, function() {
  fbq('track', 'Lead');
});

Este segundo exemplo é para rastrear o percentual da página lido pelo usuário. No exemplo, disparamos o pixel principal depois que o usuário leu até 75% da página.

var executeWhenReachedPagePercentage = function(percentage, callback) {
  if (typeof percentage !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof percentage,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getDocumentLength() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getScrollableLength() {
    if (getDocumentLength() > getWindowLength()) {
      return getDocumentLength() - getWindowLength();
    } else {
      return 0;
    }
  }

  var scrollableLength = getScrollableLength();

  window.addEventListener("resize", function(){
    scrollableLength = getScrollableLength();
  }, false)

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  function getPercentageScrolled() {
    if (scrollableLength == 0) {
      return 100;
    } else {
      return getCurrentScrolledLengthPosition() / scrollableLength * 100;
    }
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getPercentageScrolled() > percentage) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getDocumentLength() == 0 ||
    (getWindowLength()/getDocumentLength() * 100 >= percentage)) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPagePercentage(75, function() {
  fbq('track', 'Lead');
});

Disparo do Pixel com atraso

Digamos que você queira rastrear usuários que interagem com seu site alguns segundos antes de disparar um evento de pixel. Isso pode ser feito com a função setTimeout.

// Delay pixel fire by 3 seconds
var seconds = 3;
setTimeout(function() {
  fbq('track', 'Lead');
}, seconds * 1000);

Ela pode ser usada para rastrear visitas "com envolvimento", nas quais as pessoas não estão acessando rápido demais e estão realmente lendo o conteúdo.

Como acionar eventos com base em artigos visualizados por sessão

Para saber quem visualizou um determinado número de artigos do seu site, você pode ter um contador de sessões e carregar o código do Pixel da Meta quando essa ação ocorrer.

Sabemos que uma sessão é um grupo de interações do usuário com o site que podem ocorrer em um intervalo de tempo específico conforme solicitação do site. Você pode aumentar o número de visualizações da Página ao detectar que as atividades do usuário ocorrem em um intervalo de tempo específico.

Se você tiver a variável sessionCountViews por site_request, será possível adicionar o código do Pixel da Meta com base no número de visualizações da Página registradas por você.

Exemplo de contagem somente do sexto artigo visualizado

if (site_request.sessionCountViews == 6) {
  fbq('track', "ViewContent", {
    sessionCountViews: site_request.sessionCountViews,
  });
}

Rastreamento seletivo de eventos com vários pixels

Se você tiver vários pixels na mesma página e quiser acionar eventos seletivamente em cada pixel único, use os recursos trackSingle e trackSingleCustom.

Aplicar a função track a páginas que tenham vários pixels inicializados (usando diferentes códigos-base ou até mesmo combinando-os em um código-base) pode resultar no acionamento excessivo ou em um comportamento inesperado. Por isso, só escolha essa opção em situações específicas.

Veja o exemplo em que disparamos um evento PageView em ambos os pixels inicializados e disparamos seletivamente um evento (Purchase) padrão em um pixel e um evento personalizado em um segundo pixel.

fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fire PageView for both initialized pixels

// only fire the Purchase event for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
      value: 4,
      currency: 'GBP',
});

// only fire the custom event Step4 for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'Step4',{
  //optional parameters
});

Como rastrear eventos de pixels individuais

Em casos atípicos, talvez você queira enviar eventos a apenas um dos pixels instalados no site, por exemplo, para restringir os dados enviados a um dos pixels. Esses métodos rastreiam os disparos de um único pixel. Eles são chamados usando:

fbq('trackSingle', 'FB_PIXEL_ID', 'Purchase', customData);
fbq('trackSingleCustom', 'FB_PIXEL_ID', 'CustomEvent', customData);

Configuração automática

O pixel da Meta enviará metadados do clique no botão e da página (como dados estruturados de acordo com os formatos OpenGraph ou Schema.org) do site para aprimorar a mensuração e a veiculação dos seus anúncios e automatizar a configuração do pixel. Se quiser configurar o pixel do Facebook para não enviar essas informações adicionais, no código-base do pixel do Facebook, acrescente fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID') acima da chamada de inicialização.

<!-- 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'); 
// Line to enable Manual Only mode.
fbq('set', 'autoConfig', false, 'FB_PIXEL_ID'); 
//Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID'); 
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Política de segurança de conteúdo

Se o site tiver uma política de segurança de conteúdo, você deve permitir que o JavaScript seja carregado a partir de https://connect.facebook.net. Observação: o pixel carrega scripts de dois caminhos: /en_US/fbevents.js e /signals/config/{pixelID}?v={version}.