Píxel de Meta

Recursos avanzados

Sugerencias para implementaciones alternativas, usando el píxel con apps web de una sola página y seguimiento de las conversiones con clics en botones y desplazamiento de página.

Reglamento General de Protección de Datos

Si realizas negocios en países sujetos al Reglamento General de Protección de Datos (RGPD), consulta nuestro documento RGPD para aprender a cumplir.

Instala el píxel usando una etiqueta IMG

Aunque puedes usar la etiqueta IMG para instalar los píxeles, te recomendamos que consultes nuestra guía de implementación para buscar alternativas.

Si necesitas instalar el píxel mediante una implementación ligera, puedes instalarlo con una etiqueta <img>. Para hacer esto, agrega el código a continuación entre una etiqueta de apertura y una de cierre <noscript> dentro del encabezado o el cuerpo de tu sitio web y reemplaza {pixel-id} con tu identificador del píxel {standard-event} con un evento estándar.

<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"/>

Los píxeles instalados con una etiqueta <img> también admiten parámetros, que puedes incluir en la cadena de consultas. Por ejemplo:

<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"/>

Limitaciones

  • No se puede disparar varias veces en cada carga de página
  • No se pueden rastrear eventos estándar o personalizados activados por interacciones de la interfaz de usuario (por ejemplo, un clic en un botón)
  • Sujeto a los límites HTTP GET en el envío de datos personalizados o URL largas
  • No se puede cargar de forma asincrónica

Ejemplo de instalación de etiquetas IMG

A continuación, se muestra un ejemplo de la instalación de la etiqueta IMG del píxel de Meta en páginas clave de un sitio web ficticio utilizando un identificador de píxel ficticio (12345) y parámetros personalizados (por ejemplo cd[currency]=USD).

En la página del producto, un píxel para rastrear un evento PageView y otro para rastrear un 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"/>

En la página de agregar al carrito, un píxel para rastrear un evento PageView y otro para rastrear un evento AddToCard con datos 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"/>

En la página de compra, un píxel para rastrear un evento PageView y otro para rastrear un evento Purchase con datos sobre la 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"/>

Píxel IMG de medición de eventos agrupados para iOS 14.5+

La medición de eventos agrupados de Meta es un protocolo que permite medir los eventos web y de la app correspondientes a personas que usan dispositivos con iOS 14.5 o versiones posteriores. Es posible usar un modelo estadístico, que se diseñó para proporcionar una vista de resultados más completa cuando faltan datos o están incompletos.

Te recomendamos seguir la sección de instalación del píxel con una etiqueta IMG de este documento al utilizar la etiqueta IMG de píxeles o dejar de utilizar la etiqueta IMG y seguir nuestra guía de implementación.

Faltan datos de píxel IMG

JavaScript en tiempo de ejecución

Si configuras tu píxel de IMG con JavaScript en tiempo de ejecución para generar una clase de imagen de JavaScript sin agregar esa clase de imagen al árbol DOM del sitio web, por ejemplo, utilizando bibliotecas de JavaScript de terceros para enviar el píxel de IMG, debes agregar el siguiente código o Meta no recibirá los datos de tu píxel 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

Si colocas tu píxel IMG dentro de un iframe que tiene el atributo sandbox debes agregar el valor allow-scripts o Facebook no recibirá tus datos de píxeles IMG.

Habilitar la medición de eventos agregados en situaciones de redireccionamiento automático

Ampliamos la funcionalidad de la medición de eventos agregados para considerar las conversiones de todas las páginas web asociadas con anunciantes en las que se activan eventos de píxel optimizados por un anunciante (como en las situaciones específicas en las que los anunciantes usan URL acortadas o redireccionamientos basados en geolocalización, tienen varias líneas de negocios o dependen de agencias para sus campañas de publicidad). Si tu caso es uno de estos y quieres habilitar la medición de eventos agregados, te recomendamos hacer lo siguiente:

  • Usa el mismo píxel de Meta (es decir, el mismo identificador del píxel y el mismo par de nombres de evento del píxel) en todos los dominios relevantes de los que se quiere obtener conversaciones.
  • Asegúrate de que los eventos de medición de eventos agregados de los que quieres obtener conversiones tengan prioridad en estos dominios.

Seguimiento de clics en los botones

Cuando un visitante hace clic en un botón, el código de JavaScript del píxel de Meta detecta automáticamente los campos del formulario relevantes y los transmite a Meta.

Imagina que tienes un sitio web de comercio en línea y el botón "Agregar al carrito" no conduce a una página nueva. Puede que quieras que se active un evento cuando se haga clic en el botón.

En este ejemplo, activaremos un evento ViewContent estándar cuando se carga la página. Cuando se haga clic en el botón "Agregar al carrito", activaremos un evento estándar AddToCart.

Para esto, primero carga el código del píxel de Meta que quieres que se active cuando se carga la 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 -->

