Funnel de Venta
Google Tag Manager
Cómo instalar un píxel de Facebook con el Google Tag Manager

Cómo instalar un píxel de Facebook con el Google Tag Manager

Si estás usando publicidad de pago para adquirir nuevo tráfico, es muy probable que ya uses anuncios de Facebook. Sin embargo, si no mides la efectividad de tus campañas publicitarias y sólo quemas dólares esperando que tal vez algo esté funcionando, lo estás haciendo mal.

Si usas los anuncios de Facebook para adquirir tráfico, necesitas usar el Pixel de Facebook para medir el éxito de tus campañas. Cada vez que un visitante se convierta, debes rastrear esa conversión (por ejemplo, el plomo, la compra, etc.) con el pixel.

En esta guía, te mostraré cómo instalar Facebook Pixel con Google Tag Manager (no sólo vistas de página básicas sino también otras cosas, como eventos). El tema es bastante extenso, por lo tanto, recomiendo abrocharse el cinturón, y vamos a sumergirnos en esto. Además, considere la posibilidad de suscribirse a mi boletín de noticias para mantenerse al día con GTM.

Tabla de contenidos

Una rápida introducción a Facebook Pixel

Facebook Pixel es una solución creada por Facebook que permite medir el comportamiento de los usuarios/visitantes en su sitio y luego rastrear las conversiones o construir audiencias en base a los datos que usted envía.

Una vez que coloque ciertos fragmentos de código JavaScript en su sitio (y los active en base al comportamiento del usuario/visitante), Facebook comenzará a obtener datos. No voy a profundizar en las posibilidades (porque esta entrada del blog está más enfocada en la implementación). Pero si eres súper nuevo en FB Pixel, puedes obtener más información aquí.

En pocas palabras, usando Facebook Pixel podrás:

Crear audiencias personalizadas para propósitos de remarketing (por ejemplo, retargetar a aquellos que se han desplazado por lo menos 50% y han pasado por lo menos un minuto o aquellos que agregaron un producto a un carrito pero no compraron).
Hacer un seguimiento delas conversiones. La conversión es una acción importante (para el negocio) que un visitante/usuario ha completado, por ejemplo, el registro, la suscripción, la compra, etc. Al hacer un seguimiento de las conversiones, podrás decirle a Facebook que X visitante ha completado la acción que deseabas. Esto significa que tus informes mostrarán qué anuncios son más efectivos para alcanzar tus objetivos y cuáles no.
Oportunidades de orientaciónadicionales. Al realizar el seguimiento de ciertas interacciones (como clientes potenciales o compras), puede indicar a Facebook que encuentre más personas parecidas y les muestre sus anuncios basándose en los que ya han convertido en su sitio.

Dejemos de lado toda la pelusa y concentrémonos en el lado esencial: la implementación técnica: cómo agregar un píxel de Facebook a su sitio con el Administrador de etiquetas de Google, cómo enviar eventos, cómo implementar la búsqueda avanzada de coincidencias, las propiedades de los usuarios, etc.

¿Cómo obtener el código del Pixel de Facebook?

