Rastrea la visibilidad de elementos por texto en Google Tag Manager

La capacidad de rastrear elementos en una página web es crucial para entender cómo los usuarios interactúan con nuestro contenido. Uno de los métodos más interesantes para lograr esto es a través de Google Tag Manager (GTM), específicamente con el uso del disparador de visibilidad de elementos. Este disparador permite capturar datos sobre cuándo un elemento en particular aparece en la pantalla del usuario. Aunque la idea parece sencilla, existen matices y consideraciones que vale la pena explorar a fondo para maximizar su efectividad.

Hoy te llevaré a un recorrido por las distintas formas en las que puedes implementar el rastreo de visibilidad basándote en el texto de los elementos, un enfoque que, aunque no es el más recomendado, puede ofrecerte valiosas lecciones sobre las limitaciones y capacidades de GTM. Acompáñame mientras desglosamos este método y exploramos alternativas más robustas.

¿Qué es el disparador de visibilidad de elementos?

El disparador de visibilidad de elementos en Google Tag Manager permite a los usuarios rastrear cuándo un elemento específico se vuelve visible en la pantalla. Este es un avance significativo en comparación con métodos anteriores que dependían exclusivamente de clics o interacciones directas.

La importancia de esta herramienta radica en que permite medir la efectividad de los elementos visuales, como botones o banners, que pueden no ser siempre clicados, pero que son fundamentales para la experiencia del usuario. Sin embargo, se debe tener cuidado al establecer las condiciones del disparador.

Cómo rastrear elementos basados en su texto

A menudo, el método convencional para rastrear elementos es utilizando identificadores (ID) o selectores CSS. Sin embargo, muchas veces, los elementos no tienen un ID único disponible, lo que lleva a los usuarios a preguntarse si es posible rastrear en función del texto que se muestra en el elemento. La respuesta es sí, aunque con ciertas advertencias.

La principal complicación de este enfoque es su fragilidad: si el texto cambia, el disparador dejará de funcionar. Esto puede suceder por varias razones, como traducciones automáticas, cambios en el contenido por parte de un desarrollador o incluso pruebas A/B. Por lo tanto, es recomendable proceder con cautela.

Uso de selectores CSS en el disparador de visibilidad

Si decides seguir adelante con el rastreo basado en texto, primero deberás seleccionar el método de selección. Esto puede ser a través de un ID, si está disponible, o mediante un selector CSS. Este último puede resultar complicado para principiantes, pero dominarlo ampliará tus capacidades en GTM.

Una vez que tengas un selector CSS, podrás crear reglas más complejas para definir qué elementos específicos deseas rastrear. Un recurso útil es el artículo de Simo Ahava sobre selectores CSS, que proporciona ejemplos prácticos y casos de uso comunes.

Ejemplo práctico de rastreo de visibilidad

Imaginemos que en la página principal de tu sitio web hay varios botones con el mismo diseño, pero solo deseas rastrear uno específico que tiene el texto «APRENDER MÁS SOBRE ESTE CURSO». Aunque podrías usar un selector CSS más específico, aquí exploraremos cómo hacerlo basándote en el texto.

Primero, deberás inspeccionar el botón y observar que el texto está contenido dentro de un elemento <span>, que a su vez es hijo de un enlace <a> con clases específicas. Por lo tanto, tu selector CSS podría verse algo así como a.btn-bt.align-left > span.

Es crucial verificar que este selector no capture elementos no deseados. Puedes hacer esto en la consola del desarrollador de tu navegador utilizando el siguiente comando:

document.querySelectorAll("a.btn-bt.align-left > span")

Este comando devolverá todos los elementos que coincidan con el selector, permitiéndote confirmar que el texto es el correcto antes de establecer el rastreo.

Variables de clic en el disparador de visibilidad

Un aspecto interesante del disparador de visibilidad es que, a pesar de que está diseñado para rastrear impresiones de elementos, comparte similitudes con los disparadores de clic. Cuando el disparador detecta el elemento correcto, se envía información al Data Layer.

Sin embargo, hay que tener en cuenta que no existe una variable gtm.elementText en el Data Layer, lo que puede generar confusión. En su lugar, las variables de autoevento pueden ser utilizadas para obtener el valor del texto del elemento que se está visualizando.

Esto significa que, aunque el disparador de visibilidad no está directamente relacionado con los eventos de clic, ambos utilizan información similar sobre el elemento, lo que permite una mayor flexibilidad en el análisis de datos.

Prueba del disparador de visibilidad

Una vez que hayas configurado tu disparador de visibilidad, es esencial probarlo. Utiliza el modo de vista previa de GTM para verificar que el evento gtm.elementVisibility se active correctamente cuando el elemento deseado aparece en la pantalla. Asegúrate de desplazarte por la página y observar si el disparador se activa conforme a las condiciones que has definido.

Si no se disparan las etiquetas, verifica que todas las condiciones se cumplan, como el texto exacto del clic. Recuerda que el texto es sensible a mayúsculas y minúsculas, así que cualquier discrepancia puede causar que no se active el disparador.

Alternativas más robustas para rastrear elementos

Si bien el rastreo de visibilidad basado en texto es posible, no es el enfoque más fiable. Aquí hay algunas alternativas más efectivas:

• Agregar IDs únicos: Solicita a un desarrollador que asigne IDs a los elementos importantes, lo que facilitará su rastreo.
• Añadir atributos personalizados: Considera la posibilidad de utilizar atributos data-* para identificar elementos, lo que proporcionará un control más preciso.
• Utilizar selectores CSS sin depender del texto: Aunque menos robusto que las dos opciones anteriores, es preferible a depender del texto, ya que es menos propenso a cambios.

Reflexiones finales sobre el rastreo de visibilidad de elementos

En conclusión, aunque el rastreo de visibilidad basado en el texto de los elementos es factible, es aconsejable considerarlo como una última opción. La fragilidad de este método, debido a la posibilidad de cambios en el contenido, lo hace menos eficiente. En su lugar, invertir tiempo en aprender sobre selectores CSS y trabajar con desarrolladores para implementar métodos más estables puede ofrecer resultados más coherentes y duraderos.

Así que si quieres optimizar tu uso de Google Tag Manager, comienza a explorar las capacidades de los selectores CSS y cómo pueden mejorar tu rastreo de interacciones en la página. Este conocimiento no solo enriquecerá tus habilidades, sino que también potenciará la efectividad de tu análisis de datos.