Instalación de Meta Pixel con Google Tag Manager para Facebook

¿Quieres ver el contenido de la página? Mostrar

Actualizado: 4 de enero de 2025

Nota: Facebook ha cambiado su nombre a Meta, pero muchos de los recursos de sus sitios web siguen identificándose como recursos de Facebook. Por esta razón, utilizaremos ambos nombres (Facebook Pixel y Meta Pixel) de forma intercambiable.

Si estás utilizando publicidad pagada para atraer tráfico nuevo, es probable que ya estés ejecutando anuncios en Facebook. Sin embargo, si no mides la efectividad de tus campañas publicitarias, podrías estar desperdiciando dinero, esperando que quizás algo esté funcionando.

Si usas anuncios de Facebook, necesitas implementar el Facebook Pixel para evaluar el éxito de tus campañas. Al desplegar el Pixel en tu sitio web, Facebook puede entender mejor cómo interactúan los usuarios con tu página, lo que a su vez le permite comprender cómo se producen las conversiones.

Una conversión puede ser el envío de un formulario, la compra de un producto o cualquier otra acción que consideres valiosa para tu negocio. Cada vez que un visitante completa una conversión, el Pixel rastrea esta interacción y utiliza esos datos para optimizar tus campañas.

En esta guía, te mostraré cómo instalar el Meta Pixel utilizando Google Tag Manager. No solo abordaremos la implementación de vistas de página básicas, sino también la configuración de eventos. Este tema es bastante extenso, así que prepárate para sumergirte en ello. También te invito a suscribirte a mi boletín para mantenerte al día con las novedades sobre GTM.

Este artículo cubrirá solo lo esencial que necesitas saber al desplegar el Facebook Pixel a través de Google Tag Manager. Para una guía más detallada, tengo lecciones extensas sobre FB Pixel + GTM en mi curso de GTM para principiantes.

Si también deseas implementar el seguimiento de Facebook con GTM del lado del servidor (usando la API de conversiones de Facebook), lo explico en el curso intermedio/avanzado de GTM.

Introducción rápida al Meta Pixel (Facebook Pixel)

El Meta Pixel, anteriormente conocido como Facebook Pixel, es una herramienta de análisis que permite a los propietarios de sitios web medir el comportamiento de los usuarios en sus plataformas. Al implementar el Pixel, puedes rastrear conversiones y optimizar tus campañas publicitarias, así como construir audiencias personalizadas basadas en los datos recopilados.

Cuando colocas ciertos fragmentos de código JavaScript en tu sitio web y los activas según el comportamiento del usuario, la información se envía de vuelta a Facebook. Aquí hay algunas funciones clave que el Meta Pixel puede ofrecerte:

Crear audiencias personalizadas: Puedes reorientar a usuarios que han interactuado con tu contenido de diversas maneras, como aquellos que han agregado productos a su carrito sin finalizar la compra.
Rastrear conversiones: Identifica las acciones que los usuarios realizan en tu sitio, como inscripciones o compras, y evalúa la efectividad de tus anuncios.
Optimizar la publicidad: Utiliza los datos obtenidos para afinar tus campañas publicitarias y dirigirlas a audiencias que tienen más probabilidades de convertir.

Cómo obtener el código del Meta Pixel

Para comenzar, dirígete a Facebook Business Manager y obtén el ID del Pixel. Este ID será fundamental en los siguientes pasos de esta guía.

Advertencia: Facebook cambia constantemente su interfaz, por lo que es posible que las capturas de pantalla que utilice no coincidan exactamente con lo que ves. En ocasiones, he notado que diferentes personas en mis talleres ven versiones distintas de la interfaz, así que si no encuentras una opción, sigue buscando.

Haz clic en el ícono de Menú en la esquina superior derecha y dirígete a Eventos.

Luego, selecciona Fuentes de datos y elige el Pixel que deseas desplegar.

Si aún no tienes Pixels, haz clic en Configurar Pixel y sigue todos los pasos necesarios. En uno de esos pasos, Facebook te ofrecerá varias formas de añadir el Pixel, que abordaremos más adelante.

