Iván Mendoza

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.

Este será un tip rápido para corregir la línea punteada fuera de lugar en los enlaces y botones. El error lo he visto en Firefox aunque desconozco si también aparece en otros navegadores

La línea que se ve arriba, llamada outline, no debería ser tan extensa. Este error ocurre cuando a través de CSS queremos ocultar el texto de un elemento enviándolo lejos del área visible con text-indent. En el código de abajo se puede ver el text-indent a –9999em (lo enviaron muy lejos jeje).

Para corregirlo solo hay que añadir una regla más al CSS: overflow:hidden;

Con esto la línea se ajusta de nuevo al elemento porque ya no “busca” al texto fuera del área visible.

En Junio de este año, 2008, salí de viaje y estuve dos días en un bonito hotel de México. Durante esos dos días use mi laptop dentro del hotel, pero tuve el problema de que las dos mesas de la habitación eran de cristal y el mouse (óptico) no funcionaba, y sinceramente no quería usar el touchpad de la laptop.

La solución, fue improvisar un mousepad con un filtro de papel para café, de los desechables, y funciono mejor de lo que pensaba, ese mismo día meti un par de filtros más en la mochila y no volví a tener problemas con el mouse. Incluso en mi casa mantengo un filtro para cuando tengo que trabajar en la mesa o en el tablero de dibujo.

Mousepad improvisado

Ventajas: Es pequeño y delgado, totalmente portátil, justo para llevar en la bolsa del pantalón o billetera, también es barato (prácticamente gratis) y lo mejor de todo es fácil de encontrar en hoteles.

Nota: Funciona y se ve mejor si lo planchan