Cómo rastrear el comportamiento del usuario con los eventos de Google Analytics

Larga historia corta; acaba de rediseñar su sitio web y ha utilizado todas las mejores prácticas que conoce. El sitio web se carga rápidamente, y ciertamente se ve mucho mejor con la nueva interfaz.

Pero ¿has considerado cómo medida ¿Tu nuevo diseño? ¿Cómo sabrá si la nueva ventana emergente que acaba de agregar unidades de conversión o perjudica la experiencia? ¿Con qué frecuencia se muestra la ventana emergente y cuántas personas la abandonan? ¿Cuántos usuarios navegan por el sitio desde el menú fuera de lienzo que también acaba de agregar? ¿Cuántas personas ven el control deslizante de la imagen en la página de inicio más allá de la primera diapositiva? Las preguntas son muchas y variadas..

En este tutorial, te mostraré cómo aprovechar la API de seguimiento de eventos de Google Analytics (¡qué nombre tan largo!) Para encontrar las respuestas.

Empezando

Si aún no es usuario de Google Analytics, cree una cuenta y siga las instrucciones de incorporación para generar un script de seguimiento para su sitio web. Normalmente, el fragmento que se le da se verá como el siguiente ejemplo con la UA-XXXXXX-X siendo el único ID de seguimiento de su sitio web.

(función (i, s, o, g, r, a, m) i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || function () (i [r] .q = i [r] .q || []). push (argumentos), i [r] .l = 1 * new Date (); a = s.createElement (o), m = s.getElementsByTagName (o) [ 0]; a.async = true; a.src = g; m.parentNode.insertBefore (a, m);) (ventana, documento, 'script', 'http://www.google-analytics.com/ analytics.js ',' ga '); ga ('crear', 'UA-XXXXXX-X', 'auto'); ga ('enviar', 'página vista'); 

Para este ejercicio, también necesitará instalar una extensión de Chrome, el depurador de Google Analytics, para depurar los scripts de Google Analytics en nuestro sitio más adelante..

El depurador de Google Chrome está activado

Una vez que tengamos estas configuraciones, podemos comenzar con nuestro primer ejemplo.

Seguimiento de un clic

Imagina que tenemos un par de botones (o enlaces de anclaje diseñados como botones). Añadimos el primero sobre el pliegue en nuestra área llamada "héroe", y un segundo botón justo antes del pie de página. Como puede ver a continuación, cada botón apunta a la misma página, tiene varias clases de estilo y una identificación única. En este caso, podemos utilizar la "API de seguimiento de eventos" para averiguar qué botón recibe más clics.

 Compra ahora  Compra ahora

Usar el seguimiento de eventos es relativamente fácil, ya que no requiere estrictamente convenciones en términos de definir el evento. Primero tenemos que atar los botones a la hacer clic evento.

var buttons = document.querySelectorAll ('. btn'); buttons.forEach (function (btn) btn.addEventListener ('click', function (event) ););

Luego agregamos Georgia() que es una función expuesta de los scripts de Google Analytics que agregamos anteriormente, y que es la misma función que usamos para grabar una "vista de página". Del mismo modo, seguimos un evento usando el enviar comando con evento establecer como hitType argumento junto con una serie de parámetros requeridos, a saber:

• eventAction: especifica la interacción del usuario o el estado de la interfaz de usuario, por ejemplo,. hacer clic, jugar, pausa, etc.
• eventCategoria: especifica el objeto a seguir, por ejemplo. Videos, Botones, Ventanas emergentes, etc.
• eventLabel: una etiqueta única o ID del evento. Añadimos esta variable para categorizar múltiples instancias del mismo Objeto..

Como se mencionó, Google no establece reglas estrictas; Puede aplicarlos de la forma que considere más adecuada en su sitio web. En nuestro caso, configuramos estas variables de la siguiente manera:

