Soluciona el problema del Facebook Pixel Noscript en GTM

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

En el mundo del marketing digital, la correcta implementación de herramientas de seguimiento es crucial para maximizar el rendimiento de las campañas. Una de las herramientas más utilizadas es el Facebook Pixel, que permite rastrear la actividad de los usuarios en un sitio web. Sin embargo, cuando se integra con Google Tag Manager (GTM), pueden surgir confusiones. En este artículo, exploraremos en profundidad la relación entre Facebook Pixel y GTM, enfocándonos en el componente noscript y cómo asegurarse de que no se pierdan datos valiosos de usuarios que tienen JavaScript desactivado.

Comprendiendo el código de Facebook Pixel

El código de Facebook Pixel se compone de dos partes principales: <script> y <noscript>. La parte noscript es fundamental, ya que está diseñada para rastrear a los visitantes que tienen JavaScript deshabilitado en sus navegadores. Este es un aspecto crítico que muchos usuarios de GTM pasan por alto.

Cuando se utiliza GTM, el código debe ser dividido adecuadamente para funcionar correctamente. La parte <script> se recomienda colocarla dentro de las etiquetas <head>, mientras que la sección <noscript> debería ir justo después de la etiqueta <body> para asegurar que se ejecute correctamente en el contexto adecuado.

<script>: Se utiliza para ejecutar el código principal de Facebook Pixel.
<noscript>: Se utiliza para rastrear usuarios sin JavaScript.

El dilema del noscript en Google Tag Manager

El problema principal surge cuando los usuarios intentan implementar el código de Facebook Pixel completo en una etiqueta de Custom HTML dentro de GTM. Si bien esto puede parecer una solución simple, no es efectiva para los visitantes con JavaScript deshabilitado. Esto se debe a que, sin JavaScript, el contenedor de GTM (gtm.js) no se carga, lo que significa que ningún tag de Custom HTML se activará.

La única etiqueta que funciona en este contexto es la Custom Image, que puede ser utilizada para rastrear usuarios sin JavaScript. Por lo tanto, si se copia y pega el código completo de Facebook Pixel en la etiqueta de HTML personalizada, la parte <noscript> simplemente no funcionará.

Opciones para solucionar el problema del noscript

Si te enfrentas a este desafío, tienes varias opciones a considerar para asegurarte de que estás rastreando a todos tus visitantes:

Ignorar el problema y continuar utilizando el código completo en la etiqueta de Custom HTML, aceptando que un pequeño porcentaje de usuarios no será rastreado. Según informes, este porcentaje puede ser alrededor del 0.2% del tráfico global.
Eliminar la parte <noscript> del código y vivir sin ella, lo que es similar a la primera opción pero más riguroso.
Implementar una solución efectiva utilizando la etiqueta Custom Image para rastrear a usuarios con JavaScript deshabilitado, que es la opción más recomendada.

Implementación del Facebook Pixel noscript usando Custom Image

Para que el Facebook Pixel funcione incluso en navegadores con JavaScript deshabilitado, se debe utilizar una etiqueta de Custom Image. Aquí hay un paso a paso sobre cómo hacerlo:

Extracción del código noscript

Lo primero que debes hacer es abrir el código JavaScript de Facebook Pixel y separar la sección <noscript>:

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

A continuación, corta esta parte y guárdala en un lugar separado (por ejemplo, un archivo de texto). Después, en la etiqueta de Custom HTML en GTM, mantén sólo la parte del <script>.

Creación de la etiqueta Custom Image

Luego, regresa al contenido del código <noscript> y extrae la URL que se encuentra dentro de la etiqueta <img>. Esta URL es crucial para la configuración de la Custom Image en GTM. Asegúrate de que la URL sea única para cada carga de página, lo que se puede lograr utilizando el Cache Buster.

Configura la etiqueta de Custom Image en GTM.
Pega la URL extraída en la sección correspondiente.
No pongas ningún trigger todavía; lo configuraremos más adelante.

Configuración del Cache Buster

El Cache Buster es una función que genera un número único cada vez que se carga la página, lo que evita que el navegador almacene en caché la imagen y no vuelva a cargarla. Para implementarlo, simplemente añade el siguiente parámetro a la URL de la imagen:

https://www.facebook.com/tr?id=11111222223333334444&ev=PageView&noscript=1&gtmcb=UNIQUE_NUMBER

Nota: No es necesario editar el valor de gtmcb, simplemente déjalo tal cual y funcionará automáticamente.

Configuración del trigger

El siguiente paso es definir cuándo debe activarse la etiqueta de Custom Image. Lo ideal es que se dispare solo cuando JavaScript está deshabilitado. Para ello, puedes usar una variable de JavaScript personalizada que verifique el estado de JavaScript:

function() {
 return true;
}

Esta variable no retornará true cuando JavaScript esté deshabilitado. Asigna esta variable a un nuevo trigger y vincúlalo a tu etiqueta de Custom Image. Con esto, habrás configurado correctamente el seguimiento para los usuarios que no tienen JavaScript habilitado.

Consideraciones finales sobre el seguimiento de usuarios

El seguimiento de usuarios que tienen JavaScript deshabilitado puede parecer un detalle menor, pero es esencial para obtener una visión completa del comportamiento de los visitantes en tu sitio web. Implementar correctamente el Facebook Pixel a través de Google Tag Manager no solo asegura que se sigan todas las interacciones, sino que también maximiza el rendimiento de tus campañas publicitarias.

La solución presentada aquí, utilizando una Custom Image y un Cache Buster, permite rastrear a esos usuarios que de otra manera se perderían. Aunque la cantidad puede ser pequeña, cada visitante cuenta cuando se trata de optimizar tus esfuerzos de marketing. Recuerda siempre revisar y probar tus implementaciones para asegurarte de que todo funciona como debería.