Cómo hacer seguimiento de Eventos con Tag Manager y Analytics

¡Buenos días! En este vídeo-tutorial vamos a ver cómo hacer seguimiento de eventos de nuestra web que pasaremos a Google Analytics a través de Google Tag Manager. ¡Vamos allá!

YouTube video

Antes de todo, para situarnos, vamos a dar un pequeño repaso a qué es el seguimiento de eventos.

Qué es el tracking de eventos en una web

En palabras sencillas, cuando se habla del tracking de eventos se hace referencia a captar alguna acción concreta que se realiza en nuestra web y registrarla en algún informe, como en nuestro caso será en Google Analytics.

Estas acciones podrían ser clicks en ciertos botones u otros elementos de la web, páginas vistas, reproducciones de vídeos o incluso cosas como hacer scroll hasta cierta profundidad de nuestra web.

En nuestro caso trabajaremos con lo siguiente:

  • Google Tag Manager, para configurar y gestionar la captación de este evento
  • Google Analytics, donde enviaremos y guardaremos estos eventos
  • Eventos de click, ya que son los más sencillos de explicar y nos viene bien para ponerlo de ejemplo

En este ejemplo vamos a detectar y enviar a Analytics cuántos clicks se hacen sobre el botón del menú en la web.

Una vez dicho esto, veamos los pasos que hemos seguido para implementar el seguimiento de eventos.

Implementamos el Google Tag Manager en la web

Este paso no lo veremos en este post porque ya quedó explicado en otro vídeo aparte. Yo en mi caso trabajo con WordPress así que en este enlace podéis ver cómo instalar y configurar Google Tag Manager en WordPress.

Una vez que lo tenemos implementado, activamos la vista previa del Tag Manager, que nos será necesaria a continuación:

Con la vista previa activada, volvemos a la web, la recargamos y vamos a por el siguiente paso.

Activamos las variables de click

Si no hemos trabajado antes con Tag Manager es posible que necesitemos activar las variables de click para que el Tag Manager reconozca estas variables en los elementos de nuestra web.

Variables: son como atributos de los elementos de la web que nos ayudarán a apuntar a estos elementos para configurar los eventos. El ejemplo más fácil podría ser la clase o el ID de un elemento, definidos por el HTML, que seguro que todos nos conocemos.

Para activar las variables de click hacemos lo siguiente:

  1. Nos dirigimos al panel de variables en nuestro Tag Manager
  2. Hacemos click en Configurar
  3. Hacemos scroll hasta la sección Clics y hacemos check en todas las variables de click

Con esto ya tenemos las variables activadas y vamos a por los activadores.

Configuramos los activadores o triggers

Lo que nos permiten los activadores es definir qué tiene que ocurrir para que la acción realizada en la web se considere un evento. En este caso la acción será un simple click así que hacemos lo siguiente:

  • Vamos al panel de Activadores
  • Hacemos click en Nuevo
  • Hacemos click en Configuración del activador
  • En la sección Clic elegimos Todos los elementos

De momento, para comprobar que todo funciona correctamente podemos dejar el activador en Todos los clicks. Guardamos los cambios y volvemos al Tag Manager para comprobar que todo funciona.

Comprobamos que funciona el activador

Si actualizamos la vista previa, volvemos a nuestra web y la recargamos, veremos que al hacer click sobre cualquier elemento de la web (porque lo hemos dejado en Todos los clicks) se va a detectar esa acción, que de momento no está vinculada con ningún evento.

Afinamos el activador

Como sólo nos interesan los clicks que se hacen en el botón del menú (en mi ejemplo, lo tendrás que aplicar a tu caso), vamos a hacer que Tag Manager sólo escuche los clicks en ese elemento:

  1. Volvemos a la configuración del activador que acabamos de crear
  2. En lugar de Todos los clicks elegimos Algunos clicks
  3. Elegimos la variable que nos interese. En mi caso como es un elemento único elijo un ID, pero en tu caso podría ser una clase o cualquier otra variable
  4. Indicamos que la variable tiene que ser igual a, y luego el valor de la variable (que en mi caso es #menu-btn así que pongo menu-btn)

Guardamos los cambios, y ahora si actualizamos la vista previa y refrescamos nuestra web, el activador sólo reaccionará cuando hagamos un click sobre el elemento al que acabamos de apuntar.

Ahora que el activador ya está listo, vamos a crear la etiqueta que enviará esta acción como un evento a Google Analytics

Creamos la etiqueta de evento de Analytics

Para ello primero creamos la etiqueta:

  1. Vamos al panel de Etiquetas
  2. Hacemos click en Nueva
  3. Hacemos click en Configuración de la etiqueta
  4. Elegimos Google Analytics de las opciones que nos salen

Y ahora configuramos esta etiqueta:

  1. Elegimos Evento como Tipo de seguimiento
  2. Rellenamos los campos de parámetros. Básicamente es para clasificar y organizar un poco qué tipo de acción estamos siguiendo. Con que rellenemos Categoría y Acción ya nos vale. En este enlace tienes más información sobre esto.
  3. Seleccionamos la opción de Habilitar la anulación de configuración en esta etiqueta
  4. En el campo que aparece indicamos nuestro ID de seguimiento de Analytics que podemos encontrar en nuestro Google Analytics en Administrar > Configuración de la propiedad

El resto lo podemos dejar por defecto.

Sólo nos queda asignarle el activador que hemos creado antes haciendo click sobre Activación y seleccionando nuestro activador.

Guardamos los cambios y ¡ya lo tenemos! Si hemos hecho todo correctamente, el evento ya está configurado.

Comprobamos el funcionamiento del evento

Para comprobar que el evento se dispara correctamente vamos a actualizar la vista previa del Tag Manager, volvemos a la web, la recargamos, y ahora en el panel inferior nos debería aparecer el evento que acabamos de crear:

Y cuando hagamos un click sobre el elemento que hemos configurado como Activador, este evento pasará de Tags Not Fired On This Page a Tags Fired On This Page.

Con esto ya podemos estar seguros de que los eventos aparecerán en Google Analytics, pero también podemos ir ahí y comprobarlo.

Comprobamos la aparición de eventos en Google Analytics

Para hacerlo nos dirigimos a la cuenta de Google Analytics de nuestra web y vamos al informe de eventos en Comportamiento > Eventos > Visión general.

Cuando pase un tiempo, (esto no ocurre al instante), los eventos que hemos configurado aparecerán aquí bajo la Categoría, Acción y Etiqueta que les hemos asignado en el Tag Manager

¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web