Tu objetivo principal ahora es obtener el ID del Pixel, el cual es una combinación de números. Una vez que lo consigas, cópialo, ya que lo necesitaremos en el siguiente capítulo de esta guía.

Instalación del Meta Pixel con Google Tag Manager

En el pasado, la única forma de instalar el Facebook Pixel a través de Google Tag Manager era utilizando la plantilla de Custom HTML, lo que implicaba trabajar directamente con el código JavaScript. Sin embargo, hoy en día, el proceso es mucho más sencillo gracias a la plantilla de Facebook Pixel creada por Simo Ahava.

Esta plantilla facilita la gestión de las etiquetas de Meta Pixel, lo que reduce el riesgo de errores. A continuación, aprenderás cómo agregar la plantilla y configurar el Pixel.

Agregar la plantilla personalizada de Facebook Pixel

Para agregar la plantilla en Google Tag Manager, ve a Etiquetas > Nueva y busca «Facebook». No encontrarás ninguna plantilla de etiqueta por defecto, así que debes agregarla manualmente.

Utiliza la función de Galería de plantillas de la comunidad, donde cualquiera en la industria puede crear plantillas personalizadas de Variables o Etiquetas. En Google Tag Manager, dirígete a Plantillas > Plantillas de etiqueta > Buscar galería y en el campo de búsqueda, escribe Facebook.

Al hacerlo, verás la plantilla correspondiente. Haz clic en ella y añádela a tu espacio de trabajo. Una vez agregado, aparecerá en Etiquetas > Nueva > Personalizado. Puedes reutilizar esta plantilla múltiples veces en el mismo contenedor.

Crear una etiqueta de vista de página para el Meta Pixel

La implementación básica del Meta Pixel comienza aquí. En Google Tag Manager, ve a Etiquetas > Nueva > Facebook Pixel y configura los campos según tu ID de Pixel que copiaste anteriormente. Este campo permite que Google Tag Manager sepa a qué cuenta publicitaria de Meta enviar los datos.

Por ahora, deja todas las otras configuraciones como están y establece que la etiqueta se active en Todas las páginas.

Crear una variable constante para el ID del Pixel

Para optimizar la gestión, es recomendable crear una variable constante que almacene el ID de tu Meta Pixel. Esto te permitirá reutilizar esta variable en todas las etiquetas sin tener que introducir el ID manualmente cada vez. Si un día decides cambiar el ID del Pixel, solo necesitarás hacerlo en la variable.

En Google Tag Manager, ve a Variables > Variables definidas por el usuario > Nueva > Constante y pega tu ID de Pixel. Guarda esta variable como Constante – ID de Facebook Pixel y luego regresa a la etiqueta de vista de página que creaste, reemplazando el ID fijo por esta variable.

Probar la etiqueta de Facebook Pixel

Una vez configurada la etiqueta, es esencial asegurarse de que todo esté implementado correctamente. Para ello, habilita el Modo de vista previa y depuración en Google Tag Manager. La página donde instalaste el Meta Pixel se abrirá en una nueva pestaña.

Revisa la ventana de depuración para el evento Contenedor cargado. Haz clic en él y deberías ver que tu etiqueta de Facebook Pixel se ha activado.

Además, puedes utilizar la extensión de navegador Facebook Pixel Helper. Instálala en tu navegador Chrome y su icono aparecerá en la esquina superior derecha. Actualiza la página y si el Pixel se ha implementado correctamente, el icono cambiará a azul con un número dentro.

Haz clic en el icono para verificar los datos registrados. Si ves un evento PageView con un icono de verificación verde, ¡es una buena señal! Si ves un icono amarillo o de carga, puede que haya un problema.

Otras formas de instalar el Meta Pixel con Google Tag Manager

Existen otras dos opciones para instalar el Pixel, aunque las mencionaré brevemente:

Instalación manual usando la etiqueta de Custom HTML (semi-recomendada). Este método era común antes de 2019, cuando la plantilla personalizada no estaba disponible.
“Hecho para ti”. No recomiendo esta opción.

