Opciones avanzadas
Sugerencias para realizar implementaciones alternativas mediante el píxel con aplicaciones web de una sola página y realizar un seguimiento de las conversiones con los clics en botones y el desplazamiento en la página.
Reglamento General de Protección de Datos
Si llevas a cabo actividades comerciales en países que están sujetos al Reglamento General de Protección de Datos (RGPD), consulta nuestro documento sobre el RGPD para obtener información sobre su cumplimiento.
Descarga del píxel mediante una etiqueta IMG
Aunque puedes usar una etiqueta IMG para descargar los píxeles, te sugerimos que visites nuestra Guía de implementación para obtener alternativas.
Si necesitas descargar el píxel mediante una implementación ligera, puedes descargarlo con una etiqueta <img>. Para ello, añade el código siguiente entre una etiqueta <noscript> de apertura y una de cierre en el encabezado o el cuerpo del sitio web y reemplaza {pixel-id} por el identificador del píxel y {standard-event} por un evento estándar.
<img src="https://www.facebook.com/tr?id={pixel-id}&ev={standard-event}" height="1" width="1" style="display:none"/>
Los píxeles descargados con una etiqueta <img> también admiten parámetros, que se pueden incluir en la cadena de consulta. Por ejemplo:
<img src="https://www.facebook.com/tr?id=12345 &ev=ViewContent &cd[content_name]=ABC%20Leather%20Sandal &cd[content_category]=Shoes &cd[content_type]=product &cd[content_ids]=1234 &cd[value]=0.50 &cd[currency]=USD" height="1" width="1" style="display:none"/>
Limitaciones
- No se pueden activar varias veces con cada carga de página.
- No pueden realizar un seguimiento de los eventos personalizados o estándar que se activan mediante interacciones con la interfaz de usuario (por ejemplo, hacer clic en un botón).
- Están sujetos a los límites de HTTP GET para el envío de datos personalizados o URL largas.
- No se pueden cargar de forma asíncrona.
Ejemplo de descarga de una etiqueta IMG
A continuación, se incluye un ejemplo de descarga de una etiqueta IMG del píxel de Meta en páginas concretas de un sitio web ficticio mediante un identificador ficticio del píxel (12345) y parámetros personalizados (por ejemplo, cd[currency]=USD).
En la página del producto, un píxel para realizar el seguimiento de un evento PageView y otro para realizar el seguimiento de 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 para añadir al carrito, un píxel para realizar un seguimiento de un evento PageView y otro para realizar un seguimiento de 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 realizar un seguimiento de un evento PageView y otro para realizar un seguimiento de 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 agregados para iOS 14.5 y versiones posteriores
La medición de eventos agregados de Meta es un protocolo que permite medir los eventos web y de la aplicación de usuarios que utilizan dispositivos con iOS 14.5 o versiones posteriores. Es posible que se utilicen modelos estadísticos y su diseño está pensado para proporcionar una vista más completa de los resultados cuando faltan datos o los existentes son parciales.
Recomendamos encarecidamente seguir las instrucciones de la sección Descargar el píxel mediante una etiqueta IMG de este documento al usar la etiqueta IMG del píxel, o bien prescindir de su uso y recurrir a nuestra guía de implementación en su lugar.
Datos no disponibles del píxel IMG
JavaScript en tiempo de ejecución
Si configuras el píxel IMG mediante JavaScript en tiempo de ejecución para generar una clase Image de JavaScript sin añadir dicha clase al árbol DOM del sitio web (por ejemplo, con bibliotecas de JavaScript de terceros para enviar el píxel IMG), debes añadir el código siguiente. De lo contrario, Meta no recibirá los datos del píxel 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 la etiqueta IMG del píxel en un iframe que tiene el atributo sandbox, debes añadir el valor allow-scripts. De lo contrario, Facebook no recibirá los datos del píxel IMG.
Activación de la AEM para escenarios de redireccionamiento automático
Hemos ampliado la funcionalidad de la AEM para tener en cuenta las conversiones de todas las páginas web asociadas a un anunciante en que se activan los eventos optimizados del píxel de un anunciante (como en los escenarios específicos en que es posible que los anunciantes confíen en acortadores de URL o redireccionamientos basados en la ubicación geográfica, tengan varias líneas de negocio o dependan de agencias para publicar los anuncios). Si te encuentras en una de estas situaciones y quieres activar la AEM, te recomendamos hacer lo siguiente:
- Usa el mismo píxel de Meta (es decir, el mismo par de nombre del evento de píxel e identificador del píxel) en los dominios pertinentes de los que quieres obtener conversiones.
- Asegúrate de que los eventos de AEM de los que quieres obtener conversiones se priorizan en estos dominios.
Seguimiento de clics en botones
Cuando un visitante hace clic en un botón, el código JavaScript del píxel de Meta detecta automáticamente los campos pertinentes del formulario y los envía a Meta.
Supongamos que tienes un sitio web de comercio electrónico y que el botón “Añadir al carrito” no lleva a una nueva página. Quizás quieras que se active un evento al hacer clic en el botón.
En este ejemplo, activaremos un evento estándar ViewContent al cargar la página. Cuando alguien haga clic en el botón “Agregar al carrito”, activaremos un evento estándar AddToCart.
Para ello, carga primero el código del píxel de Meta que quieres activar con la carga de 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 --> A continuación, activa AddToCart con una nueva carga de página o con el clic de un botón “Agregar al carrito”. Existen varias maneras de controlar los clics en botones. A continuación, se muestra un ejemplo en que se añade 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 controlar los eventos de clic. Asegúrate de llamar siempre a la función fbq después del clic.
En función de cómo hayas implementado el píxel, es posible que el asistente para píxeles muestre un error antes de hacer clic en el botón. A fin de verificar si el píxel se activa correctamente, puedes hacer clic en el botón para ignorar el error del asistente.
Activación de eventos en función de la visibilidad
Para este ejemplo, supongamos que tienes un blog y que quieres realizar un seguimiento de los usuarios que han leído el contenido íntegro de un artículo. La única acción que puede llevar a cabo el usuario es desplazarse hasta el final de la página.
A continuación, se incluye el código HTML de ejemplo 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, deberíamos activar el evento estándar Lead. Para verificar que un elemento es visible en la pantalla, añadimos el código siguiente 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);
};Posteriormente, debemos definir cómo se activará el píxel cuando el elemento sea visible en la 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 en función del porcentaje o la longitud de la página
Para este ejemplo, supongamos que quieres realizar un seguimiento de los usuarios que han leído una longitud determinada o un porcentaje de la página. La única acción que puede llevar a cabo el usuario es desplazarse a la longitud o el porcentaje que quiera de la página.
En este primer ejemplo se hace un seguimiento de la longitud de la página que ha leído el usuario. En el ejemplo, activamos el píxel de cliente potencial cuando el usuario ha leído una longitud de 500 px 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 este segundo ejemplo se hace un seguimiento del porcentaje de la página que ha leído el usuario. En el ejemplo, activamos el píxel de cliente potencial cuando el usuario ha leído 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 del píxel retrasadas
Supongamos que quieres realizar un seguimiento de los usuarios que interactúan con tu sitio web durante unos segundos antes de activar un evento de 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);Se puede utilizar para realizar un seguimiento de las visitas “involucradas” a una página, en que los usuarios permanecen un poco de tiempo y realmente leen el contenido.
Activación de eventos en función de los artículos consultados por sesión
Si quieres saber quién ha visto un determinado número de artículos de tu sitio, puedes usar un contador de sesiones y cargar el código del píxel de Meta cuando esto suceda.
Sabemos que una sesión es un grupo de interacciones del usuario con tu sitio web que puede tener lugar en un periodo de tiempo determinado por solicitud del sitio. Puedes aumentar el número de visitas a la página siempre que detectes que las actividades de los usuarios te proporcionan un marco de tiempo determinado.
En el caso de que tengas la variable sessionCountViews por site_request, puedes añadir el código del píxel de Meta en función del número de visitas a la página que hayas contado.
Ejemplo válido solo para el 6.º artículo visualizado
if (site_request.sessionCountViews == 6) {
fbq('track', "ViewContent", {
sessionCountViews: site_request.sessionCountViews,
});
}Seguimiento selectivo de eventos con varios píxeles
Si tienes varios píxeles en la misma página y quieres activar eventos de forma selectiva en cada píxel único, debes usar las funciones trackSingle y trackSingleCustom.
Al usar la función track en páginas con varios píxeles inicializados (mediante varios códigos base o incluso la combinación en un único código base), se puede producir una activación excesiva o un comportamiento inesperado. Esta opción solo se debe aplicar en situaciones específicas.
Ejemplo en que activamos un evento PageView en ambos píxeles inicializados y activamos de forma selectiva un evento estándar (Purchase) en un píxel y 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 en píxeles individuales
En casos excepcionales, es posible que quieras enviar eventos solo a uno de los píxeles descargados en tu sitio web, por ejemplo, para restringir los datos que se envían a uno de los píxeles de tu sitio web. Estos métodos realizan un seguimiento de las activaciones de un solo píxel. La llamada a estos métodos se realiza con el código 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á metadatos de clics en botones y de páginas (como datos estructurados de acuerdo con los formatos de Opengraph o Schema.org) desde tu sitio web para mejorar la entrega y la medición de anuncios, y para automatizar la configuración del píxel. A fin de configurar el píxel de Meta para que no envíe esta información adicional, en el código base de dicho píxel, añade fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID') encima de la llamada de inicialización.
<!-- 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&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->Política de seguridad del contenido
Si el sitio web tiene una política de seguridad del contenido, debes permitir que JavaScript se cargue desde https://connect.facebook.net. Nota: El píxel carga scripts desde dos rutas: /en_US/fbevents.js y /signals/config/{pixelID}?v={version}.