Click Element en GTM: una variable muy útil

He aquí una de las variables de clic integradas en Google Tag Manager que, a simple vista, puede parecer poco útil.

Sobre todo, si la has intentado usar en base al modo de vista previa de GTM y no te ha funcionado.

Es normal, ya que este modo puede mostrar ciertos errores de concepto que inducen a error si no te documentas bien.

Por eso en este artículo quiero hablar un poquito más de esta variable, que puede sacarnos de un apuro en más de una ocasión.

Eso sí, aunque hay una parte un pelín más técnica -la que tiene que ver con los selectores CSS- no voy a entrar en las opciones más avanzadas que permite la funcionalidad, sino simplemente en los casos de uso más habituales en los que le he encontrado aplicación.

Pero empecemos por el principio.

Qué es la variable Click Element en GTM: Definición

Pues es una variable que nos devuelve el elemento que un usuario clica al navegar por la web.

Es probable que sólo viendo el nombre ya te lo hubieras imaginado, pero por confirmar.

Esta variable aparece cuando un determinado auto-listener de GTM está activo, que no siempre lo está. De hecho, cuando empezamos con un contenedor nuevo no lo está, pero tranquilo que ahora verás que activarlo es extremadamente sencillo.

Bien, pues cuando este listener está activo y un usuario hace clic en algún enlace o elemento de nuestra web, se envía información relativa a dicho clic al Data Layer. En concreto, estos valores:

• gtm.element
• gtm.elementClasses
• gtm.elementTarget
• gtm.elementUrl
• gtm.elementId

Puedes comprobarlo con la vista previa:

Lo bueno de esto que puedes acceder a cualquiera de ellos mediante variables predefinidas en GTM, como ahora te explico.

Un apunte más, estos valores son todos cadenas de texto, excepto gtm.element, que es un objeto.

El tema es que, como te decía en la introducción, cuando observamos sus propiedades en la vista previa, podemos encontrarnos -en ocasiones- con algo así:

Y no, pese a lo que ves ahí no es una cadena, sino un objeto.

Un objeto que devuelve todos los atributos del elemento, como puedan ser:

• Href: la URL (si es un enlace, si es otro elemento no)
• Title
• Texto del elemento

Que no son mostrados por la vista previa pero sí accesibles si lo necesitáramos.

Bien, no sé si con lo explicado hasta ahora ya te haces una idea de las posibilidades que tiene esta variable, pero por si acaso todavía no, te cuento alguno.

Principales casos de uso

A día de hoy, hay dos escenarios principales donde Click Element me ha sido muy útil:

El primero es cuando quieres medir los clics de uno o varios elementos de tu web que no tienen ningún Id o ninguna clase.

Éste es el uso más evidente y el que voy a desarrollar a modo de ejemplo en este artículo.

El segundo es cuando necesitas medir el clic en algún elemento que contenga varios subelementos.

Piensa en el botón de añadir al carro en un ecommerce, donde es muy habitual tener un div que envuelva a un span con el icono y a otro span con el texto del botón.

Y claro, a ti lo que te interesa es medir el clic cuando el usuario pulse en cualquiera de ellos.

Sin entrar a tanto detalle como en el caso anterior, luego te explico cómo.

Cómo utilizar la variable

Ahora que sabemos en qué consiste, te voy a aclarar cómo activar esta variable para que puedas empezar a usarla.

Activación de la variable

Lo primero es activarla en GTM.

Para ello, vas a Variables > Variables integradas y la activas. Y de paso activas todas las demás de Clic también, ya que son bastante útiles:

Sólo con esto no vale, puesto que el listener del que hablábamos al principio estará en off.

Activación del listener

Pero vamos, que ponerlo en marcha es tan sencillo como crear un activador de clic en enlace o clic en cualquier elemento:

Solamente con crearlo el listener empezará a funcionar.

Y para comprobarlo basta con:

1. Activar el modo de vista previa.
2. Ir a la web.
3. Hacer clic en cualquier enlace o en cualquier elemento según el activador que hayamos creado.

Una vez hecho esto, podrás ver la variable funcionando como en la imagen del principio:

Bien, pues ahora que te he contado toda la teoría, empecemos con la práctica.

Usando la variable Click Element de GTM

Aquí tienes cómo aplicar la variable a los dos casos de uso que te mencionaba al principio.

#1. Enlaces del menú sin ID ni Class

Dime si esto no es habitual: quieres traquear cuantos clics se producen en uno o varios elementos de tu web y cuando vas a hacerlo te das cuenta que no tienen ni Id ni ninguna clase que puedas aprovechar.

Y sí, podrías pedir a IT que te los añadiera y esperar.

O podrías utilizar Click Element hoy mismo.