Instalación manual utilizando la etiqueta de Custom HTML

Puedes implementar manualmente la etiqueta de Custom HTML si tienes acceso al código completo del Meta Pixel. En este caso, también deberás realizar modificaciones si deseas capturar parámetros adicionales.

Además, necesitarás usar secundarias de etiquetas para cada etiqueta de evento para asegurarte de que el código base del Facebook Pixel se ejecute cada vez que ocurra un evento o una vista de página.

Para obtener el código completo del Facebook Pixel, dirígete a tu Pixel en el Administrador de Eventos y selecciona la opción Gestionar integraciones.

“Hecho para ti”

Cuando intentas obtener el código completo del JavaScript del Facebook Pixel, Meta ofrece varias opciones para instalar el pixel, una de las cuales es a través de “Google Tag Manager”.

Te animo a NO elegir esta opción. Esta opción de instalación automática es complicada y no te da control sobre lo que sucede en tu contenedor. Podrías otorgar acceso a Meta para añadir o eliminar etiquetas, lo cual no es recomendable.

Además, al permitir acceso, Meta puede publicar tu contenedor inmediatamente, sin considerar otros cambios que puedan no haber sido probados. Esto puede llevar a problemas en tu configuración.

Cómo rastrear eventos con el Meta Pixel y Google Tag Manager

Hasta este punto, hemos realizado una implementación básica del Facebook Pixel a través de Google Tag Manager. Sin embargo, las vistas de página por sí solas no brindan una imagen completa de lo que hacen los visitantes en tu sitio.

Es esencial el seguimiento de eventos para entender si los visitantes solo aterrizan en una página y se van, o si interactúan haciendo clic, desplazándose, enviando formularios o realizando compras.

Para el seguimiento de eventos con Facebook Pixel, hay dos tipos principales de eventos:

Eventos estándar
Eventos personalizados

Diferencias entre eventos estándar y personalizados de Facebook Pixel

Según la documentación oficial de Facebook, los eventos estándar son las acciones más comunes que un usuario puede realizar en un sitio. La plataforma de Meta reconoce y admite estos eventos en todos sus productos publicitarios, y se utilizan para construir audiencias y optimizar conversiones.

A continuación, se presentan algunos de los eventos estándar que admite el Pixel de Facebook:

PageView
AddPaymentInfo
AddToCart
AddToWishlist
CompleteRegistration
Contact
CustomizeProduct
Donate
FindLocation
InitiateCheckout
Lead
Purchase
Schedule
Search
StartTrial
SubmitApplication
Subscribe
ViewContent

Estos títulos son bastante autoexplicativos, así que si deseas rastrear una interacción mencionada en la lista, es recomendable utilizar el Evento Estándar.

Por otro lado, los eventos personalizados son interacciones que no se incluyen en los eventos estándar. Ejemplos de eventos personalizados incluyen:

Desplazamiento
Tiempo en página (por ejemplo, disparar un evento después de que un visitante pasa 5 minutos en una página)
Visualización de un elemento específico
Click en enlaces externos
Reproducción de videos, etc.

Etiqueta + disparador para un Evento Estándar

Supongamos que deseas rastrear cuando alguien ingresa su correo electrónico en tu página de aterrizaje. Según la lista de eventos estándar, esto debería considerarse como un Lead. Para ello, crea una etiqueta que envíe el evento “Lead” a Facebook.

En Google Tag Manager, dirígete a Etiquetas > Nueva > Facebook Pixel y completa los siguientes ajustes:

En el campo de Nombre del evento, selecciona Lead. Por ahora, deja vacíos los otros campos. El siguiente paso es definir un disparador, que dependerá del tipo de interacción que deseas rastrear. Si estamos interesados en rastrear leads, debemos trabajar con formularios.

Si necesitas ayuda para rastrear interacciones, puede que debas consultar a un desarrollador. Ellos pueden implementar un código en el Data Layer, y necesitarás usar el disparador de evento personalizado para captar esos datos.

