Cómo rastrear clics en acordeones con Google Tag Manager

Los elementos de acordeón son herramientas versátiles que permiten presentar contenido de manera organizada y accesible. A menudo, se utilizan en secciones como preguntas frecuentes (FAQ), donde los usuarios pueden navegar rápidamente por una lista de preguntas y hacer clic en las que les interesen para ver las respuestas. Sin embargo, para maximizar la utilidad de estas interacciones, es fundamental realizar un seguimiento de los clics en los acordeones, lo que nos permite obtener valiosos datos sobre el comportamiento del usuario. En este artículo, profundizaremos en cómo rastrear los clics en acordeones utilizando Google Tag Manager (GTM), ofreciendo ejemplos y explicaciones detalladas para facilitar la implementación.

Antes de sumergirnos en los métodos específicos, es importante mencionar que la forma en que se codifican los acordeones puede variar significativamente. Esto significa que no hay un enfoque único para rastrear sus clics, lo que requiere un entendimiento claro de cómo funcionan en el contexto de tu sitio web. Este artículo proporcionará estrategias y ejemplos que pueden ser adaptados a diferentes implementaciones de acordeones.

La importancia de rastrear los clics en acordeones

Rastrear los clics en los acordeones no solo ayuda a entender qué contenido es más atractivo para los usuarios, sino que también permite optimizar la estructura del sitio web y mejorar la experiencia del usuario. A continuación se presentan algunas razones clave para implementar el seguimiento de clics:

• Identificación de contenido popular: Al saber qué secciones reciben más clics, puedes destacar o mejorar ese contenido.
• Optimización de la navegación: Entender cómo los usuarios interactúan con el acordeón puede ayudarte a hacer ajustes que faciliten una mejor experiencia de navegación.
• Datos para decisiones informadas: La información recopilada puede guiar el desarrollo de contenido futuro y las estrategias de marketing.

¿Qué se va a medir?

El objetivo principal al rastrear los clics en un acordeón es identificar cuáles secciones son las más clicadas. Esto se logra enviando un evento a Google Analytics (GA) cada vez que un usuario interactúa con un elemento del acordeón, específicamente, el texto del clic. A través de este método, obtendremos datos que nos mostrarán el rendimiento de cada sección del acordeón.

Diferentes tipos de acordeones y sus métodos de seguimiento

Dado que existen múltiples maneras de implementar un acordeón, también hay diferentes enfoques para rastrear sus clics. A continuación, exploraremos dos casos comunes que ilustran cómo se puede realizar este seguimiento de manera efectiva:

Caso 1: Solo la etiqueta es clicable

En este escenario, el acordeón está diseñado de tal manera que solo el texto del título es clicable. Si el usuario hace clic en otro lugar, no ocurrirá nada. El enfoque para rastrear estos clics es bastante directo.

1.1 Activar variables relacionadas con clics

Primero, en Google Tag Manager, ve a Variables > Configurar y habilita todas las variables relacionadas con clics. Esto es esencial para que puedas capturar la información adecuada cuando se produzcan los clics en el acordeón.

1.2 Crear un disparador de clic

GTM ofrece dos tipos de disparadores de clic: Solo enlaces y Todos los clics en elementos. Para un acordeón que no utiliza enlaces, elige Todos los clics en elementos. Esto te permitirá rastrear cualquier clic en el acordeón.

1.3 Actualizar el disparador de clic

Una vez creado el disparador, actualiza las condiciones para que se active solo cuando se haga clic en elementos específicos del acordeón. Utiliza la variable Click Classes para filtrar los clics relevantes.

1.4 Crear la etiqueta de Google Analytics

Configura una nueva etiqueta en GTM para enviar eventos a Google Analytics. Asegúrate de incluir el texto del clic, ya que esto te permitirá identificar qué sección del acordeón fue la más popular entre los usuarios.

1.5 Realizar pruebas

