El elemento de clic «contiene» no funciona en Google Tag Manager

Si alguna vez has configurado un trigger utilizando el Click element en Google Tag Manager (GTM) y, al probar tu etiqueta, te diste cuenta de que no estaba funcionando, es posible que te sientas frustrado. Has revisado todos los pasos y aún así no logras que funcione. Antes de que entres en pánico, permíteme plantearte una pregunta: ¿utilizaste la condición Click element “contains” en tu trigger?

Puede que hayamos encontrado la raíz del problema. Profundicemos en este tema!

Tutorial en video

Si prefieres aprender visualmente, aquí tienes un tutorial de mi canal de Youtube, donde explico todo sobre el uso del Click element en Google Tag Manager.

Comprendiendo el Click Element en GTM

El trigger de Click element en GTM es una herramienta poderosa que permite activar etiquetas cuando los usuarios interactúan con elementos específicos en tu sitio web, como botones o enlaces. Esta funcionalidad se vuelve crucial para el seguimiento de eventos y conversiones.

Sin embargo, algo que a menudo se pasa por alto es que el Click element (referido como gtm.element en el modo de vista previa) no es simplemente una cadena de texto; en realidad, es un objeto. Esto puede resultar confuso al principio, pero es fundamental para entender cómo funciona GTM.

Para aclarar, una cadena es una secuencia de caracteres, como «Hola mundo», mientras que un objeto es un contenedor que puede contener múltiples datos, incluyendo cadenas y números. Por ejemplo:

const myString = "Hola mundo!" // cadena
const items = {item_id: 123, item_name: "camiseta"} // objeto

Limitaciones de Click Element en GTM

Cuando trabajas con el Click element, es importante notar que solo puedes utilizar dos operadores de trigger que incluyan el término “CSS selector”, es decir, “matches CSS selector” o “does not match CSS selector”. Este es uno de esos detalles peculiares de Google Tag Manager que hay que tener en cuenta.

Los selectores CSS permiten aplicar estilos a partes específicas de tu sitio web al identificarlas mediante patrones basados en su tipo, clase, ID o atributos. En esencia, los selectores CSS dictan cómo debe lucir tu sitio, y es fundamental inspeccionar los elementos que deseas utilizar como triggers.

¿Cómo utilizar selectores CSS en GTM?

Para aplicar un selector CSS en GTM, primero necesitas identificar el elemento que deseas rastrear. Esto puede lograrse a través de las herramientas de desarrollo de tu navegador.

A continuación, te presento algunos ejemplos que te ayudarán a entender cómo implementar selectores CSS en tus triggers:

Ejemplo 1: Rastreo de clics en un botón específico

Supón que deseas rastrear clics en un botón con un nombre de clase específico, como el botón Inscribirse.

La configuración de tu trigger se vería de la siguiente manera:

• Selector CSS: “.signup-button” (el punto indica un selector de clase)
• Configuración del trigger:
  • Tipo de trigger: Clic – Todos los elementos
  • Este trigger se activa en: Algunos clics
  • Condiciones: Click Element matches CSS selector “.signup-button”

Ejemplo 2: Rastreo de clics en todos los botones excepto uno específico

Si deseas rastrear todos los clics en botones, pero tienes un botón que recibe demasiados clics y sabes que distorsionará tus recuentos de eventos, puedes configurar un trigger que excluya ese botón.

Por ejemplo, si el botón tiene un ID de AddToCart, la configuración sería la siguiente:

• Selector CSS: “#AddToCart” (el símbolo # denota un selector de ID)
• Configuración del trigger:
  • Tipo de trigger: Clic – Todos los elementos
  • Este trigger se activa en: Algunos clics
  • Condiciones: Click Element does not match CSS selector “#AddToCart”

Ejemplo 3: Rastreo de clics en un atributo compartido

Imagina que todos los elementos del menú en tu sitio tienen un atributo común, como “data_attribute=menu”. La configuración de este trigger sería:

• Selector CSS: [data-attribute=»menu»] (los corchetes indican un selector de atributo)
• Configuración del trigger:
  • Tipo de trigger: Clic – Todos los elementos
  • Este trigger se activa en: Algunos clics
  • Condiciones: Click Element matches CSS selector “[data-attribute=»menu»]”

Problemas comunes con Click Element en Google Tag Manager

Uno de los errores más comunes al utilizar el Click element es asumir que puedes usar condiciones como «contains» para los triggers. Sin embargo, como mencionamos anteriormente, el Click element es un objeto y requiere condiciones específicas basadas en selectores CSS.

Es crucial entender que si tu trigger no está funcionando como esperabas, es probable que la solución sea tan simple como ajustar la condición del trigger a «matches CSS selector».

También es recomendable probar tus configuraciones en el modo de vista previa de GTM, donde puedes ver en tiempo real cómo se activan los triggers y qué datos se están enviando.

Recursos útiles para profundizar en Google Tag Manager

Antes de finalizar, aquí te dejo algunos recursos que te serán de gran ayuda para adentrarte más en el mundo de GTM y los selectores CSS:

• ¿Quieres aprender más sobre el Click element en general? Consulta este artículo más completo.
• Si eres nuevo en el uso de selectores CSS, te recomiendo ver este video, que cubre los conceptos básicos de los diferentes tipos de selectores CSS y su aplicación.
• Visita la lección de W3 School sobre selectores CSS si necesitas un recurso interactivo rápido.
• Finalmente, si buscas una lección integral no solo sobre selectores CSS, sino sobre todo Google Tag Manager, explora mi curso intermedio/avanzado de GTM!