Por ejemplo, si después de que un visitante ingresa su correo es redirigido a una página de «Gracias» en www.ejemplo.com/thank-you, podrías crear un disparador de vista de página que se active si la URL contiene /thank-you.

Probar el evento estándar de Facebook Pixel

Después de crear una etiqueta y un disparador, guarda los cambios. Luego, habilita el modo de vista previa y depuración de GTM y navega a un formulario de contacto para enviar información ficticia. Una vez que ingreses los detalles, deberías ser redirigido a una página de «Gracias».

Verifica si en la ventana de vista previa se ha activado la etiqueta de Facebook Pixel correspondiente al lead. Si se ha activado, ¡eso es un buen inicio! Después, utiliza el Facebook Pixel Helper para asegurarte de que el evento “Lead” se muestre correctamente.

Finalmente, revisa los informes en Facebook Business Manager. Ve a Eventos > Fuentes de datos, selecciona tu Pixel y haz clic en Probar eventos. Verifica que el evento Lead aparezca en la lista.

Etiqueta + disparador para un Evento Personalizado

<pImaginemos que queremos rastrear cuando alguien presiona el botón de Reproducir en un video de YouTube incrustado en nuestra página de aterrizaje. Primero, crea una etiqueta en Etiquetas > Nueva > Facebook Pixel y completa los siguientes ajustes.

Queremos que esta etiqueta se active solo cuando alguien haga clic en el botón de Reproducir. Por lo tanto, necesitamos crear un disparador de video de YouTube. Haz clic en la sección de Disparadores de tu etiqueta y selecciona el icono de + en la esquina superior derecha.

Luego haz clic en Configuración del disparador > Video de YouTube y configura los ajustes deseados. Guarda el disparador y se añadirá automáticamente a tu etiqueta de Meta Pixel.

Si deseas agregar datos adicionales al evento personalizado, puedes hacerlo en Propiedades del objeto.

Dirígete a esa sección y agrega cualquier parámetro personalizado que necesites. Los variables que utilices deben ser habilitadas en Variables > Variables integradas > Configurar:

Probar el evento personalizado

El principio de prueba es el mismo que se describe en el capítulo anterior. Tu objetivo aquí es asegurarte de que:

La etiqueta de Meta Pixel se activa correctamente.
El Facebook Pixel Helper muestra el icono verde junto a ese evento.
La sección de Probar eventos en Facebook Events Manager muestra el evento que acabas de enviar.

Consejos e ideas sobre cómo rastrear otros eventos personalizados

La creatividad es clave cuando se trata de los eventos personalizados que deseas rastrear. Si no estás seguro de las posibilidades que ofrece Google Tag Manager, aquí tienes algunas ideas:

Enviar parámetros adicionales al Meta Pixel con Google Tag Manager

Con Facebook Pixel, no solo puedes enviar eventos, sino también valores adicionales como el total de la orden o el título de un video. Ya hemos visto un ejemplo de cómo enviar parámetros adicionales con el evento personalizado de video.

Para una lista completa de los parámetros estándar admitidos, consulta la documentación oficial. La mayoría de ellos son opcionales. Si trabajas con un evento personalizado, siéntete libre de crear cualquier parámetro que desees.

De todos los eventos estándar, solo el evento Purchase requiere los campos de currency y value.

Al revisar la documentación, verás qué campos espera Meta. Por ejemplo, si envías el evento AddToCart y deseas agregar datos personalizados (como el precio del producto), el Pixel de Facebook esperará content_ids, content_name, content_type, contents, currency, value. Ninguno de estos es requerido para el evento AddToCart.

Veamos un ejemplo de rastreo de una compra y cómo se debería configurar una etiqueta en GTM.

Ejemplo – Rastreo de Compras con Parámetros Adicionales