var buttons = document.querySelectorAll ('. btn'); buttons.forEach (function (btn) btn.addEventListener ('click', function (event) ga ('send', 'event', eventAction: 'click', eventCategory: 'Comprar botones', eventLabel: event .target.id // buy-now-above || buy-now-below);););

Con la extensión de Google Analytics Debugger activa, podemos hacer clic en uno de nuestros botones y examinar la Consola de DevTools para ver si el rastreador funciona:

El rastreador está enviando datos a Google Analytics

Y una vez que Google Analytics haya recibido los datos, se registrará bajo la Tiempo real> Eventos y Comportamiento> Eventos.

De esta captura de pantalla, encontramos que nuestro botón "Comprar ahora" debajo del pliegue recibe más clics que el que está arriba.

Seguimiento de un carrusel

Nuestro segundo ejemplo incluirá un control deslizante de imagen o carrusel. Es probable que haya encontrado argumentos a favor y en contra del uso de carruseles en sitios web; “Las personas en realidad no interactúan con los carruseles” o “las personas solo interactúan con la primera diapositiva”. ¿Pero estos argumentos se aplican a su sitio web? Sin datos adecuados, es difícil decir.

Incorporemos los eventos de Google Analytics en nuestro carrusel, que hemos construido utilizando Slick.js. Este complemento de jQuery proporciona un puñado de eventos jQuery personalizados, que es justo lo que necesitamos para ejecutar el seguimiento de eventos de Google Analytics. Diríjase a la documentación de Slick para obtener detalles sobre cómo construir el carrusel.

Nuestro carrusel es simple para el propósito de la demostración..

Nuestro carrusel consta de cinco diapositivas. De manera similar a nuestro primer ejemplo, también hemos agregado una ID única para cada una de las diapositivas (por ejemplo,. diapositiva 1, diapositiva 2, diapositiva 3, etc.) que pasaremos en el eventLabel parámetro. El objetivo aquí es descubrir:

1. si los usuarios ven el carrusel más allá de la primera diapositiva 
2. y para recoger el número de vistas para cada diapositiva.. 

Para ello podemos utilizar los eventos de Slick.js. golpe fuerte y después del cambio.

Golpe fuerte

los golpe fuerte El evento, como su nombre lo indica, se activa cuando el usuario navega por el carrusel utilizando el gesto de deslizar. En este caso, configuramos el eventAction parámetro a golpe fuerte también.

$ ('. carousel'). on ('swipe', function (event, slick, direction) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'swipe', eventLabel: $ ( this) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

después de los cambios

los después de los cambios es el evento que se activa cuando se cambia la diapositiva; en otras palabras, cuando el usuario ve la diapositiva siguiente o anterior dentro del carrusel. En este caso, configuramos el eventAction a ver para "nueva vista de diapositiva".

$ ('. carrusel'). en ('afterChange', function (event, slick, direction) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'view', eventLabel: $ ( this) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

Una vez que Google Analytics haya recopilado los datos, pronto descubriremos cuántos usuarios interactúan con nuestro carrusel, la cantidad de vistas que recibe cada diapositiva y cuántos usuarios utilizan un gesto de deslizar al usar el carrusel..

Como podemos ver arriba, nuestro carrusel recibe un total de 19 vistas, 14 de las cuales se realizan mediante el gesto de deslizar..

Que sigue?

Acabamos de ver dos ejemplos de integración del seguimiento de eventos de Google Analytics en nuestra página web para recopilar datos de interacción del usuario. Estos números nos proporcionan una referencia sólida para evaluar si el nuevo diseño tiene un mejor desempeño que el diseño anterior, lo que finalmente nos ayuda a mejorar la UX de nuestro sitio web.

Le animo a que revise los documentos para extender su uso de la API de seguimiento de eventos de Google Analytics.

Recursos adicionales

• API de seguimiento de eventos de Google Analytics
• Desmitificando Google Analytics en Tuts+
• Una exploración del uso de carrusel en sitios web de comercio electrónico móvil