Entonces, si te decides por esta segunda vía, aquí tienes un ejemplo de cómo podrías hacerlo.

1. Seleccionar el atributo CSS correcto para el activador

Doy por hecho que ya tienes activadas las variables predefinidas de Clic de GTM y que has creado al menos un activador de Click Element o Click Link.

Si es así, lo primero que vamos a hacer es averiguar selector CSS del elemento cuyo clic queremos traquear.

Tienes distintas opciones. Aquí te dejo un par.

1.1 Averiguar el selector CSS mediante el inspeccionador de elementos de Chrome

Para utilizar este método es recomendable tener unas mínimas nociones de CSS y HTML.

Bueno, en realidad, para la analítica digital en general es recomendable tener estos conocimientos, así que, cuanto antes los incorpores, mejor.

Dicho esto, el sistema es sencillo:

1. Clic con el botón derecho del ratón sobre el elemento del menú que queremos traquear.
2. Seleccionamos «Inspeccionar elemento» en el menú contextual de Chrome para que se abra el Inspeccionador.
3. Pulsamos el botón derecho sobre la etiqueta HTML correspondiente (será una etiqueta «a») y seleccionamos «Copiar selector».

Ala, ya está todo hecho.

1.2 Averiguar el selector CSS mediante extensión de Chrome

Si no tienes ningún bagaje técnico y te lías con la solución anterior, puedes utilizar esta extensión de Chrome (clic en la imagen para descargarla):

Que te puede ayudar a seleccionar aquellos elementos que te interesan:

Es una extensión freemium, con planes de pago y que requiere registro con Google, por lo que yo personalmente prefiero el método anterior, pero que si no tienes ni idea de HTML te puede ayudar.

1.3 Probar

Hayas seguido cualquiera de los dos métodos, es interesante comprobar que tenemos seleccionado lo que nos interesa.

Y sólo lo que nos interesa.

Para revisarlo, añado una clase en el inspeccionador de elementos con lo que tengo copiado pulsando en el icono de «+» de la derecha así:

Puede ser una como color: red !important o algo similar como background: red !important.

Algo llamativo que al revisar la web destaque mucho y me indique lo que he seleccionado. Así veo si he seleccionado lo que quiero y sólo lo que quiero.

En este caso, veo que con mi selector sólo se selecciona uno de los tres enlaces del menú, por lo que tendré que toquetear ligeramente el selector para recoger los tres.

Aquí no hay trucos, así que, quizá sea buen momento para adquirir esas nociones de CSS si no las tienes…

En mi caso, paso de:

#footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > li:nth-child(1) > a

A:

footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > a

Es decir, he eliminado la referencia al primer elemento del listado, con lo que al probar tengo esto:

Que me indica que es el selector que estoy buscando y puedo seguir adelante.

Importante: este selector es muy poco óptimo. Se podría pulir y hacerlo muchísimo más simple, pero quería mostrar que conseguir uno que funcione no es tan complicado, aunque sólo tengas ligerísimos conocimientos de HTML.

2. Crear activador

Con el selector correcto copiado, abrimos GTM y vamos a Activadores > Nuevo y me creo uno tal que así:

Explicación de cada campo:

• Nombre: al ser de tipo Link Click, yo comienzo siempre con «LC -«.
• Se activa en: «Algunos clics en enlaces». Lógico, queremos que salte cuando un usuario clique solamente en los enlaces del menú del footer.
• Variable: Click Element, que es de la que estamos hablando.
• Macheo: es interesante que sepas que el tipo «coincide con CSS selector» solamente nos aparecerá con esta variable integrada o con la de «Form Element». Con ninguna otra de las predefinidas.
• Valor: pego la cadena de texto que he copiado y probado en el paso anterior.

Guardamos.

3. Crear la etiqueta de GTM

En este caso, como lo que queremos es traquear un evento de clic, nos vamos a Etiqueta > Nueva y seleccionamos una de «Evento de GA4».

La configuramos así:

Te la explico:

Etiqueta de configuración de GA4: selecciono la general, en la que tengo el Id de seguimiento. Si por algún casual no la tuvieras (¿qué haces mirando Click Element entonces?) créala antes de nada.

Nombre de evento: el que verás en tu GA4. El único consejo que te puedo dar aquí es que cuides la nomenclatura y vaya acorde con el resto de tu cuadro de eventos.

Parámetros: importante este punto. Yo añado el «link text» porque es la forma en que voy a distinguir los clics en cada uno de los enlaces del menú.

Si no lo añadiera, tendría un evento que sumaría los clics en cada uno de los enlaces del menú, pero no podría segmentar y ver las cantidades de cada uno de ellos.

Eso sí, recuerda crearte la dimensión personalizada correspondiente en GA4 si quieres explotar el dato en los informes:

Activador: elegimos el que nos acabamos de crear:

Una vez guardada la etiqueta, sólo nos falta comprobar que funciona como esperamos.

4. Testeo

Tenemos que asegurarnos que todo funciona bien tanto a nivel de GTM como a nivel de Analytics, así que revisaremos ambos.

Vista previa de GTM

Activamos el modo de vista previa, vamos a la web y clicamos en los enlaces.

Si todo ha ido bien veremos que la etiqueta salta cuando debe:

Importante: es posible que veas dos eventos de Link Click en la vista previa por cada clic que realices en los enlaces, como me pasa a mí:

Esto se debe muy probablemente a que, como yo, tienes activado el tracking de clics salientes en la medición mejorada de GA4.

Realmente no supone ningún problema, ya que la etiqueta sólo salta en uno de los clics gemelos y, por tanto, solamente se envía un evento a Analytics, que es lo correcto.

Aquí puedes ver cómo no salta en la otra:

Dejamos temporalmente GTM.

DebugView en GA4

Abrimos nuestra propiedad de GA4 y nos vamos a Administración > DebugView.

Y volvemos a clicar en los elementos de la web que quiero traquear.

Entonces, deberíamos ver algo así:

Que nos indica que estamos recogiendo los eventos correctamente.

Para verificar que el parámetro se está mandando, clicamos en el evento y luego en el parámetro correspondiente. Se desplegará su valor:

Parece que todo correcto, pero recuerda: si no tienes una dimensión personalizada recogiendo el valor de ese parámetro no podrás ver sus datos en los informes, por mucho que esta vista los muestre.

¿Entendido?

Pues ya sólo nos faltaría publicar el contenedor de GTM para empezar a recoger los clics de los usuarios.

#2. Clic en elementos agrupados

Vamos con el segundo caso de uso más habitual.

Mira este ejemplo de botón de añadir al carro:

Éste es su código HTML:

Como se puede ver, la estructura es un button que agrupa dos i con el icono y el texto.

Si activo la vista previa de GTM y hago clic en el botón, según donde clique exactamente, obtendré esto (si clico en el icono):

O esto (si clico en el texto):

Que aunque no lo puedas leer, se ve que es diferente.

Pero claro, yo quiero traquear los clics en cualquiera de los elementos de componen el botón como uno solo.

Entonces tengo dos soluciones:

• La fácil: crearme en GTM tres reglas con tres eventos y tres activadores diferentes, uno para cada elemento.
• La buena: utilizar Click Element y un activador tal que así:

Al elegir «Coincide con el selector CSS» y meter como valor el selector:

• La clase del botón («.add-to-cart»).
• Y la de sus nodos hijos («.add-to-cart *»).

Los clics en cualquier parte del botón (icono, texto) también se recogerán.

Ésta es buena, ¿verdad?

Si, peeeeero…

Recomendaciones

Utilizar activadores con selectores CSS tiene su riesgo.

Sobre todo, si tú no manejas el código de la web.

¿El motivo?

Sencillo, en cualquier momento el equipo de desarrollo puede hacer un cambio en el código que haga que tu selector deje de recoger el elemento que quieres. Esto es más probable que ocurra en webs que están continuamente actualizándose.

En menor medida, pero también te puede ocurrir con una actualización del tema o de algún plugin en tu CMS.

¿Entonces no es útil Click Element con esta configuración?

Para nada, es muy útil, pero quiero que seas consciente de su principal hándicap.

Por otro lado, y para los más techies, que sepas que la consola de desarrolladores te aporta bastante más información sobre esta variable de tipo objeto.

Para verlas, no tienes más que abrir la consola y escribir «dataLayer»:

Ahora navegas hasta el elemento y despliegas todos los valores:

La imagen te muestra sólo unos pocos, pero son un montón.

A partir de aquí ya es cosa tuya y de JavaScript acceder a unas cuantas posibilidades más, como ver el nodo padre:

Y obtener su clase del nodo padre con gtm.element.parentElement.className mediante una variable de capa de datos de GTM:

O también usar gtm.element.firstChild.id para acceder al Id del primer nodo hijo siguiendo el mismo procedimiento.

Conclusión

Click Element es, probablemente, la variable de clic predefinida más potente en GTM.

También es la más difícil de utilizar bien de primeras.

Pero merece la pena, puesto que en ciertos escenarios nos salvará la vida.

Bueno, quizá es un poco exagerada esa afirmación, pero por lo menos nos ahorrará tiempo.

Espero que con estas pequeñas nociones seas capaz de sacarle partido en tus proyectos.