Imagina que los visitantes son redirigidos a una página de «Gracias» después de realizar una compra. Un desarrollador debería activar un código que envíe los datos de la transacción al Data Layer de esa página.

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
 'event' : 'transaction',
 'currencyCode' : 'EUR',
 'transactionId': '1234',
 'transactionAffiliation': 'Acme Clothing',
 'transactionTotal': 38.26, 
 'transactionTax': 1.29,
 'transactionShipping': 5,
 'transactionProducts': [{
   'sku': 'DD44',
   'name': 'T-Shirt',
   'category': 'Apparel',
   'price': 11.99,  
   'quantity': 1 
 }]
});
</script>

Recuerda que este código contiene valores ficticios. Un desarrollador debería implementar funciones y lógica personalizadas que reemplacen estos valores ficticios por datos reales de la compra.

En la documentación oficial de Meta Pixel, los campos requeridos son:

Revenue
Currency

Para enviar estos valores, utilizarás las claves currencyCode y transactionTotal del código del Data Layer. Primero, crea dos variables de Data Layer con la configuración adecuada:

Importante: los valores son sensibles a mayúsculas, así que ingresa currencyCode, no currencycode.

Luego, crea una etiqueta de Meta Pixel con la siguiente configuración para registrar los valores necesarios para el evento de compra:

Navega a las Propiedades del objeto.
Ingresa las variables del Data Layer que creaste.
Asegúrate de que los nombres coincidan con el formato proporcionado por Facebook.

Enviamos «EUR» como currency y 38.26 como el valor de transactionTotal en el Data Layer. A continuación, haz clic en la sección de Disparadores en tu etiqueta de Facebook Pixel y selecciona el icono + para crear un nuevo disparador. Luego, haz clic en Configuración del disparador > Personalizado. Queremos que el dataLayer.push que contiene los datos de la transacción funcione como disparador.

En el Disparador de Evento Personalizado, introduce el nombre del evento transaction (que es el valor de la clave ‘event’ en ese dataLayer.push).

Guarda el disparador y luego guarda la etiqueta.

Probar el evento con parámetros adicionales

Ahora, es hora de probar la configuración. Activa el modo de prueba y depuración, visita tu sitio y completa una compra. Deberías estar familiarizado con el proceso:

¿Qué hacer con los datos que acabas de rastrear a través de Facebook Pixel?

Esta pregunta va más allá del alcance de esta guía, pero mencionaré brevemente algunas de las posibilidades:

Al enviar eventos a Facebook Pixel, puedes crear conversiones personalizadas.
También puedes construir audiencias de remarketing.
Optimizar por conversiones.

Otras cosas que debes saber sobre el Facebook Pixel con Google Tag Manager

En los primeros cinco capítulos de esta guía, mencioné lo esencial que necesitas saber para implementar el Pixel de Facebook a través de GTM. Sin embargo, aún hay más que podrías considerar útil. A continuación, encontrarás aspectos adicionales que podrían interesarte:

Detección automática de datos

Siguiendo los pasos de esta guía, probablemente hayas notado que el Facebook Pixel Helper muestra mensajes como Microdata Detectado Automáticamente o Click en botón Detectado Automáticamente. Esto se llama Detección automática de datos.

Meta Pixel intenta captar varios datos adicionales en tu página. Sin embargo, no confío plenamente en soluciones de seguimiento automático, ya que podrían terminar capturando datos irrelevantes. Por eso, yo desactivaría esta función. Si quieres hacer lo mismo, ve a tus etiquetas de Facebook Pixel > Más configuraciones y tilda la opción Desactivar configuración automática.

Enviar datos a múltiples Pixels de Facebook en la misma página

En algunas ocasiones, puede que necesites enviar datos a varios Pixels de Facebook, por ejemplo, uno solo para un departamento y otro para la empresa completa. Esto no representa un problema para el Pixel de Facebook y es bastante sencillo de hacer con una plantilla de etiqueta personalizada de Facebook Pixel.

Si deseas configurar la etiqueta para enviar datos a múltiples Pixels, ingresa los IDs de Facebook Pixel en el campo de IDs de Pixel, separados por comas. Alternativamente, puedes ingresar múltiples IDs en una variable constante.

Coincidencia avanzada

