• Ir a navegación principal
  • Ir al contenido principal
Negocio digital Yago González

Yago González

Negocio Digital

  • Aprende conmigo
    • Curso Ecommerce
    • Docencia y Empresas
  • Consultoría
    • Ecommerce
    • Analítica Digital
    • SEO
  • Algo más de mí
    • Quién soy
    • Apariciones y menciones en medios, eventos y congresos
  • Artículos

Click Element en GTM: una variable muy útil

28 abril, 2023 by Yago González Dejar un comentario

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.


Índice de contenidos

  • 1 Qué es la variable Click Element en GTM: Definición
    • 1.1 Principales casos de uso
  • 2 Cómo utilizar la variable
    • 2.1 Activación de la variable
    • 2.2 Activación del listener
  • 3 Usando la variable Click Element de GTM
    • 3.1 #1. Enlaces del menú sin ID ni Class
      • 3.1.1 1. Seleccionar el atributo CSS correcto para el activador
      • 3.1.2 2. Crear activador
      • 3.1.3 3. Crear la etiqueta de GTM
      • 3.1.4 4. Testeo
    • 3.2 #2. Clic en elementos agrupados
  • 4 Recomendaciones
  • 5 Conclusión
  • 6 Si te ha gustado el artículo lo mismo esto te interesa...

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:

Variables integradas de clic en la vista previa de GTM

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í:

La vista previa nos indica que es un string, pero en realidad es un objeto

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:

Activamos las variables integradas de Clic

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:

Creamos un activador de Clic

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:

Variable Click Element funcionando

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”.
Copiamos el selector CSS mediante el inspeccionador de elementos

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:

Utilizando la extensión para averiguar el selector

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í:

Selector incorrecto

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:

Selector correcto

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í:

Configuración del activador del evento

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í:

Configuración de la etiqueta de evento de GA4

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:

Creación de la dimensión personalizada que guardará el parámetro en GA4

Activador: elegimos el que nos acabamos de crear:

Selecciono el activador que acabo de crear para la etiqueta de evento

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:

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í:

Doble link click

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:

La etiqueta no salta cuando no debe

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í:

La debugview de GA4 recoge el evento

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:

La debugview de GA4 recoge el parámetro

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:

Ejemplo de botón add to cart con iciono

Éste es su código HTML:

HTML del botón

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):

Click Element del icono

O esto (si clico en el texto):

Click Element del 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í:
Selector del nodo botón y sus hijos

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”:

Escribo dataLayer en la consola para acceder a sus valores

Ahora navegas hasta el elemento y despliegas todos los valores:

Valores de Click Element en el dataLayer

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:

Nodo padre del elemento sobre el que he clicado

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

Recojo la clase del nodo padre del elemento clicado con una variable de dataLayer

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.

Si te ha gustado el artículo lo mismo esto te interesa...

Tengo una newsletter donde explico trucos que descubro, envío material y recursos descargables y doy mi opinión sobre temas de actualidad digital.

Quizá te interese registrarte...

Archivado en:Analítica, Herramientas

Acerca de Yago González

Ayudo a crear nuevos negocios digitales o a mejorar los existentes en yagogonzalez.com

Fundé el ecommerce Yo pongo el hielo y llevo su marketing

Además, compagino la actividad profesional con la docente. Y me encanta.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Copyright © 2023 · Yago González | Política de Cookies · Política de Privacidad · Aviso Legal · Condiciones de Contratación
Negocio Digital Yago Gonzalez GPS Directions Listed in POI Directory

Utilizamos cookies para personalizar el contenido y los anuncios y para analizar el tráfico. Compartimos información sobre la navegación de los usuarios en el sitio web con nuestros partners de publicidad y de análisis web.

Yago González
Powered by  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de analítica

Esta web utiliza Google Analytics y Hotjar para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Cookies publicitarias

Esta web utiliza las siguientes cookies publicitarias de Cookies de Google Analytics y Google Ads

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de privacidad

Más información sobre nuestra política de privacidad