Cómo rastrear eventos en su sitio web con Google Tag Manager

Una guía paso a paso, no requiere codificación

En el último artículo, lo guiamos a través de cómo configurar Google Analytics a través del Administrador de etiquetas de Google para rastrear todas las visitas a la página de los usuarios en su sitio web (páginas vistas).

Sin embargo, en muchas situaciones, desea realizar un seguimiento de los comportamientos de los usuarios dentro de sus páginas, como los clics en el botón "agregar al carrito", envíos de formularios o vistas de video.

Todos estos comportamientos se denominan "eventos", y hoy le mostraremos cómo enviar estos eventos a Google Analytics a través del Administrador de etiquetas de Google.

ADVERTENCIA: Este tutorial asumirá que tiene el Administrador de etiquetas de Google y Google Analytics configurados en su propiedad web. Si aún no lo ha hecho, consulte nuestro último artículo vinculado al principio de esta publicación para configurarlos.

El plan de batalla

Como de costumbre, comencemos con un plan de batalla, para que sepamos exactamente en qué nos estamos metiendo:

  • Primero, compilaremos una lista de eventos que queremos rastrear.
  • En segundo lugar, configuraremos activadores de eventos para cada evento que desee rastrear en su sitio web utilizando una herramienta llamada CSS Element Selectors.
  • En tercer lugar, configuraremos etiquetas para cada evento para enviar datos relacionados con esos eventos a Google Analytics.
  • Finalmente, utilizaremos la función de "vista previa" en Google Tag Manager para asegurarnos de que todos los eventos se rastrean correctamente.

En este tutorial, recomendamos usar el Administrador de etiquetas de Google para el seguimiento de eventos por las siguientes tres razones:

  • Este enfoque no requiere la adición de ningún código en su sitio web, lo que hace que la implementación sea mucho más fácil si no tiene una persona técnica en su equipo.
  • Google está cambiando constantemente su mecanismo de seguimiento, y lanzarán su nueva biblioteca de códigos de seguimiento llamada gtag.js en los próximos meses. El uso del Administrador de etiquetas de Google lo ayudará a evitar la molestia de ingresar nuevamente a su base de código y cambiar el mecanismo de seguimiento cada vez que tengan una actualización.
  • Google Tag Manager le brinda una interfaz más fácil para ver qué eventos se están rastreando. Esta interfaz lo ayudará a mantenerse organizado si realiza un seguimiento de muchos eventos en su sitio web.

Paso 1: compila una lista de eventos

El primer paso para configurar el seguimiento de eventos es identificar qué eventos queremos rastrear en primer lugar.

Solía ​​ser un gran admirador del enfoque de "seguimiento de todo", que aboga por el seguimiento de cada evento que ocurre en su sitio web.

El beneficio de este enfoque es que le ayuda a comprender la imagen completa de la experiencia del usuario en su sitio web. Como alguien que proviene de un fondo de ciencia de datos, adoro la idea de tener todos los datos.

Sin embargo, la desventaja de este enfoque es que es realmente fácil sentirse abrumado por la cantidad de datos y sobreestimar el valor comercial real de pasar su tiempo (o el de su analista) analizando cada elemento de su página.

Para las pequeñas y medianas empresas, no recomendaría este enfoque al rastrear sus eventos. Para las empresas más grandes, aún recomendaría invertir en herramientas de seguimiento de comportamiento más sofisticadas como Hotjar (para mapeo de eventos) y Heap Analytics (para seguimiento de embudos de eventos), en lugar de usar Google Analytics.

Recientemente, comencé a convertirme en un gran admirador del enfoque de "macro y micro conversión", que aboga por solo rastrear eventos de macro y micro conversión en su sitio web.

Este enfoque comprende la posible sobrecarga causada por el análisis de todos los eventos del sitio web y, en cambio, enseña a los analistas a registrar una pequeña lista de eventos que tienen valor comercial para usted.

Estos eventos podrían ser eventos de conversión de macros, es decir, los eventos por los que tienen que pasar sus clientes para realizar una compra o enviar un formulario de cliente potencial. También podrían ser eventos de microconversión que indican un mayor compromiso de la audiencia con sus audiencias. Estos pueden incluir clics en los botones, como suscribirse a un boletín informativo o consultar la información del producto en su sitio web.

Recopile una breve lista de eventos de conversión de macro y micro para su sitio web (idealmente menos de diez en total) según la descripción anterior. Entonces estaremos listos para pasar al siguiente paso de configurar realmente el seguimiento de eventos.

Paso 2: configuración de desencadenantes de eventos

Comencemos con un breve resumen de lo que discutimos sobre los desencadenantes la semana pasada.

De forma predeterminada, el Administrador de etiquetas de Google realiza un seguimiento de todos los eventos y visitas a la página de su propiedad web automáticamente. Sin embargo, no registra ninguno de estos datos a menos que usted le indique que lo haga. Los disparadores son la forma en que puede decirle a GTM que realice un seguimiento de los eventos específicos y las vistas de página que desea enviar a Google Analytics u otros servicios.

Por lo tanto, debemos decirle al Administrador de etiquetas de Google que queremos enviar los eventos que recopilamos en el paso anterior a Google Analytics. Para hacer esto, usaremos algo llamado selector de elementos CSS.

Una breve introducción sobre cómo seleccionar eventos

Para identificar los eventos que desea rastrear, es útil comprender conceptualmente cómo se codifican estos botones en su sitio web y cómo seleccionaremos estos elementos.

En su sitio web, todos los elementos están codificados con etiquetas HTML con la estructura que se ilustra a continuación:

Una etiqueta HTML tiene varios componentes clave:

  • El nombre de la etiqueta, que especifica la función de esta etiqueta específica en el contexto general de su sitio web. En este caso, "h1" significa "primer encabezado".
  • El nombre del atributo, que especifica información adicional sobre el encabezado, como su clase (utilizada para agrupar etiquetas con atributos similares), id (utilizado como el identificador único de etiquetas) y estilos.
  • El contenido afectado es el texto que se mostrará en el sitio web en un botón o en un párrafo.

Teniendo en cuenta esos componentes de la etiqueta, un selector de elementos CSS es un lenguaje de consulta de búsqueda en el que puede identificar sistemáticamente etiquetas HTML específicas en su sitio web.

Por ejemplo, la etiqueta HTML ilustrada en el gráfico se puede seleccionar mediante la siguiente consulta simple "h1.primary".

Para obtener más información sobre la sintaxis del selector CSS, utilice el siguiente enlace.

Habilite el selector de elementos en el Administrador de etiquetas de Google

Ahora que hemos entendido conceptualmente cómo podemos seleccionar nuestros eventos, ensuciemos nuestras manos.

El Administrador de etiquetas de Google le permite identificar eventos en su sitio web en función de los diversos atributos de los eventos (denominan a estos atributos "variables"). Puede obtener una lista de todas sus variables integradas en el botón "variable -> configurar" del Administrador de etiquetas de Google.

Como puede ver en la captura de pantalla anterior, Google Tag Manager ofrece una lista muy completa de variables integradas para que pueda identificar eventos, desde hacer clic en un elemento hasta enviar un formulario.

En este tutorial, nos centraremos en uno de los eventos más básicos: hacer clic.

Para lograr esto, vamos a utilizar la variable "Click Element". Puede habilitarlo en la pantalla de arriba marcando la casilla junto a "Elemento de clic" (también puede habilitar otras cajas en la categoría Clics para habilitar más opciones durante la selección de eventos).

Identifique el selector CSS de sus eventos.

Ahora necesitamos identificar el selector CSS único de cada uno de nuestros eventos.

Para hacerlo, solicitaremos la ayuda de la Herramienta de desarrollo web de Google Chrome, una serie de herramientas a las que tendrá acceso automáticamente si tiene Google Chrome.

Vamos a utilizar Google Merchandise Store como ejemplo.

En Google Merchandise Store, cuando un usuario hace clic en el botón de agregar al carrito de un producto específico, la acción de agregar al carrito se lleva a cabo en la página, en lugar de dirigir a los usuarios a una página separada. Por lo tanto, este clic debe ser rastreado como un evento de micro conversión.

Cuando esté en esta pantalla específica (puede seguirla yendo a este enlace), haga clic derecho y seleccione "inspeccionar" en el menú desplegable. Se abrirá un panel lateral de la consola en el lado derecho de la pantalla que se parece a la captura de pantalla a continuación.

Como explican las instrucciones en la captura de pantalla, primero debe hacer clic en el icono del selector de elementos en la esquina superior izquierda de la consola. Luego debe pasar el cursor sobre el elemento de interés, hacer clic en él y su identificador CSS se puede encontrar en el lado derecho de la consola.

Finalmente, use la consulta de consola document.querySelectorAll para asegurarse de que solo haya un resultado, por lo que el selector CSS es único (este suele ser el caso). Aquí tienes tu selector CSS.

PD Si su selector CSS no es único, intente alargar su selector CSS agregando más parámetros en el paso 3 (quedan del anotador ovalado). Si todavía no resuelve el problema, debe identificar el elemento superpuesto y excluirlo en la activación del Administrador de etiquetas de Google (le mostraremos cómo hacerlo más adelante).

Configurar el disparador

Ahora, estamos listos para crear el disparador.

Vaya a la sección "Activador" del Administrador de etiquetas de Google y seleccione "Nuevo".

Haga clic en el cuadro Configuración de disparo y seleccione Hacer clic >> Todos los elementos.

En la siguiente pantalla de configuración, seleccione "Algunos clics", lo que significa que solo desea realizar un seguimiento de ciertos clics que ocurren en su sitio web.

En las siguientes opciones de configuración, seleccione Haga clic en Elemento, Coincide con el selector de CSS y escriba el selector de CSS único que identificó en el paso anterior.

Si su selector CSS no era único a pesar de extender los parámetros, debe identificar los eventos que no desea rastrear y crear otra regla en esta pantalla con la opción "no incluye el selector CSS".

Con todo configurado, debería verse como la pantalla a continuación.

Finalmente, guarde todas las configuraciones. ¡Ahora estamos listos para configurar la etiqueta!

Paso 3: configurar la etiqueta

Buenas noticias, la parte más compleja de este proceso ha terminado. ¡Ahora se trata de una navegación fluida no técnica desde aquí!

En este paso, configuraremos una etiqueta que envíe el desencadenante del evento a Google Analytics.

Como lo demostré en nuestra publicación la semana pasada, vaya a la sección "Etiqueta" del Administrador de etiquetas de Google con la barra de navegación derecha y haga clic en el botón rojo "Nuevo" en la parte superior de la pantalla.

Configurar la etiqueta

Configure la etiqueta con la misma configuración exacta de Google Analytics que la publicación de la semana pasada, pero esta vez, seleccione "Eventos".

Seleccionar eventos permitirá algunas opciones más para que le digas a Google Analytics qué es este evento. Aquí está mi forma recomendada de organizar sus eventos, pero siéntase libre de crear su propia estructura:

  • Categoría: Esta es la categoría general del evento, ya sea un evento de salida, un evento de compromiso, etc.
  • Acción: esta es la acción que ocurrió durante este evento, como "click_add_to_cart" o "click_video".
  • Etiqueta: Aquí es donde coloca información adicional sobre el evento, como en qué producto se está haciendo clic, qué video se está viendo, etc.
  • Valor: si está utilizando una sofisticada asignación de valor de microconversión en su canal de análisis, puede asignar un valor a este evento. De lo contrario, recomiendo dejar esto en blanco por ahora.

Después de completar toda la información relevante en esta página, haga clic en guardar. Ahora terminemos de configurar el gatillo.

Conectar etiqueta con el disparador

Este paso es simple. Seleccione el cuadro "Activador" en la pantalla de creación de etiquetas y seleccione el activador que acabamos de configurar en los pasos anteriores. ¡Presiona guardar y tus etiquetas están configuradas oficialmente!

Paso 4: depuración con la función de vista previa del Administrador de etiquetas de Google

Técnicamente, todos sus eventos deben estar configurados y activados correctamente en Google Analytics. Sin embargo, al igual que todas las tecnologías, esto casi nunca sucede con su primer intento.

Es por eso que necesita herramientas que lo ayuden a identificar si el seguimiento de eventos que acaba de configurar está funcionando, y ahí es donde entra la función de vista previa del Administrador de etiquetas de Google.

Después de terminar de configurar todos los eventos que desea rastrear, haga clic en el botón "Vista previa" en la esquina superior derecha para ingresar al modo de vista previa.

Luego, con la pestaña Administrador de etiquetas de Google abierta, abra una nueva pestaña para su sitio web. Encontrará una sección de depuración en la parte inferior de su pantalla que se parece a la pantalla a continuación

El lado izquierdo de esta sección describe todas las acciones que ha realizado en su sitio web, mientras que el lado derecho le dice qué etiqueta se activó (o no se activó) en cada una de las acciones que ha realizado.

Ahora, regrese a la lista de eventos que tiene y haga clic en cada uno de ellos en su sitio web para verificar si la etiqueta que ha configurado se activa correctamente. Si no es así, regrese y vuelva a verificar todos los pasos para asegurarse de que todo esté configurado correctamente, e intente nuevamente hasta que funcione.

Una vez que todo esté configurado correctamente, regrese una vez más al Administrador de etiquetas de Google y envíe y publique todos los cambios que haya realizado para el seguimiento de eventos. ¡Felicitaciones, ya terminaste!

Si se queda atascado en algún momento del proceso, no dude en enviarme un correo electrónico a bill@humanlytics.co. Estoy más que feliz de ayudarlo a echar un vistazo e identificar posibles errores.

Mientras tanto, muchas gracias por leer este artículo. Si te gustó este tutorial, no olvides seguirnos en nuestra publicación Medium en Analytics for Humans, y suscribirte a nuestro boletín a continuación. ¡Gracias!

Este artículo fue producido por Humanlytics. ¿Buscas más contenido como este? ¡Visítenos en Twitter y Medium, y únase a nuestra comunidad de Facebook de Analytics for Humans para discutir más ideas y temas como este!