La coincidencia avanzada del Pixel de Facebook permite a los anunciantes conectar los datos de sus clientes, como direcciones de correo electrónico, números de teléfono y otros datos demográficos, a sus campañas publicitarias en Facebook, permitiendo así objetivos más precisos.

En otras palabras, además de los eventos, puedes enviar la dirección de correo electrónico, el número de teléfono, el género, la ciudad, etc., de los usuarios de Facebook. Importante: Toda esta información se considera Información de Identificación Personal (PII) y debes obtener el consentimiento de tus usuarios antes de enviar estos datos.

Cuando envías información personal como parámetros de coincidencia avanzada, el Pixel de Facebook automáticamente cifra esos datos usando el algoritmo de hash SHA-256.

A continuación, te mostraré cómo configurar la coincidencia avanzada en Google Tag Manager. Imagina que trabajas con un sitio web donde los usuarios pueden iniciar sesión y utilizar tus servicios. Podrías pedirle a un desarrollador que envíe los siguientes datos al Data Layer (y esto debería hacerse antes de que se cargue el código del contenedor de GTM):

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event' : 'userData',
  'userId' : '123abc',
  'email' : '[email protected]',
  'city' : 'newyork',
  'gender' : 'm',
  'country' : 'us'
});

Recuerda que este código es solo un ejemplo. El código de tu desarrollador debería reemplazar esos valores ficticios con datos reales de los usuarios.

Crear variables de Data Layer

Para cada dato que desees acceder, necesitarás crear una variable de Data Layer separada. Por ejemplo:

Haz lo mismo para los demás puntos de datos que necesites.

Configurar los parámetros en la etiqueta de Facebook Pixel

Abre tu etiqueta de vista de página de Meta Pixel y activa la casilla Habilitar coincidencia avanzada, esto mostrará una nueva sección de Parámetros de información personalizada. Expande esa sección e ingresa los ajustes correspondientes. Por ejemplo, si tienes el correo electrónico, la ciudad, el género y el país, crea una fila para cada uno, selecciona el nombre del parámetro adecuado e inserta tus variables de Data Layer en la columna de valor del parámetro.

Probar la configuración de coincidencia avanzada

Verifica en el Facebook Pixel Helper. Deberías ver los parámetros de coincidencia avanzada que se han enviado. También deberías utilizar los parámetros de coincidencia avanzada en la sección de Probar eventos.

Obtener consentimiento antes de rastrear (#GDPR y otras regulaciones de privacidad)

Por último, pero no menos importante, está el tema de la privacidad del usuario. Todas estas configuraciones que puedes implementar en el Facebook Pixel a través de Google Tag Manager son útiles, pero no podrás hacerlo a menos que obtengas el consentimiento de tus visitantes.

Diversas regulaciones protegen la privacidad de los usuarios y exigen a las empresas obtener consentimiento previo antes de enviar datos al Facebook Pixel y otras plataformas de terceros. Estas regulaciones se actualizan continuamente para mantenerse relevantes.

No soy abogado, así que no me pidas consejos legales. Consulta con tu departamento legal.

Con Google Tag Manager, puedes controlar cómo se activan tus etiquetas con fines de marketing según si un visitante ha dado su consentimiento.

Para aprender cómo implementar un mecanismo de consentimiento de cookies en tu sitio a través de Google Tag Manager, deberías leer primero esta guía. O inscribirte en este curso para obtener instrucciones más actualizadas.

Después de implementar el mecanismo de consentimiento, tendrás varios disparadores de bloqueo y variables relacionadas con el consentimiento.

Aunque la plantilla de Meta Pixel tiene algunas características integradas relacionadas con el consentimiento (un campo llamado “Consentimiento otorgado”), no es 100% fiable. Por lo tanto, prefiero utilizar disparadores de bloqueo para etiquetas de Facebook/Meta.

Si deseas que tu configuración de Meta Pixel sea más precisa y recolectar datos de mayor calidad, considera implementar también una solución del lado del servidor.

Según Meta, el seguimiento del lado del servidor con la API de conversiones de Meta puede ayudarte a: