Desmitificando la etiqueta de imagen personalizada en GTM

Actualizado: 1 de enero de 2022

Si estás dando tus primeros pasos en Google Tag Manager (GTM), es probable que te estés haciendo una pregunta fundamental: ¿Qué es una etiqueta de imagen personalizada en Google Tag Manager?. Es una interrogante que muchos se hacen, especialmente si ya has implementado algo de seguimiento con Google Analytics en tu sitio. En este artículo, vamos a desglosar este concepto y explorar su funcionalidad.

A pesar de que existen varios artículos en la web que mencionan las etiquetas de imagen personalizadas, a menudo carecen de una explicación clara y completa. Así que aquí, desmitificaremos este tema y te mostraremos cómo puedes aprovecharlo.

Definición de la etiqueta de imagen personalizada

La etiqueta de imagen personalizada realiza una solicitud para cargar una imagen desde una URL específica. Lo interesante es que, al hacer esta solicitud, en realidad estás transmitiendo información a un servidor. Por ejemplo, si haces una solicitud a la URL https://www.ejemplo.com/algo?parametro1=buen&parametro2=123, el servidor que recibe esta solicitud procesará parametro1 y parametro2, actuando en consecuencia, como registrar esos parámetros como un evento.

Esta funcionalidad es esencial, ya que la etiqueta de imagen personalizada se convierte en una herramienta útil para enviar datos desde tu sitio web a diversas herramientas de seguimiento, como el píxel de Facebook, entre otros.

A diferencia de las etiquetas de Google Analytics y HTML personalizadas que dependen de JavaScript, la etiqueta de imagen personalizada tiene una ventaja significativa. Si JavaScript está deshabilitado en el navegador del usuario, las etiquetas convencionales no podrán funcionar, pero la etiqueta de imagen personalizada puede seguir enviando datos. Es aquí donde se convierte en el héroe del día.

Esta etiqueta se carga a través de un iFrame, que se crea con la parte <noscript> del fragmento de GTM, garantizando que la solicitud de imagen se realice independientemente de la configuración de JavaScript del navegador.

Configuración y campos de la etiqueta de imagen personalizada

La configuración de una etiqueta de imagen personalizada es relativamente sencilla y no cuenta con muchas opciones:

• URL de la imagen: Este es el campo donde debes ingresar la dirección de la imagen, incluyendo todos los parámetros necesarios para transmitir los datos.
• Parámetro de Cache Busting: Este parámetro ayuda a evitar que los navegadores carguen versiones en caché de la imagen.

El campo de URL de la imagen es crucial, ya que define cómo se envían los datos al servidor. Por ejemplo, podrías usar una URL como https://www.ejemplo.com/algo?parametro1=buen&parametro2=123.

• Si hay versiones del protocolo disponibles, puedes usar “//” en lugar de https://.
• Selecciona https:// si solo está disponible una versión segura del píxel de seguimiento.

El Cache Busting es una técnica que asegura que los hits se registren incluso en navegadores que tienen versiones en caché de la imagen. Puedes usar el parámetro de Cache Busting predeterminado (gtmcb) o establecer uno propio.

¿Qué es el parámetro de consulta de Cache Busting (gtmcb)?

Una de las razones por las que los sitios web cargan rápidamente es la caché. Esta es una ubicación de almacenamiento temporal en tu computadora para los archivos descargados por tu navegador, como hojas de estilo CSS, scripts de JavaScript e imágenes. Cuando vuelves a visitar un sitio web, el navegador verifica qué contenido ha cambiado y solo descarga los archivos actualizados o los que no están ya almacenados en la caché.

Esto es fantástico para el usuario, ya que mejora la experiencia de navegación. Sin embargo, para quienes trabajan en marketing digital, puede presentar algunos desafíos. Si no utilizas la técnica de cache busting, tu etiqueta de imagen personalizada solo funcionará la primera vez que se cargue. En una segunda carga, los datos no se transmitirán al servidor receptor, ya que la imagen se cargará desde la caché del navegador.

Esto significa que los datos más recientes no llegarán a su destino, como el servidor del píxel de Facebook.

Entonces, ¿cuál es la solución? La URL de la imagen debe ser diferente cada vez que se carga, y aquí es donde el Cache Buster resulta útil. El parámetro de consulta de Cache Busting (gtmcb) es una función que genera una cadena de números cada vez que se activa una etiqueta de imagen personalizada y la añade como un parámetro de consulta a la URL de la imagen, por ejemplo: https://www.pixelreceiver.com/track?parametro1=usa&gtmcb=1199950751.

Cada vez que se llama a gtmcb, devuelve un valor diferente, lo que garantiza que la URL de la imagen siempre sea única, evitando así el almacenamiento en caché del navegador.

En cuanto a la configuración del parámetro gtmcb en la etiqueta de imagen personalizada, lo mejor es dejarlo tal como está, ya que Google Tag Manager reconoce esta función y añade automáticamente el número único a la URL de la imagen.

Cómo probar una etiqueta de imagen personalizada

Probar una etiqueta de imagen personalizada presenta algunos matices. El modo de vista previa y depuración de Google Tag Manager es una herramienta fantástica para identificar problemas antes de desplegar etiquetas en el entorno en vivo. Sin embargo, esto requiere JavaScript habilitado en tu navegador. Sin JavaScript, no puedes acceder a la vista previa y depuración.

