Asumamos lo siguiente; acabas de rediseñar tu web, y has empleado todas las mejores prácticas que conoces. La página carga rápido, y ciertamente la interfaz tiene mucho mejor aspecto.

Pero, ¿has considerado cómo medir tu nuevo diseño? ¿Cómo sabrás si el nuevo popup que acabas de añadir produce conversiones, o daña la experiencia de usuario? ¿Con qué frecuencia se muestra el popup y cuanta gente lo abandona? ¿Cuántos usuarios navegan la web desde el menú oculto que también acabas de añadir? ¿Cuánta gente ve el slider de imágenes de la página de inicio más allá de la primera diapositiva? Las preguntas son muchas y variadas. 

En este tutorial, te mostraré a aprovechar la API de Rastreo de Eventos en Google Analytics (¡qué nombre tan largo!) para encontrar las respuestas.

Comienzo

Si todavía no eres usuario de Google Analytics, crea una cuenta y sigue sus instrucciones para generar el script de seguimiento para tu web. Normalmente, el fragmento que te proporcionan será similar al ejemplo inferior, siendo UA-XXXXXX-X el ID de seguimiento único de tu web.

(function(i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
	i[r] = i[r] || function() {
		(i[r].q = i[r].q || []).push(arguments)
	}, 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);
})(window, document, 'script', 'http://www.google-analytics.com/analytics.js', 'ga');
ga( 'create', 'UA-XXXXXX-X', 'auto' );
ga( 'send', 'pageview' );

Para este ejercicio, también necesitarás instalar una extensión de Chrome, Google Analytics Debugger, para depurar los scripts de Google Analytics en tu web. 

Una vez tenemos todo esto preparado, podemos empezar con nuestro primer ejemplo.

Seguir un Clic

Imagina que tenemos un par de botones (o unos enlaces a los que aplicamos el estilo de botón). Añadimos el primero sobre el encabezado, en el área que llamamos "hero", y el segundo justo antes del pie. Como puedes ver más abajo, cada uno de los botones está posicionado en la misma página, tienen varias clases asignadas para los estilos, y un único ID. En este caso, podemos usar la "API del Seguimiento de Eventos" para descubrir cuál de los dos botones recibe más clics.

<!-- The buy now button that appear above the fold -->
<a href="./purchase.html" class="btn btn--buy-now" id="buy-now-above">Buy Now</a>

<!-- The buy now button that appear below the fold -->
<a href="./purchase.html" class="btn btn--buy-now" id="buy-now-below">Buy Now</a>

El uso del Seguimiento de Eventos es relativamente sencillo, ya que estrictamente no requiere convenciones desde el punto de vista de la definición del evento. Primero tenemos que vincular los botones con el evento click.

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

   });
} );

Después añadimos ga() que es una función ya incluida en los scripts de Google Analytics que hemos añadido antes, y la cual es la misma que se usa para registrar las "páginas vistas". De forma parecida, seguimos un evento usando el comando send con event como argumento para hitType junto con un número de parámetros requeridos, que son como sigue:

• eventAction: especifica la interacción del usuario o el estado de la interfaz de usuario p. ej. click, play, pause, etc.
• eventCategory: especifica el Objeto a seguir p. ej. Videos, Buttons, Pop-ups, etc.
• eventLabel: etiqueta única o ID del evento. Añadimos estas variables para categorizar instancias múltiples de un mismo Objeto.

Como hemos mencionado, Google no establece normas estrictas; puedes aplicar estas de la manera que crear que se ajustan mejor a tu página web. En nuestro caso, establecemos estas variables como sigue:

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

Con la extensión Depurador de Google Analytics activa, podemos pulsar uno de nuestros botones y examinar la Consola para Desarrolladores para observar si el seguimiento funciona.

Y una vez Google Analytics ha recibido datos, los registrará bajo Tiempo-Real > Eventos y Comportamiento > Eventos.

Seguimiento de un Carousel

Nuestro segundo ejemplo incluye un Pase de Diapositivas, Slider, o Carousel. Probablemente habrás encontrado muchas opiniones en contra y a favor de su uso en páginas web: "la gente realmente no interactúa con los carouseles" o "la gente solo interactúa con la primera diapositiva". ¿Pero son aplicables estos argumentos a tu página? Sin datos suficientes, es difícil decirlo.

Vamos a incorporar los Eventos de Google Analytics en nuestro carousel, el cual hemos creado usando Slick.js. Este plugin jQuery proporciona un gestor de Eventos jQuery personalizados que es justo lo que nos hace falta para ejecutar el Seguimiento de Eventos de Google Analytics. Por favor consulta la documentación de Slick para los detalles sobre como construir el carousel.

Nuestro carousel consta de cinco diapositivas. Al igual que en nuestro primer ejemplo, también hemos añadido un único ID para cada diapositiva (p. ej. slide-1, slide-2, slide-3, etc.) las cuales enviaremos al parámetro eventLabel. El objetivo aquí es conocer:

1. si los usuarios ven más allá de la primera
2. y conocer el número de visionados de cada diapositiva.

Para conseguirlo podemos usar los eventos del propio Slick.js, swipe y afterChange.

Swipe

El evento swipe, como indica su propio nombre, se dispara cuando el usuario navega a través del carousel mediante el gesto swipe (gesto de deslizamiento). En este caso, hemos establecido también el parámetro eventAction como swipe. 

$('.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.
   });
});

afterChanges

afterChanges es el evento que se disparada cuando la diapositiva cambia; en otras palabras, cuando el usuario ve la diapositiva siguiente o anterior del carousel. En este caso, hemos establecido eventAction a view para "ver nueva diapositiva".

$('.carousel').on('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 recopila la información, sabremos cuantos usuarios interactúan con nuestro carousel, el número de visionados de cada diapositiva, y cuantos usuarios usan el gesto swipe al usar el carousel.

Como vemos arriba, nuestro carousel recibe un total de 19 visionados, 14 de los cuales son a través del gesto deslizar. 

¿Qué es lo Siguiente?

Acabamos de ver dos ejemplos de integración de Eventos de Google Analytics en nuestra página web para recopilar información sobre las interacciones de los usuarios. Estos números nos aportan una referencia sólida para valorar si el nuevo diseño tiene mejor rendimiento que el anterior, finalmente nos ayuda a mejorar la experiencia de usuario en nuestra página web.

Te animo a visitar los documentos para extender tus conocimientos en el uso de la API de Seguimiento de Eventos en Google Analytics.

Más Recursos

• API de Seguimiento de Eventos de Google Anaytics
• Desmitificando Google Analytics en Tuts+
• Una Exploración del Uso Del Carousel En Webs Móviles de E-Commerce