Luego, activa AddToCart cuando se cargue una página nueva o cuando se haga clic en el botón "Agregar al carrito". Existen varias maneras de controlar los clics en los botones. A continuación, se muestra un ejemplo de cómo agregar eventListener a un botón.

<!-- 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>

Hay muchas formas de gestionar los eventos de clic; solo asegúrate de llamar siempre a la función fbq después del clic.

Dependiendo de cómo haya implementado el píxel, el asistente de píxeles puede mostrar un error antes de que se haga clic en el botón. Puedes verificar que tu píxel se está disparando correctamente haciendo clic en el botón, lo que descarta el error del asistente.

Activación de eventos según la visibilidad

Para este ejemplo, imagina que tienes un blog y quieres realizar un seguimiento de los usuarios que leen todo el contenido de un artículo. El usuario no realiza ninguna acción además de desplazarse hasta el final de la página.

A continuación, se muestra un ejemplo del HTML de una página donde se carga el píxel:

<!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>

Cuando aparece el elemento h1 con id=fb-fire-pixel, debemos activar el evento estándar Lead. Para verificar que un elemento aparece en pantalla, agregamos el siguiente código a la 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);
};

Después de esto, debemos definir cómo activar el píxel cuando el elemento aparece en pantalla:

// 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');
});

Activación de eventos según la longitud o el porcentaje de la página

Para este ejemplo, imagina que quieres realizar un seguimiento de los usuarios que leen hasta una longitud o un porcentaje de la página. El usuario no realiza ninguna acción además de desplazarse hasta la longitud o el porcentaje deseados de la página.

En este primer ejemplo, realizamos un seguimiento de la longitud de la página que el usuario leyó. En el ejemplo, activamos el píxel Lead cuando el usuario leyó hasta 500 px de longitud de la 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');
});

En el segundo ejemplo, realizamos un seguimiento del porcentaje de la página que el usuario leyó. En el ejemplo, activamos el píxel Lead cuando el usuario leyó el 75% de la 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');
});

Activaciones demoradas de píxeles

Imagina que quieres realizar un seguimiento de los usuarios que interactúan con tu sitio web unos segundos antes de activar un evento del píxel. Puedes hacerlo con la función setTimeout.

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

Puede utilizarse para realizar un seguimiento de las visitas “de interacción” a una página, donde las personas no abandonen rápidamente la página, sino que realmente leen el contenido.

Activación de eventos según los artículos vistos por sesión

Si quieres saber quién vio una determinada cantidad de artículos de tu sitio, puedes tener un contador de sesiones y cargar código del píxel de Meta cuando esto sucede.

Sabemos que una sesión es un grupo de interacciones del usuario con tu sitio web que pueden realizarse en un marco de tiempo determinado por solicitud del sitio. Puedes aumentar la cantidad de visitas a la página siempre que detectes actividades del usuario en un marco de tiempo.

Imagina que tienes la variable sessionCountViews por site_request; puedes agregar el código del píxel de Meta según la cantidad de visitas a la página que hayas contado.

Ejemplo de recuento solo para el sexto artículo visto

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

Seguimiento de evento selectivo con varios píxeles

Si hay varios píxeles en la misma página y quieres activar eventos de manera selectiva en cada píxel en particular, debes usar las capacidades trackSingle y trackSingleCustom.

Al usar la función track en las páginas donde hay varios píxeles inicializados (ya sea mediante una serie de códigos base o mediante la combinación en un solo código base), se puede generar una sobreactivación o un comportamiento inesperado. Por lo tanto, esta función debe aplicarse solo en situaciones específicas.

Ejemplo de activación de un evento PageView en ambos píxeles inicializados, y de activación selectiva de un evento estándar (Purchase) en un píxel y de un evento personalizado en un segundo píxel.

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
});

Seguimiento de eventos para píxeles individuales

En casos inusuales, es posible que desees enviar eventos a solo uno de los píxeles instalados en tu sitio web; por ejemplo, para restringir los datos enviados a uno de los píxeles de su sitio web. Estos métodos rastrean los disparos de píxeles para un solo píxel. Se llaman usando lo siguiente:

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

Configuración automática

El píxel de Meta enviará datos de clics de botones y metadatos de la página (como datos estructurados según formatos de Schema.org u Opengraph) desde tu sitio web para mejorar la entrega y la medición de los anuncios y automatizar la configuración del píxel. Para configurar el píxel de Meta a fin de que no envíe esta información adicional, en el código base del píxel de Meta, agrega fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID') arriba de la llamada init.

<!-- 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 seguridad de contenido

Si tu sitio web tiene una política de seguridad de contenido, debes permitir que JavaScript cargue desde https://connect.facebook.net. Nota: El píxel carga scripts desde dos recorridos: /en_US/fbevents.js y /signals/config/{pixelID}?v={version}.