Desde que me enteré de que Google Analytics permite registrar eventos (event tracking) con Javascript he tenido ganas de probarlo. Hace unos días tuve la oportunidad de hacerlo para detectar el uso que dan los visitantes a easySlider (un panel deslizante hecho con jQuery).

Para hacerlo tuve que modificar el código un poco y aprovechando les dejo el tip de cómo lo hice para que se ahorren unos minutos cuando tengan que hacerlo. Antes de empezar, easySlider es esto:

y este tip es para tener un registro de cuantas veces han hecho click en el botón de siguiente o anterior (las flechas a los lados).

¿Qué necesitas?

• Una cuenta de Google Analytics y el código instalado en la página web. Importante: tienes que usar el “nuevo” código ga.js y no urchin.js
• Tener instalado easySlider en la página, eso incluye jQuery para que easySlider funcione. Para poder modificar easySlider debes usar la versión sin comprimir (el archivo de descarga incluye dos versiones).
• Un editor de texto para modificar código javascript de easySlider.

¿Cómo conseguir que Analytics detecte eventos?

Lo primero es averiguar cuál es el nombre del objeto que esta usando Google Analytics. Si usaste el código que Google te ofrece por defecto tendrás algo como esto:

y el objeto es pageTracker. La forma de avisarle a Analytics que se activo un evento es usando la función _trackEvent que tiene tres parámetros básicos aunque puedes añadir más.

pageTracker._trackEvent(“categoria”, “accion”, “etiqueta”, “valor”);

En resumen los tres primeros parámetros son para clasificar el evento: categoría es el más general, seguido de la acción (qué evento es) y por último etiqueta con la información del elemento. El resto de parámetros son valores que se pueden enviar como información extra.

Para easySlider solo use los tres primeros y la función queda así:

pageTracker._trackEvent("Homepage_Slider", "Navigate", "Next");

Modificar easySlider para disparar los eventos

Modificar easySlider para lanzar el evento de siguiente y anterior es bastante sencillo, solo debes buscar el siguiente código en el archivo easySlider.js y añadir algunas líneas.

$("a","#"+options.nextId).click(function(){
animate("next");
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});

$("a","#"+options.prevId).click(function(){
animate("prev");
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});

Ese código es el que usa easySlider para hacer el cambio de información, justo debajo de la función de animate debes agregar la llamada a _trackEvent para  que Analytics registre el evento. Como precaución incluí la función dentro de un If que revisa el objeto pageTracker.

$("a","#"+options.nextId).click(function(){
animate("next");
if(pageTracker){
pageTracker._trackEvent("Homepage_Slider", "Navigate", "Next");
}
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});

$("a","#"+options.prevId).click(function(){
animate("prev");
if(pageTracker){
pageTracker._trackEvent("Homepage_Slider", "Navigate", "Previous");
}
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});

Listo, con esos cambios Google Analytics registrará cada click que hagan tus visitantes en los botones de siguiente y anterior.

Revisar los registros

Esta es la parte aburrida porque tenes que esperar a que Google Analytics actualice sus datos. Cuando esto suceda podrás ver las estadísticas en la pestaña de Content > Event tracking (Contenido > Seguimiento de eventos) y te mostrará algo como esto

Gráfica de la interacción de los visitantes con easySlider

Tabla del total de eventos y la cantidad de eventos por elemento (label). Como era de esperarse la gente usa más el botón Next (17 clicks) que el botón Previous (5 clicks).

El seguimiento de eventos de Google Analytics se puede utilizar para muchas cosas más, este es solo un pequeño ejemplo, y puedes aprovechar esta opción para llevar registro de cómo usan los visitantes una página web más allá de las paginas visitan.

Encuentras más información de Event Tracking en la guía oficial de Google Analytics: Event Tracking Guide (inglés).

Aclaración: Las modificaciones de este ejemplo son de la última versión publicada de easySlider y no los he probado, en mi caso trabaje con la versión anterior 1.5 de easySlider que varia un poco.