Una vez que hayas configurado todo, es crucial probar el sistema. Utiliza el modo de vista previa de GTM para asegurarte de que la etiqueta se active correctamente al hacer clic en el acordeón. Verifica también que los eventos se registren en Google Analytics.

Caso 2: Una fila del acordeón tiene más de un elemento clicable

Este caso es más común, ya que muchas implementaciones de acordeones incluyen íconos o flechas junto al título que también son clicables. Esto complica un poco el seguimiento, ya que al hacer clic en estos elementos, el valor del Click Text puede ser undefined.

2.1 Requisitos para el seguimiento

Este método funcionará si todos los elementos clicables que expanden la sección son hijos del título principal. Es importante estructurar correctamente el código HTML para que el seguimiento funcione.

2.2 La solución

La solución para este caso implica usar una combinación de JavaScript personalizado y variables de GTM para capturar el texto del título del acordeón independientemente del elemento clicado.

2.3 Crear un polyfill (etiqueta HTML personalizada)

Para asegurar que el código funcione en todos los navegadores, crea una etiqueta HTML personalizada en GTM con el siguiente código. Esto permitirá que el método de coincidencia de elementos sea compatible:

<script>
  if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
  }
</script>

2.4 Crear la variable de JavaScript personalizada para encontrar el elemento correcto

Crea una nueva variable en GTM que utilizará JavaScript para identificar el elemento correcto que fue clicado. Esta variable buscará el elemento en función de un selector CSS que especificarás.

2.5 Variable de título de sección del acordeón

Esta variable devolverá el texto del título correspondiente a la sección del acordeón que fue expandida. Necesitarás personalizar el código para incluir el selector CSS correcto que identifique el título del acordeón.

2.6 Probar la variable

Prueba la variable en el modo de vista previa para asegurarte de que esté devolviendo el texto correcto. Esto confirmará que tu configuración está funcionando como se espera.

2.7 Actualizar el disparador de clic

Revisa los Click Classes o Click IDs de los elementos clicables y crea un disparador que active la etiqueta cuando se haga clic en cualquiera de esos elementos.

2.8 Crear la etiqueta de Google Analytics para el segundo caso

Configura otra etiqueta en GTM para enviar eventos a Google Analytics. Asegúrate de que esta etiqueta esté vinculada al disparador que creaste anteriormente.

2.9 Realizar pruebas

Realiza pruebas exhaustivas para verificar que tu configuración esté enviando los eventos correctamente a Google Analytics y que la información se esté registrando como debería.

Rastreo solo de expansiones

Si deseas rastrear solo cuándo un usuario expande una sección y no cuándo hace clic en el título del acordeón, puedes utilizar el atributo aria-expanded. Este atributo cambia entre true y false dependiendo de si la sección está expandida o colapsada.

3.1 Variable para el valor de aria-expanded

Crear una nueva variable de JavaScript personalizada que devuelva el valor de aria-expanded. Esto te permitirá rastrear solo los clics en los que la sección se está expandiendo.

3.2 Actualizar el disparador de clic

Agrega una condición adicional en el disparador para que solo se active si el valor de aria-expanded es false. Esto asegurará que solo estés rastreando cuándo se expande una sección, y no cuando simplemente se hace clic en el título.

¿Se siente complicado?

Es normal sentirse abrumado al principio al tratar de implementar técnicas de seguimiento avanzadas como estas. Sin embargo, con práctica y paciencia, podrás dominar estas habilidades y resolver problemas de seguimiento en el futuro con confianza.

Reflexiones finales sobre el seguimiento de clics en acordeones

Aunque no siempre me encuentro con acordeones en mis proyectos, es un tema recurrente en discusiones y foros. Espero que este artículo te haya proporcionado una guía útil sobre cómo rastrear clics en acordeones con Google Tag Manager, permitiéndote enviar datos valiosos a Google Analytics y optimizar la experiencia del usuario en tu sitio web. Si tienes preguntas o dudas, no dudes en dejarlas en los comentarios.