Lo primero es lo primero, vayamos al administrador de negocios de Pixel de Facebook y obtengamos el ID de Pixel (que será necesario en los próximos capítulos de esta entrada de blog.

Descargo de responsabilidad: Facebook está cambiando constantemente la interfaz de usuario aquí, por lo tanto, hay una alta probabilidad de que mis capturas de pantalla no coincidan con lo que realmente se ve. De hecho, una vez tuve un caso en el que 4 personas en mi taller de GTM vieron diferentes versiones de la interfaz al mismo tiempo. Así que, si no encuentras una opción determinada, sigue buscando.

En la esquina superior derecha, haz clic en el icono de Menú y ve al Administrador de Eventos .

Luego ve a Fuentes de Datos y elige el Pixel que te interesa.

Si aún no tienes ningún Píxel, haz clic en Configurar Píxel y sigue todos los pasos necesarios.

En uno de los pasos, Facebook te ofrecerá varias formas de agregar el píxel. Cierra esta ventana por ahora.

Tu objetivo principal, por ahora, es obtener la identificación del Píxel que se ve así (por supuesto, el valor será diferente):

Una vez que lo consigas, cópialo (porque lo necesitaremos en el próximo capítulo de esta entrada del blog).

#1. Cómo instalar el Pixel de Facebook con el Google Tag Manager: Pageview

En los viejos tiempos (pre-2023), la única manera de instalar Facebook Pixel a través de Google Tag Manager era usando la plantilla de etiquetas HTML personalizadas. Esto significaba que tenías que trabajar directamente con un código JavaScript, editarlo un poco, etc.

Hoy en día, las cosas son mucho más simples y elegantes porque Simo Ahava ha creado una plantilla personalizada de Pixel de Facebook y la ha compartido con todos. Esto hará que todo el proceso de gestión de etiquetas de Píxeles de FB sea más conveniente y menos propenso a errores.

#1.1. Añadir Plantilla Personalizada de Píxeles de Facebook

Si vas a Tags > New ( en el Google Tag Manager) y buscas «Facebook», no encontrarás ninguna plantilla de etiquetas. Eso es porque, por defecto, no existe tal etiqueta en el contenedor GTM. Tienes que añadirla manualmente.

Afortunadamente, hay una característica muy conveniente llamada Galería de Plantillas de la Comunidad donde cualquier persona de la comunidad (que puede codificar) puede crear plantillas personalizadas de Variables o Tags.

En el Administrador de etiquetas de Google, vaya a Plantillas > Plantillas de etiquetas > Galería de búsqueda y en el campo de búsqueda, introduzca Facebook.

Verás esta plantilla, haz clic en ella y añádela a tu Espacio de Trabajo. Una vez que lo hagas, aparecerá una nueva plantilla en la sección Tags > New > Custom y podrás reutilizarla varias veces en varias etiquetas del mismo contenedor.

#1.2. Etiqueta de vista de página de píxeles de Facebook

Todo comienza con la implementación básica del pixel de Facebook. En otras guías (especialmente en las más antiguas) que se encuentran en línea, puede que veas un término llamado Facebook Pixel Base Code (o algo similar). Los siguientes pasos que voy a demostrar explican exactamente eso (pero sin usar el término Código Base).

En GTM, ve a Tags > New > Facebook Pixel e introduce la siguiente configuración (si algunos campos no son visibles en la captura de pantalla, no cambié nada allí):

En el campo Pixel ID(s) de Facebook, introduzca el Pixel ID que copió en el capítulo ¿Cómo obtener el Pixel ID de Facebook? Gracias a este campo, GTM sabrá a qué cuenta exacta de anuncios de FB enviar estos datos.

Por ahora, deja todas las demás configuraciones como están (por ahora).

Poner la etiqueta a fuego en Todas las páginas.

#1.3. Variable constante para el ID del píxel

Alerta de spoiler: para cada interacción que quieras rastrear con el Píxel de Facebook, necesitaremos crear una etiqueta separada de Píxel de FB. En cada etiqueta, necesitarás definir un ID de Pixel de Facebook.

Eventualmente, podrías terminar con 50 (o incluso más) etiquetas que envían datos a Facebook. Esto significa que tendrás que insertar manualmente el Pixel ID más de 50 veces. ¿Pero qué pasa si un día tienes que cambiar a otro Pixel ID? Tendrás que cambiar manualmente la ID 50+ veces.

Para hacer las cosas más óptimas, podrías crear una variable GTM que contenga tu ID de Píxel de FB y luego simplemente reutilizar la misma variable cada vez que la necesites. Una vez que necesites cambiar el ID de Píxel, tendrás que hacerlo sólo una vez – en la Variable.

En el GTM, vas a Variables > Variables definidas por el usuario > Nuevo > Constante y pega el ID de tu Pixel de Facebook.

Guarda la Variable. Luego abre la etiqueta de vista de página del Pixel de Facebook previamente creada, e inserta la Variable Constante en lugar del ID del Pixel.

#1.4. Pruebe la etiqueta de píxel de Facebook

Ahora, es hora de asegurarse de que ha implementado todo correctamente.

Vista previa y modo de depuración del GTM. En el GTM, habilite el modo de vista previa y depuración, y luego actualice la página donde desea instalar el Píxel de Facebook con el Administrador de etiquetas de Google.

En la parte inferior de la pantalla, aparecerá una consola de depuración. Haga clic en el evento Pageview y debería ver que su etiqueta de Pixel de Facebook se ha disparado.

Ayudante de Píxeles de Facebook. El consejo anterior no significa que todo fue enviado a Facebook Pixel correctamente! Hay otros lugares que debemos revisar. Uno de ellos es el Ayudante de Pixeles de Facebook. Instálalo y verás este icono en la esquina superior derecha de tu navegador Chrome. Una vez que actualices la página Y si Facebook Pixel está implementado en una página, su color cambiará a azul y verás un número dentro de ese icono.

Haz clic en ese icono y comprobémoslo. Vemos que se ha rastreado una PageView y hay un icono de marca de verificación verde junto a ella. Eso es bueno! Si hubiera un cargador o un icono amarillo, eso significaría un posible problema. Pero un icono verde es exactamente lo que estamos buscando.

Informes de píxeles de Facebook

En Facebook Business Manager, vaya a Events Manager > Data Sources > Select your Pixel y luego Test Events .

Ingrese la URL de su sitio web (si estuviera trabajando con mi sitio, ingresaría a https://www.analyticsmania.com) y haga clic en Open Website. Después de ser redirigido a su propio sitio web, vuelva a los Eventos de Prueba de su Píxel y compruebe si ve las Páginas vistas desde su propio dispositivo. Si no aparece nada, vuelve a tu sitio y actualiza la página una vez más.

Si todo está bien, significa que has implementado correctamente el Pixel de Facebook con el Google Tag Manager.

#2. Otras opciones sobre cómo instalar Facebook Pixel con Google Tag Manager

Hay otras dos opciones sobre cómo instalar el píxel, pero las mencionaré muy brevemente (porque todavía tenemos mucho material que cubrir):

Manualmenteusando el tag HTML personalizado (semi-recomendado). Era un método recomendado antes de principios de 2023 (cuando la Plantilla Personalizada no estaba disponible todavía).
«Hecho para ti». No recomiendo este.

#2.1. Instalación manual usando la etiqueta HTML personalizada

En pocas palabras, sólo tienes que copiar todo el código del píxel de Facebook a la etiqueta HTML personalizada, hacer modificaciones directamente en su código (si es necesario) y también tienes que manejar la secuencia de etiquetas para asegurarte de que el código base del píxel de Facebook ya está cargado antes de que intentes enviar algún evento (o vista de página) a él.

¿Dónde puedes conseguir el código completo del Pixel de Facebook? Ve a tu Pixel de FB en el Administrador de Eventos, abre tu pixel y en la esquina superior derecha haz clic en Configurar > Instalar Pixel.

Luego elige Agregar manualmente el código del píxel al sitio web y copia el código principal:

En el Administrador de etiquetas de Google, ve a Etiquetas > Nuevo > Etiqueta HTML personalizada y pega el código.

#2.2. «Hecho para ti»

Cuando intentas obtener el código JavaScript completo del Pixel de Facebook, FB te ofrece varias opciones sobre cómo instalar el pixel. Una de las opciones es «Google Tag Manager».

Te recomiendo encarecidamente que NO elijas esta opción. Verán, esta opción de instalación incorporada a través de Google Tag Manager es un poco difícil.

Tendrás que conceder a Facebook acceso a tu contenedor de Google Tag Manager (puede añadir, eliminar etiquetas y hacer todo tipo de cosas. Y no quiero dar ese tipo de permiso).
Cuando concedas el acceso, Facebook agregará automáticamente el código de píxeles a tu contenedor e inmediatamente publicará tu contenedor (sin importar si tienes otros cambios (posiblemente no probados).
El nombre de esa etiqueta probablemente no coincidirá con su actual convención de nombres.

Por lo tanto, para obtener una sola etiqueta creada en su contenedor que se dispare en todas las páginas, dar acceso a Facebook no es una buena opción.

Por eso no debes elegir la opción «Google Tag Manager» (por más que suene contraintuitivo). Cuando instale el contenedor usted mismo, seguirá utilizando GTM y tendrá pleno control sobre lo que sucede en su contenedor.

#3. Cómo rastrear eventos con Facebook Pixel y Google Tag Manager

Hasta este punto, nos las arreglamos para hacer una implementación básica de Facebook Pixel a través de GTM. Pero las vistas de página por sí solas no dicen mucho sobre lo que un visitante/usuario está haciendo en su sitio. ¿El visitante acaba de aterrizar en una página y se fue? ¿O hizo click en algo, se desplazó, envió un formulario, hizo una compra?

Ahí es donde el seguimiento de eventos es súper importante. Sólo proporcionando a Facebook datos adicionales y de calidad, se puede esperar obtener el máximo provecho de ello.

Cuando se trata de seguimiento de eventos con Facebook Pixel, hay dos tipos de eventos:

#3.1 Eventos estándar vs. eventos personalizados de Pixel de Facebook

Según la documentación oficial de Facebook, los eventos estándar son las acciones más comunes que un visitante/usuario puede hacer en un sitio. Facebook reconoce y apoya esos eventos en todos los productos publicitarios. Estos eventos pueden ser usados para construir audiencias y optimizar las conversiones.

Estos son los eventos estándar que apoya FB pixel:

PageView
AddPaymentInfo
AddToCart
AddToWishlist
Registro completo
Contacte con
CustomizeProduct
Donaciones:
FindLocation
InitiateCheckout
Dirige
Compra
Programación
Busca en
StartTrial
SubmitApplication
Suscríbase a
ViewContent

P.D. La lista podría actualizarse en el futuro (porque eso ya ha ocurrido varias veces en el pasado).

Los títulos se explican por sí mismos. Así que si quieres rastrear una interacción que se menciona en esa lista, definitivamente usa el Evento Estándar para eso.

Los eventos personalizados son las interacciones que no entran en la categorización de eventos estándar. Por ejemplo:

Desplácese a
Tiempo en la página (por ejemplo, cuando se dispara un evento después de que el visitante pasa 5 minutos en una página)
Vio un cierto elemento
El enlace de salida hace clic
Reproducción de video, etc.

Todo depende de tu imaginación. Sin embargo, ten en cuenta una cosa: mientras que todavía puedes construir audiencias personalizadas con eventos personalizados, no puedes usarlos para la optimización de la conversión dentro de los anuncios de Facebook. Facebook simplemente no sabe lo que significa un determinado evento personalizado.

Con los eventos estándar, Facebook sabe que una compra es más importante que un ViewContent, mientras que los eventos personalizados como Scrolled y Canceled Subscription están en el mismo nivel de incertidumbre.

#3.2 Una etiqueta + un disparador para un evento estándar

Digamos que quieres rastrear cuando alguien ingresa su correo electrónico en tu página de aterrizaje. Mirando la lista de posibles eventos estándar, este debería ser considerado como un Lead. Vamos a crear una etiqueta que enviará el evento «Lead» a Facebook.

En el Google Tag Manager, vaya a Tags > New > Facebook Pixel e introduzca la siguiente configuración:

Como pueden ver, en el campo Nombre del Evento elegimos Lead. Por ahora, mantengan todos los demás campos vacíos. La otra cosa que necesitarás definir es un disparador (una condición en la que esta etiqueta debe disparar).

Esto depende en gran medida de qué tipo de interacción quieres rastrear. Los disparadores son una historia totalmente diferente que requiere que aprendas mucho.

Si estamos interesados en rastrear pistas, obviamente, tenemos que lidiar con las formas. Aunque no voy a profundizar en cómo hacerlo, aquí hay una guía muy extensa sobre cómo rastrear formularios con Google Tag Manager.

Si sientes que tienes dificultades para rastrear las interacciones por tu cuenta, tal vez debas pedir ayuda a un desarrollador. Un desarrollador tendrá que empujar los datos a la capa de datos y tendrás que usar el disparador de eventos personalizados para capturar esos datos.

En cuanto a la pista, imaginemos que un visitante (después de introducir un correo electrónico) es redirigido a una página de «Gracias» www.example.com/thank-you. Podríamos crear un disparador de Pageview que se dispara si la URL de la página contiene /gracias.

Pero ten en cuenta que el seguimiento de formularios está TANTO lleno de matices y tu disparador podría verse muy diferente.

#3.3 Prueba el evento estándar de píxeles de Facebook

Después de haber creado una etiqueta y un disparador, guarda todo. A continuación, refresque (o active) el modo de vista previa y depuración del GTM, refresque la página donde desea realizar el seguimiento de ese evento con Facebook Pixel. Completa esa interacción. En mi ejemplo, esa interacción es ingresar un correo electrónico en una página de aterrizaje y luego ser redirigido a una página de «Gracias».

Como mi disparador se basa en una vista de página, hago clic en eso en mi consola de vista previa y depuración…

… y luego comprueba si mi etiqueta de Pixel de Facebook (relacionada con una pista) se ha disparado. Si es así, ¡es un buen comienzo! Si tienes problemas para depurar las configuraciones del Google Tag Manager, lee esta guía.

El siguiente paso (como lo fue con la etiqueta FB Pageview) es revisar el Ayudante de Píxeles de Facebook. Después de que la etiqueta Lead se haya disparado, haz clic en el icono del Ayudante de Píxeles y comprueba si ves un icono verde junto a un evento Lead.

El paso final es probar los informes en Facebook Business Manager. Ve a Events Manager > Data Sources > Choose your Pixel y luego haz clic en Test events . Comprueba si ves el evento Lead allí.

#3.4 Una etiqueta + un disparador para un evento personalizado

En este ejemplo, digamos que queremos hacer un seguimiento cada vez que alguien presiona el botón de reproducción en un reproductor de vídeo de Youtube incrustado que tenemos en nuestra página de destino. Primero, vamos a crear una etiqueta. Ve a Tags > New > Facebook Pixel e introduce los siguientes ajustes.

Queremos que esta etiqueta se dispare sólo cuando alguien haga clic en el botón Play, por lo tanto, necesitamos crear un disparador de vídeo de Youtube para eso. Haz clic en la sección Triggering de tu etiqueta Pixel de Facebook y luego haz clic en el icono Más en la esquina superior derecha. A continuación, haz clic en Configuración del disparador > Vídeo de Youtube e introduce los siguientes ajustes (puedes añadir más si quieres, como el progreso)):

Guarda el disparador y se agregará automáticamente a tu etiqueta de píxeles de Facebook.

Por cierto, si desea agregar algunos datos adicionales al evento personalizado, puede hacerlo yendo a las Propiedades de los objetos y agregando los parámetros personalizados que necesite, por ejemplo (las variables que he utilizado están ambas incorporadas en el GTM. Sólo tienes que habilitarlas en Variables > Variables incorporadas > Configurar.):

#3.5 Probar el evento personalizado

El principio de prueba es exactamente el mismo que se describió en el capítulo #2.3. de esta entrada de blog (relacionado con la prueba de los Eventos Estándar). Su objetivo aquí es asegurarse de que:

La etiqueta de Pixel de Facebook se dispare
El ayudante de Pixel de Facebook muestra el icono verde junto a ese evento
La sección de Eventos dePrueba en el Administrador de Eventos de Facebook está mostrando el evento que acabas de enviar

#3.6 Consejos/Ideas sobre cómo rastrear otros eventos personalizados

Depende únicamente de tu imaginación qué eventos personalizados vas a rastrear. Si no estás seguro del potencial de Google Tag Manager, aquí tienes algunas ideas:

#4. Enviar parámetros adicionales a Facebook Pixel con Google Tag Manager

Con Facebook Pixel, puedes enviar no sólo eventos sino también valores adicionales (por ejemplo, el total del pedido, el título del vídeo, etc.). De hecho, en el ejemplo anterior del evento de video personalizado, ya lo hemos hecho.

Puedes encontrar una lista completa de los parámetros estándar soportados aquí. La mayoría de ellos son opcionales. Si estás trabajando con un evento personalizado, no dudes en proponer cualquier parámetro personalizado que desees.

Hablando de eventos estándar, sólo el evento de compra requiere moneda y valor.

Además, mirando la documentación, puedes ver qué campos son esperados por Facebook. Es decir, si envías el evento AddToCart y quieres enviar algunos datos personalizados (como el precio del producto, etc.), el píxel de Facebook esperará content_ids, content_name, content_type, contents, currency, value. Ninguno de estos datos son necesarios cuando se trata de AddToCart.

Así que, cuando planees pasar algunos parámetros, consulta esta página y comprueba la tabla de eventos estándar + sus parámetros.

Por ejemplo, rastreemos una compra y veamos cómo se debe configurar una etiqueta GTM.

#4.1. Ejemplo – Seguimiento de una compra con parámetros adicionales

Imagina que después de que un visitante hace una compra, es redirigido a una página de «Gracias». En esa página, le he pedido a un desarrollador que envíe los datos de la transacción a la capa de datos.

Aquí está ese fragmento de código que un desarrollador activó (que contiene la información de la transacción). Lo tomé de mi otra guía sobre la implementación del Comercio Electrónico Estándar a través de GTM.

Tenga en cuenta que este código contiene valores ficticios. Un desarrollador debería escribir algunas funciones y lógica personalizada en su código que sustituyan los valores ficticios por datos reales de la compra.

Mirando la documentación oficial de FB Pixel, se requieren dos campos:

Enviémoslos. Mirando mi código de muestra de la capa de datos, hay dos claves que nos interesan: currencyCode y transactionTotal. Podríamos reutilizarlas y enviar sus valores a Facebook Pixel. Para hacer eso, primero, vamos a crear dos variables de la capa de datos con la siguiente configuración:

Importante: esos valores distinguen entre mayúsculas y minúsculas, por lo tanto, introduzca currencyCode, no currencycode.

Luego, crear una etiqueta de píxel de Facebook con la siguiente configuración:

Como pueden ver, he insertado ambas variables en la sección de Propiedades del Objeto. En el lado izquierdo, puedes ver el nombre del parámetro que Facebook está esperando(moneda y valor) y establecimos nuestras Variables de Capa de Datos como valores de esos dos parámetros.

En orden de palabras, enviaremos «EUR» como moneda (porque «EUR» es el valor del Código de moneda en la Capa de Datos) y 38.26 porque es el valor de la transacciónTotal en la Capa de Datos).

A continuación, haga clic en la sección Triggering de su etiqueta Pixel de Facebook y luego haga clic en el icono Plus en la esquina superior derecha (crearemos un nuevo trigger). A continuación, haz clic en Trigger Configuration > Custom. Queremos que dataLayer.push (que contiene los datos de la transacción) se utilice como disparador.

En el Disparador de eventos personalizado, introduzca el nombre del evento de la transacción (porque ese es el valor de la tecla ‘evento’ en ese dataLayer.push).

Guarde el desencadenante y luego guarde la etiqueta.

#4.2. Pruebe el evento con parámetros adicionales

Ahora, es hora de probar la configuración. Refresca el modo de vista previa y depuración, ve a tu página web, recógelo y completa una compra. A estas alturas, ya deberías conocer el procedimiento:

Compruebe si la etiqueta de píxeles de Facebook se ha disparado al realizar la compra (en mi caso, debería hacer clic en el evento de transacción en la consola de depuración y luego comprobar si la etiqueta se ha disparado efectivamente).
Comprueba si el evento de compra tiene un icono verde junto a él. Además, amplíe el evento para ver si todos los parámetros se enviaron como estaba previsto.
Compruebe si el evento con parámetros personalizados se muestra en la sección Eventos de prueba de la interfaz del Administrador de eventos de FB. Revisa el Capítulo #3.3. para aprender más.

#4.3. Bono – reutiliza los datos de comercio electrónico de Google Analytics (de la Capa de Datos) en tu Pixel de Facebook

Pretendamos que tenemos el mismo caso (cuando después de una compra, el visitante es redirigido a una página de «Gracias») pero la estructura de la Capa de Datos es diferente. Está creada específicamente para el GA Enhanced Ecommerce (ver el ejemplo a continuación):

Si no estás familiarizado con esto, para implementar el Comercio Electrónico Mejorado, un desarrollador debe implementar los datos de comercio electrónico en una estructura muy estricta que es requerida por Google.

Sin embargo, el problema surge cuando te das cuenta de que la estructura de Ecommerce de Google no es soportada por Facebook Pixel. Afortunadamente, la plantilla de etiquetas de Facebook Pixel soporta eso y puede transformar automáticamente los datos de comercio electrónico de Google en un formato compatible con Facebook.

#4.3.1. Habilitar el soporte mejorado de Ecommerce

Esa característica automática de «EE a FB Pixel» en la plantilla de la etiqueta soporta los siguientes eventos en Facebook Pixel:

ViewContent (basado en el «detalle» en Enhanced Ecommerce)
AddToCart (basado en el «add» de Enhanced Ecommerce)
Checkout (basado en el «checkout» en Enhanced Ecommerce)
Compra (basado en la «compra» en Enhanced Ecommerce)

Entonces, ¿necesitas crear etiquetas de píxeles de Facebook separadas para cada evento? En realidad, depende de ti. Hay dos maneras de abordar esto:

Puedes crear una etiqueta FB separada para cada evento (eso es 4 etiquetas en total + 4 disparadores)
O puedes crear una etiqueta + 1 disparador. Ese disparador se disparará en ViewContent, AddToCart, Checkout o Purchase. La etiqueta Pixel de Facebook se adaptará automáticamente y enviará el evento adecuado + datos de comercio electrónico.

En esta entrada del blog, te mostraré la segunda opción.

En el Google Tag Manager, vaya a Tags > New > Facebook Pixel e introduzca la siguiente configuración:

La parte más importante aquí es habilitar la casilla de verificación «Enhanced Ecommerce dataLayer Integration». Una vez que lo haga, notará que el campo «Event Name» cambia a «Set automatically from dataLayer».

Ahí es donde ocurre la magia. No hay nada más que necesites hacer en el nivel de la etiqueta, SIN EMBARGO, necesitas crear un disparador para eso.

#4.3.2 Disparador de eventos personalizado

Si echa un vistazo al DataLayer.push de Enhanced Ecommerce (capítulo #4.3.), verá una clave de ‘evento’ cuyo valor es ‘eec.purchase’. Imaginemos que otros DataLayer.push’es de comercio electrónico mejorado siguen la misma convención de nombres:

eec.addToCart para añadir al carrito
eec. detail para ver el detalle del producto
eec.check out para los pasos de salida.

Lo que necesitamos hacer ahora es crear un disparador que se activará cuando CUALQUIERA de los eventos mencionados (incluyendo eec.purchase) sea empujado a la Capa de Datos.

Por eso necesitamos ir a Triggers > Trigger Configuration > New > Custom Event e introducir

EEC. (Compra, añade a la carretilla, detalle de la compra)

A continuación, haz clic en la casilla de verificación Usar coincidencia de regex . Lo que hicimos es que instruimos a GTM para que siguiera buscando ya sea eec.purchase, o eec.addToCart, u otros eventos definidos en esa expresión regular.

Si eres nuevo en RegEx, te recomiendo encarecidamente que le eches un vistazo más profundo.

¿Qué pasa si su proyecto está usando diferentes nombres de eventos para el DataLayer.push de Enhanced Ecommerce? Por ejemplo, detailInfo , checkoutInfo, purchaseInfo, addToCartInfo.

En ese caso, la forma más fácil sería introducir todos ellos en el disparador y separarlos con una tubería | , por ejemplo detailInfo|checkoutInfo|purchaseInfo|addToCartInfo .

En las Expresiones Regulares, una pipa significa «O».

#4.4. Pruebe la configuración

Ahora, es hora de probar la etiqueta. Refresca el modo de vista previa, actualiza tu sitio web/tienda online donde has implementado esto.

Vaya a la página de un producto, añádalo al carrito, inicie el proceso de pago y luego haga una compra (Importante: debe tener implementado el Comercio Electrónico Mejorado a través del Google Tag Manager y los datos del comercio electrónico deben ser empujados a la Capa de Datos). En cada uno de estos pasos, verá un nuevo DataLayer.push en el lado izquierdo del modo de vista previa. Haz clic en él y deberías ver la etiqueta de Pixel FB disparada.

A continuación, comprueba el Ayudante de Píxeles FB. Esta vez, es probable que no veas el icono verde. En su lugar, te enfrentarás a una advertencia similar a esta. Aquí hay un ejemplo del evento de compra enviado a Facebook.

Si no estás usando el Remarketing Dinámico de Píxeles de Facebook, puedes ignorar estas dos advertencias. En su lugar, compruebe si el resto de los datos de compra fueron enviados correctamente:

Por último, vaya al Administrador de Eventos de Facebook y compruebe si los datos que se recibieron son correctos. Nota: ese informe también mostrará las mismas advertencias Píxel y Catálogo no emparejado y Parámetro de producto faltante. De nuevo, si no estás usando el Remarketing Dinámico, ignora esas advertencias.

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

Esta pregunta va más allá del alcance de esta entrada en el blog, por lo tanto, sólo mencionaré rápidamente las posibilidades:

#6. Otras cosas que hay que saber sobre el Pixel de Facebook con el Google Tag Manager

Los primeros 5 capítulos de esta entrada de blog mencionaron las cosas clave que debes saber para implementar el pixel FB a través del GTM. Sin embargo, ese no es el final de la lista. A continuación, encontrarán otras cosas que pueden ser útiles. Sin embargo, en lugar de explicarlas con gran detalle, les daré un breve vistazo o les proporcionaré enlaces para que las investiguen individualmente.

#6.1. Detección automática de datos

Siguiendo los pasos de esta guía, probablemente ya has notado que Facebook Pixel Helper muestra cosas como Microdatos Detectados Automáticamente o Clic de Botón Detectado Automáticamente . Esto se llama Detección Automática de Datos.

El Pixel de Facebook trata de capturar varios datos adicionales en su página. Sin embargo, no confío en las soluciones de rastreo automático porque pueden terminar capturando muchos datos de basura también.

Por eso suelo desactivar esta función. Si quieres hacer lo mismo, ve a tus etiquetas de Píxeles de Facebook > Más configuraciones y marca la casilla de verificación Desactivar configuración automática. Haz eso en todas las etiquetas de Pixel de Facebook.

#6.2. Enviar datos a múltiples pixeles de Facebook en la misma página

Puede haber casos en los que tengas que enviar los datos a varios Pixeles de Facebook, por ejemplo, un pixel es sólo para el departamento y el otro es para toda la empresa. Eso no es un problema para el Pixel de Facebook y es bastante fácil de hacer con la plantilla de etiquetas del Pixel de Facebook de Simo.

Si desea configurar la etiqueta para enviar los datos a varios píxeles, sólo tiene que introducir en el campo de identificación de Píxeles de Facebook, separados por una coma.

O puedes introducir múltiples identificaciones en la variable constante.

O puedes separar múltiples Variables Constantes (cada una de ellas contiene un único ID de Pixel FB).

Todas estas opciones funcionarán.

#6.3. Coincidencia avanzada

Facebook Pixel Advanced Matching ofrece a los anunciantes la posibilidad de 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 de Facebook, por lo tanto, dirigidas con mayor precisión.

En otras palabras, junto con los eventos, también puede enviar la dirección de correo electrónico, el número de teléfono, el sexo, la ciudad, etc. del usuario de Facebook. Importante: toda esta información se considera información de identificación personal (IIP) y es necesario obtener el consentimiento de sus usuarios/visitantes antes de enviar estos datos (mencionaré más información al respecto más adelante).

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

Primero, mostraré cómo configurar el Advanced Matching en el Google Tag Manager. Imaginemos que trabajas con un sitio web donde los usuarios pueden conectarse y usar tus servicios. Podrías pedirle a un desarrollador que empuje los siguientes datos a la Capa de Datos (y hacerlo antes de que se cargue el código del contenedor GTM):

window.dataLayer = window.dataLayer || [];window.dataLayer.push({ 'evento' : 'userData', 'userId' : '123abc', 'email' : '[email protegido]', 'ciudad' 'newyork','género' : 'm', 'país' : 'us'});

Sólo ten en cuenta que el código de arriba es sólo un código/ejemplo ficticio. El código de tu desarrollador debería reemplazar esos valores de marcador de posición con algunos datos de usuario reales.

#6.3.1. Variables de la capa de datos

Para cada punto de datos al que desee acceder, tendrá que crear una Variable de Capa de Datos separada, por ejemplo:

Haz lo mismo para el resto de los puntos de datos.

#6.3.2. Establezca los parámetros en la etiqueta de píxeles FB

Ahora, ve a Tags y abre tu etiqueta de Facebook Pixel Pageview. Marque la casilla de verificación Activar Coincidencia Avanzada y aparecerá una nueva sección de Parámetros de Datos de Información Personalizada.

Expande esa sección e introduce los siguientes ajustes. Como tengo el correo electrónico, la ciudad, el género y el país, crearé una fila separada para cada uno de ellos, elegiré el nombre del parámetro adecuado y luego insertaré mis Variables de la Capa de Datos en la columna Valor del parámetro.

Puedes hacer lo mismo para todas tus etiquetas de píxeles de Facebook. Sin embargo, es completamente suficiente hacer eso para la etiqueta PageView (porque normalmente, dispara la primera en la carga de la página).

#6.3.3. Pruebe la configuración

Revisa el Ayudante de Pixeles de Facebook. Deberías ver los Parámetros Avanzados de Coincidencia que fueron enviados:

También, deberías ver los Parámetros Avanzados de Coincidencia en la sección de Eventos de Prueba .

#7. Propiedades del usuario

Actualización: Facebook desaprobó las propiedades de los usuarios el 22 de junio de 2023. No estoy al tanto de las alternativas para esto en este momento.

Las propiedades de usuario son propiedades y valores que defines para un usuario de tu sitio web y te permiten entender mejor a tu audiencia. Un ejemplo de la Propiedad de Usuario podría ser el plan de precios del usuario.

Si está familiarizado con las dimensiones personalizadas de Google Analytics, piense en las Propiedades de usuario en Facebook como en las dimensiones personalizadas del usuario en Google Analytics.

Para implementar las propiedades de usuario, es necesario:

Enviar el ID de usuario a Facebook Pixel. Ese ID de usuario es un identificador que usas en tu propia base de datos. Importante: PII (como la dirección de correo electrónico) no puede ser usado como un ID de usuario en Facebook Pixel
Y luego tienes que enviar las Propiedades de Usuario a FB Pixel.

Hay dos tipos de Propiedades de Usuario en FB Pixel, predefinidas (estándar) y personalizadas.

Cuando implementes las propiedades de usuario, podrás verlas en el panel de control de Facebook Analytics en Personas > Propiedades de usuario (esto se aplica sólo a las personalizadas). Puedes aprender más sobre las limitaciones y requisitos de las propiedades de usuario aquí.

Veamos cómo podemos implementar esto con el Administrador de etiquetas de Google.

#7.1. Variable con el ID de usuario

¿Dónde puedes conseguir la identificación de usuario? Eso depende de su sitio web. Puedes pedirle a un desarrollador que ponga el ID de usuario en la capa de datos (como en el capítulo 6.3), o puedes intentar conseguirlo de alguna otra manera. En mi guía de User ID para GA, menciono varias otras alternativas.

Seguiré trabajando con el fragmento de código dataLayer.push() del capítulo #6.3 y accederé al valor de la clave userId. Vaya a GTM > Variables > Variables definidas por el usuario > Nuevo > Data Layer Variable e introduzca los siguientes ajustes (distingue entre mayúsculas y minúsculas):

Le daré a esta variable un dlv – nombre de userId.

#7.2. Etiqueta de píxeles de Facebook

Ahora, es hora de pasar el ID de usuario a Facebook Pixel. Ve a Etiquetas y abre tu etiqueta de Pageview y marca la casilla de Habilitar Propiedades de Usuario. Luego expande la sección Propiedades del Usuario y en el campo ID de usuario, inserta tu variable que devuelve el ID de usuario. En mi caso, esa es la variable de la capa de datos que acabo de crear.

Ahora es el momento de enviar las Propiedades de Usuario. En el capítulo 6.3.1. creamos un grupo de variables que devuelven puntos de datos como ciudad, género, país. Ahora debemos insertarlas en la sección de Propiedades de Usuario. Presiona Agregar Propiedad y aparecerá una nueva fila. Ya que tenemos 3 variables que pueden ser usadas como propiedades (no se puede usar el correo electrónico), vamos a introducirlas como corresponde.

Los nombres de las propiedades estándar deben comenzar con el signo de dólar ($). Ciudad, género y país son TODAS propiedades estándar, por lo tanto, esto es lo que debemos introducir en la etiqueta de píxeles FB:

Esta es la lista actual de todas las propiedades predefinidas. En el futuro, esa lista podría cambiar:

$account_created_time – La marca de tiempo UNIX cuando la cuenta de usuario fue creada
$city – La ciudad en la que vive el usuario
$país – El país en el que vive el usuario
$currency – La moneda preferida del usuario
$género – El género del usuario. Para obtener análisis consistentes, establece esto en m o f.
$install_source – La fuente desde la cual el usuario instaló su aplicación
$language – El idioma preferido del usuario
$estado – El estado en el que vive el usuario
$tipo_de_usuario – El tipo de usuario. Se definen los tipos para obtener los resultados analíticos que se desean.
$zipcode – El código postal del usuario.

Siempre puede consultar esta lista para obtener la información más actualizada.

Si desea pasar alguna propiedad de usuario personalizada, como el plan de precios, no utilice el signo $ en su configuración, por ejemplo:

#7.3. Pruebe las propiedades de píxeles de usuario de Facebook

Ya conoces el procedimiento. Ahora, refresca el modo de vista previa, y luego refresca la página en la que estás trabajando. Luego comprueba si tu etiqueta de Pixel de Facebook se ha disparado y si el ayudante de Pixel de Facebook muestra todos los puntos de datos (que fueron enviados) correctamente.

Sin embargo, ten en cuenta que puedes enviar los valores correctos (completos) para los campos como Ciudad o País (no hay reglas estrictas aquí (como lo fue en la Búsqueda avanzada de coincidencias)).

En cuanto a la depuración de la propiedad del usuario en el Administrador de Eventos de Facebook o en Facebook Analytics, esa parte apesta. Basado en mi experiencia, ni las pruebas de eventos en el Administrador de Eventos de Facebook ni en Facebook Analytics > Actividad > Depuración de Eventos mostrarán las propiedades del usuario.

La única forma de validarlo aquí es esperar un poco y luego tratar de usar informes como Actividad > Desgloses en FB Analytics. En el desplegable de esos informes, deberías empezar a ver tus propiedades bastante pronto. Si me equivoco (y usted conoce una buena solución) por favor hágamelo saber en los comentarios.

Si (en el futuro) quieres eliminar algunas propiedades no utilizadas, puedes hacerlo en el informe Personas > Propiedades del usuario (en FB Analytics).

#7.4. ¿Dónde puedes ver las propiedades del usuario en Facebook Analytics?

¿Recuerdas que mencioné anteriormente que las propiedades del usuario se pueden encontrar en Personas > Propiedades del usuario en Facebook Analytics ? Esto se aplica a las propiedades de usuario personalizadas (como PricingPlan). Las propiedades estándar no aparecerán allí.

Sin embargo, uno de los lugares donde puedes usar las propiedades de usuario (predefinidas y personalizadas) es en el informe Breakdowns .

La última, pero definitivamente no menos importante: la privacidad del usuario. Todas estas cosas que puedes configurar en Facebook Pixel con el Google Tag Manager son ordenadas, sin embargo, no puedes hacerlo a menos que obtengas el consentimiento de tus visitantes/usuarios. Hay regulaciones como GDPR que protegen la privacidad de los usuarios y requieren que las empresas obtengan el consentimiento del usuario/visitante antes de enviar los datos a Facebook Pixel (y no se limita a eso).

No soy abogado, por lo tanto, por favor no me pidas asesoramiento legal. Hazlo con tu departamento legal en su lugar.

Con el Google Tag Manager, puedes controlar cómo se disparan tus etiquetas dependiendo de si un visitante/usuario dio su consentimiento para propósitos de marketing.

Si desea obtener información sobre cómo implementar un mecanismo de consentimiento de cookies en su sitio a través de Google Tag Manager, primero debe leer esta guía.

Una vez que haya implementado el mecanismo de consentimiento, acabará con un montón de desencadenantes de bloqueo y variables relacionadas con el consentimiento.

Por lo general, utilizarás los activadores de bloqueo (y así es como aconsejé a los usuarios en el pasado). Ahora, el pixel FB ofrece una característica genial que hace que el manejo sea un poco diferente. Por supuesto, puedes seguir las pautas generales de mi guía y usar los disparadores de bloqueo. Pero la nueva solución (desarrollada por Facebook) es más poderosa.

¿Por qué? Porque con la última solución, seguiremos disparando las etiquetas aunque no se haya dado el consentimiento, SIN EMBARGO, los datos no se enviarán. Se añadirán a una cola. Y una vez que el visitante dé su consentimiento, entonces todos los eventos de la cola serán enviados a Facebook.

Por ejemplo:

Un visitante llega a su página
Se desplaza hacia abajo (la etiqueta FB se dispara y el evento se añade a la cola)
Permanece en una página durante 1 minuto (otra etiqueta disparada y el evento se añade a una cola)
Un visitante da su consentimiento haciendo clic en un botón de un popup (o una barra)
Todos los eventos que estaban en la cola serán enviados a un pixel de Facebook. Esto significa que los eventos anteriores al consentimiento no se perderán.

Importante: si la página es recargada/actualizada un usuario navega a otra página (antes de dar el consentimiento), la cola se borrará.

En la etiqueta de Pixel de Facebook, verás un desplegable llamado Consentimiento Otorgado . De forma predeterminada, su valor se establece en true (lo que significa que cuando la etiqueta se dispara, los datos se envían a Facebook). Sin embargo, si implementas la solución de consentimiento de cookies que he descrito aquí o algo similar, tendrás varias variables como «Consentimiento otorgado a la comercialización», «Consentimiento otorgado a las estadísticas», etc.

Estas variables deberían devolver verdadero o falso dependiendo de si el usuario/visitante dio su consentimiento para ser rastreado.

En el caso de Facebook Pixel, necesitaremos usar una variable que esté relacionada con el consentimiento de marketing. En mi caso, eso es Regex – cookies de orientación permitidas (también puedes obtenerla si implementas esta solución):

Usar esa variable en el campo Consentimiento Concedido (GDPR). Importante: este campo acepta verdadero o falso. Así que si tu variable devuelve valores diferentes, como sí o no, puede que necesites usar regex, lookup u otra variable que transforme la salida.

Para enviar todos los eventos que están esperando en la cola, debemos enviar cualquier evento que contenga el consentimiento concedido : true. Para ello, suelo utilizar el evento personalizado llamado consentGiven (puedes llamarlo como quieras).

Esta es la configuración de esa etiqueta:

El disparador depende mucho de qué tipo de solución de consentimiento de cookies hayas implementado. Algunas configuraciones usan el evento personalizado de activación de consent_marketing, otras pueden usar uno diferente. Por lo tanto, asegúrese de disparar la mencionada etiqueta de evento personalizado sólo cuando se haya dado el consentimiento para fines de marketing.

Si has implementado esta solución, el activador puede tener este aspecto:

Lo siento por no ser muy específico aquí, sin embargo, la respuesta «depende» es demasiado fuerte aquí.

Pixel de Facebook con Google Tag Manager: Palabras finales

¡Uf! Ha pasado un tiempo desde la última vez que escribí una entrada de blog tan larga. Aunque el promedio de la entrada es de ~3000 palabras, esta es de más de 7k. Y, honestamente, hay incluso más cosas que cubrir. Sin embargo, creo que las que he compartido arriba son las más esenciales y se aplican a la mayoría de las configuraciones.

Así que cuando se trata de la implementación de Facebook Pixel con Google Tag Manager, aquí están las claves:

Usar la plantilla personalizada de etiquetas de píxeles de Facebook para una gestión más fácil
No te limites sólo con las vistas de página, sigue los eventos también.
Se recomienda confiar en eventos estándar como sea posible (FB utilizará eso para la optimización de la conversión)
Sin embargo, si los eventos personalizados siguen estando disponibles para la construcción de audiencias y conversiones
Es bastante fácil enviar los datos a varios pixeles de Facebook a la vez.
Considere la posibilidad de utilizar la correspondencia avanzada y las propiedades de usuario
Consigue el consentimiento antes de enviar los datos de tus visitantes/usuarios a Facebook
Siempre pruebe a fondo. Revisa el modo de previsualización, el ayudante de Pixel de Facebook, la sección de Eventos de Prueba del Gerente de Eventos de FB.

Eso es todo por esta vez. Si se enfrentan a algunas dificultades relacionadas con la implementación de Facebook Pixel a través de Google Tag Manager, háganmelo saber en los comentarios y veremos qué podemos hacer.