Google Tag Manager (GTM) es una herramienta vital que permite gestionar etiquetas de seguimiento de manera sencilla y eficiente. Sin embargo, dentro de sus muchas capacidades, hay variables que son fundamentales pero que a menudo pasan desapercibidas. Una de ellas es la variable Click Element, la cual se convierte en un recurso poderoso para aquellos que buscan optimizar su análisis de datos.
En este artículo, exploraremos a fondo la variable Click Element, cómo configurarla y utilizarla en Google Tag Manager, así como su relación con otros elementos y variables que pueden enriquecer tu trabajo analítico.
¿Qué es la variable Click Element en Google Tag Manager?
La variable Click Element en Google Tag Manager es una herramienta que permite capturar el elemento HTML que fue clicado por el usuario. Esta variable está deshabilitada por defecto en todos los nuevos contenedores de GTM, por lo que es necesario activarla manualmente desde la sección de variables integradas. Para ello, dirígete a Variables > Configurar y marca la casilla correspondiente a Click Element.
Sin embargo, activar esta variable por sí sola no la hará funcional en el modo de vista previa y depuración. Es esencial que también habilites al menos un disparador, ya sea “Solo enlaces” o “Todos los clics en elementos”. Este proceso es crucial para que la variable recoja datos correctamente. Si no estás familiarizado con esta configuración, te recomiendo que consultes la guía sobre el seguimiento de clics con Google Tag Manager.
Cuando uses la variable Click Element, esta no solo te dará la dirección del enlace clicado, sino que también te proporcionará atributos y otros datos que pueden ser cruciales para tu análisis. Esto te permite obtener información más detallada sobre las interacciones del usuario con tu sitio web.
¿De dónde proviene la información de Click Element?
La información que proporciona la variable Click Element proviene de los oyentes de eventos automáticos predeterminados de Google Tag Manager. Cuando habilitas un disparador como “Solo enlaces”, “Todos los clics en elementos”, “Envío de formularios” o “Visibilidad de elementos”, este activa un oyente de eventos que comienza a escuchar interacciones específicas en la página.
Solo enlaces: Escucha los clics en enlaces.
Todos los clics en elementos: Escucha los clics en cualquier elemento de la página (excluyendo iFrames).
Envío de formularios: Escucha cuando se envían formularios.
Visibilidad de elementos: Escucha cuando un elemento específico aparece en la pantalla.
Dentro del modo de vista previa y depuración de GTM, podrás observar cómo se envían estos datos a medida que se producen interacciones en la página. Estos elementos son esenciales ya que permiten acceder a información más detallada sobre lo que los usuarios están haciendo en tu sitio web.
Click Element y sus alternativas en Google Tag Manager
Además de la variable Click Element, existe otra variable integrada en GTM que tiene un propósito similar: la Form Element. Ambas variables acceden a la misma clave gtm.element en el Data Layer. Esto significa que, al igual que Click Element, la variable Form Element puede proporcionar datos sobre el elemento que ha sido clicado o enviado en un formulario.
gtm.elementTarget es accesible tanto para Click Target como para Form Target.
gtm.elementUrl se puede acceder a través de Click URL y Form URL.
gtm.elementClasses es accesible mediante Click Classes y Form Classes.
gtm.elementId puede ser accedido a través de Click ID y Form ID.
gtm.element puede ser accedido desde Click Element y Form Element.
Esta similitud en el acceso a las claves del Data Layer facilita la comprensión y el uso de GTM para los principiantes, al ofrecer una estructura lógica que se aplica tanto para los clics como para los envíos de formularios.
¿Por qué deberías utilizar la variable Click Element?
La variable Click Element es especialmente útil cuando necesitas trabajar con el elemento real con el cual un usuario ha interactuado. Uno de los casos más comunes es su uso junto con los selectores CSS para rastrear elementos específicos en una página que no tienen identificadores únicos.
¿Qué son los selectores CSS? Los selectores CSS son patrones que permiten seleccionar elementos en una página web. Por ejemplo, si quisieras rastrear clics en elementos con la clase «botón-blanco» que se encuentran dentro de un widget específico, la variable Click Classes por sí sola podría no ser suficiente.
Al combinar la variable Click Element con un operador de Coincide con el selector CSS, puedes lograr rastrear clics en esos elementos específicos sin necesidad de tener identificadores únicos.
Si eres nuevo en Google Tag Manager y no has trabajado con selectores CSS, es recomendable que te familiarices primero con conceptos fundamentales como:
Ejemplo: Click Element y Coincide con el Selector CSS
Imagina que trabajas en un sitio de comercio electrónico y deseas rastrear los clics en el botón Añadir al carrito. Si el botón no tiene un enlace (por lo que el disparador “Solo enlaces” no funcionará), deberás recurrir a “Todos los clics en elementos”. Sin embargo, si el botón se compone de varios elementos, como texto e imagen de fondo, la configuración puede complicarse.
En este caso, podrías usar un selector CSS para rastrear clics en el botón. Por ejemplo, el botón puede tener un ID llamado AñadirAlCarrito, y el texto del botón podría estar dentro de un elemento hijo. Utilizando un selector CSS, puedes indicar a GTM que deseas rastrear clics tanto en el botón como en todos sus descendientes.
Para ello, en GTM, dirígete a Disparadores > Nuevo > Clics > Todos los elementos y configura el selector CSS como #AñadirAlCarrito para capturar clics en ese elemento y sus hijos. Esto simplifica la implementación y evita la necesidad de crear múltiples disparadores para cada elemento.
Otro caso en el que la variable Click Element es útil
La variable Click Element resulta especialmente valiosa cuando se trabaja con el elemento real, en lugar de sus atributos. Un ejemplo interesante es el que comparte Simo Ahava, donde muestra cómo capturar el elemento correcto en Google Tag Manager utilizando esta variable en un código JavaScript personalizado.
Con esta técnica, se puede utilizar la variable {{Click Element}} para encontrar el elemento más cercano que coincida con un selector CSS específico. Aunque es una técnica avanzada, es probable que en algún momento necesites utilizar este conocimiento en tu trabajo.
Explorando el objeto gtm.element
El objeto gtm.element contiene datos valiosos que se almacenan cuando se produce un clic. A pesar de que el modo de vista previa y depuración de GTM no muestra toda esta información, puedes acceder a ella a través de las herramientas de desarrollo de tu navegador.
Para hacerlo, asegúrate de haber habilitado al menos un disparador de “Todos los clics en elementos” en la página. Luego, haz clic en cualquier elemento para que aparezca el evento Click en la consola de depuración de GTM. Si no aparece, actualiza el modo de vista previa y verifica que tu disparador esté habilitado.
Una vez que veas el evento Click, abre la consola del navegador y escribe dataLayer. Luego, expande el evento gtm.click para descubrir más sobre la información que se ha empujado a la capa de datos.
Dentro de este objeto, encontrarás varias claves como gtm.elementClasses, gtm.elementId, entre otras. Sin embargo, la clave más interesante es gtm.element, que puede contener datos adicionales como parentElement y className, lo que te permitirá acceder a información más detallada sobre el elemento clicado.
Conclusiones clave sobre la variable Click Element
Al final, la variable Click Element en Google Tag Manager es una herramienta poderosa que, aunque puede parecer simple a primera vista, ofrece un gran potencial para aquellos que buscan profundizar en el análisis de datos de su sitio web. Aquí algunos puntos clave a recordar:
La variable Click Element accede a gtm.element en el Data Layer.
A diferencia de otras variables integradas, Click Element devuelve un objeto con información detallada.
Click Element y Form Element son variables paralelas que acceden a la misma clave.
Puedes crear tus propias variables del Data Layer para acceder a gtm.element.
Click Element es la única variable que admite el operador Coincide con el selector CSS en los disparadores.
Utiliza las herramientas del desarrollador del navegador para explorar el objeto gtm.element y acceder a datos adicionales.
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional
Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