Entonces, ¿cómo puedes probar una etiqueta de imagen personalizada sin JavaScript? Aquí tienes un proceso de dos pasos para depurar la etiqueta de imagen personalizada.

#1. Activar la etiqueta de imagen en todas las páginas

Primero, quiero asegurarme de que he pegado la URL de la imagen correctamente y que gtmcb genera una cadena única de números cada vez que se carga.

1. Agrega el disparador de Todas las páginas a la etiqueta.
2. Activa/actualiza el modo de vista previa y depuración.
3. Refresca el sitio web y verifica si la etiqueta de imagen personalizada se activa.
4. Si es así, dirígete a las Herramientas para desarrolladores del navegador > Red. En Google Chrome, puedes encontrar las herramientas de desarrollador en Menú > Más herramientas > Herramientas de desarrollador.

Una vez allí, aparecerá un panel con varias herramientas en la parte inferior de la pantalla. Haz clic en la pestaña de Red y luego recarga la página. Verás varias líneas en esta tabla, cada una representando una solicitud, donde podrás observar su tamaño, tiempo de carga, etc.

En este caso, nos interesa nuestra etiqueta de imagen personalizada. Recuerda cuál fue la URL de imagen que ingresaste en GTM, por ejemplo: https://www.facebook.com/tr?id=423329234239&ev=PageView&noscript=1. Así que utiliza el filtro para encontrar esa solicitud.

Verás que gtmcb es igual a una cadena de números aleatorios. La URL de la imagen también incluirá un ID de píxel y un nombre de evento (que he difuminado por razones de privacidad). Este primer paso de la prueba está completo; hemos verificado que la etiqueta de imagen personalizada se activa y transmite datos al servidor externo (en este caso, a Facebook).

A continuación, elimina el disparador de Todas las páginas y asegúrate de que solo esté vinculado el disparador Pageview – Todas las páginas – JavaScript deshabilitado a la etiqueta de imagen personalizada. El disparador Todas las páginas se utilizó solo para pruebas y depuración.

Publica todos los cambios en el entorno en vivo.

#2. Pruebas en el entorno en vivo

Ahora, vamos a realizar algunas pruebas en el entorno real.

1. Deshabilita JavaScript en tu navegador. No incluiré instrucciones específicas, ya que cada navegador tiene menús diferentes. Solo busca en Google cómo hacerlo.
2. Una vez hecho esto, abre la pestaña de Red en las herramientas de desarrollador.
3. Utiliza el filtro para encontrar la URL de imagen que usaste en la etiqueta (simplemente comienza a escribir la URL y rápidamente encontrarás lo que buscas).
4. Si no hay errores relacionados con la solicitud, eso es una buena señal. También puedes comprobar si el Facebook Pixel Helper reporta una transmisión de datos exitosa.

Casos de uso de la etiqueta de imagen personalizada

Un primer ejemplo que se me ocurre es el uso del píxel de Facebook. Este se compone de dos partes: un <script> y un <noscript>. La primera parte solo funcionará cuando JavaScript esté habilitado en el navegador, mientras que la segunda rastrea únicamente a aquellos usuarios que tienen JavaScript desactivado.

Si deseas rastrear a esa pequeña fracción de usuarios que no tienen JavaScript, deberás implementar esto por separado mediante una etiqueta de imagen personalizada en Google Tag Manager. He publicado una guía detallada sobre cómo lograrlo.

Otro caso de uso sería enviar datos de interacción a Active Campaign. Se ha publicado un tutorial en video sobre este tema. En resumen, debes activar etiquetas de imagen cada vez que un usuario interactúe con tu sitio web o aplicación web (al hacer clic en algo, ver contenido, etc.). Cada vez que se carga la imagen, se enviarán varios parámetros a los servidores de Active Campaign, lo que te permitirá segmentar contactos según las acciones realizadas y enviar correos electrónicos personalizados.

No te limites solo a estos dos ejemplos. Hay muchas más posibilidades. También puedes enviar eventos de vista de página a Google Analytics mediante una etiqueta de imagen personalizada, pero deberás familiarizarte con el Protocolo de Medición de Google Analytics.

Errores y conceptos erróneos

He notado varios errores y conceptos erróneos entre los usuarios de GTM:

1. La etiqueta de imagen personalizada no está diseñada para añadir imágenes a tu sitio web. He visto situaciones en las que las personas intentan añadir una imagen real al pie de página de su sitio. Aunque se llama etiqueta de imagen, su propósito es cargar un pixel diminuto cuyo URL se utiliza para transmitir datos. Si deseas añadir una imagen o fotografía a tu sitio, utiliza un sistema de gestión de contenido o pide a un desarrollador que lo haga.
2. La etiqueta de imagen personalizada solo puede utilizarse cuando JavaScript está deshabilitado. Esto no es del todo cierto. También puedes activar etiquetas de imagen para usuarios que tienen JavaScript habilitado. El ejemplo mencionado anteriormente sobre Active Campaign explica cómo rastrear a todos los visitantes y enviar los eventos correspondientes mediante la etiqueta de imagen personalizada.