Llevo unos días hablando y hablando de la Api para Tracking de Google Analitics, una api javascript que nos permite mejorar en gran medida todos los datos que tomamos de nuestras webs hacia Google Analytics. De esta Api merece una mención especial el tema de los eventos puesto que pueden ser lanzados desde cualquier script javascript de tu página. ¿Cualquier Script? ¿Quiere eso decir que puedo usar jQuery para ayudarme con mis eventos de la Google Analytics Tracking Api? ¡Claro que si!

El primer punto a superar es el tema de la variable que contiene el objeto trackear esta tiene que ser definida como variable global para que podamos acceder a ella en cualquier parte de nuestro código javascript. Por lo general eso no es demasiado problema ya que en javascript basta con que una variable sea definida fuera de cualquier objeto o función para que tome propiedades de variable global. Sin embargo si en esa función se utiliza el mismo nombre de variable se tomará la variable de función en vez de la global como cierta. Esto es un peligro para nombres de variable poco específicos como es el caso de «pageTracker», el nombre de variable que nos da Analytics por defecto. Por eso y ya que vamos a usarla integrada con jQuery vamos a definirla dentro de la función dólar ($).

Simplemente le hemos puesto el «$.» delante del nombre de variable y como la función dólar es sagrada para todos los scripts jquery sabemos que no vamos a redefinirla carguemos el plugin que carguemos.

A partir de aquí se nos abre un camino de posibilidades dentro de nuestro uso habitual de jquery:

$(document).ready()

Esta función típicamente usada para empezar a crear eventos cuando la carga de la página termina ahora nos sirve precisamente para lanzar eventos de «pagina terminada de cargar». Dentro de ella podemos guardar cualquier dato de interés del proceso llevado a cabo desde que la página empieza a cargar realmente hasta que termina: tiempos de carga, imágenes bien y mal cargadas, aspecto de los anuncios de terceros, etc…

Seguidamente un pequeño ejemplo usando el objeto de ayuda timeTracker de google analytics tracking api para guardar como evento el tiempo de carga de nuestra página:

$.timeTracker = new TimeTracker();
// recogiendo el tiempo de inicio
$.timeTracker._recordStartTime();
// cuando la pagina termina de cargar...
$(document).ready(function(){
  // tomamos la medicion final
  $.timeTracker._recordEndTime();
  // definimos los bloques de tiempo
  $.timeTracker._setHistogramBuckets([10, 20, 50, 100, 500, 1000, 2000, 3000, 5000]);
  // lanzamos el evento
  $.timeTracker._track(pageTracker,"page load time");
});

Acceso a cualquier contenido de la página

Dado que con la query de jQuery resulta muy sencillo acceder a cualquier elemento de la página esto significa que sin mucha complejidad vamos a poder capturar los datos que haga falta de la página y sin complicaciones.

Imaginemos que tenemos un banner de un tercero. Este es un javascript que printa en nuestra web una imagen distinta cada vez. Podemos usar los eventos para saber que imagen ha sido la que ha printado en cada ocasión…

$(document).ready(function(){
  // tras el ready el banner ya habra sido printado
  var bannerImg = $("#banner img").attr("src");
  // trackeamos el evento:
  // categoria = renderedHtml | accion = banner | etiqueta = src de la imagen
  $.pagetracker._trackEvent("renderedHtml", "banner", bannerImg );
});

Eventos y JavaScript no Intrusivo

Una de las ventajas de jQuery es que facilita el javascript no intrusivo. Esto en la práctica se traduce en que una página con jQuery bien implementado acaba teniendo uno o más archivos de eventos en los que se asocian todos los eventos que va a tener la página html. Todos los onclicks, onmouseover, onfocus, etc. quedan fuera del html y contenidos en estos archivos.

Eso significa que vamos a tener bien separado en nuestro código donde están nuestros eventos. Así, solo voy a tener que revisar mi/s archivo/s de eventos javascript y añadir en ellos las llamadas a eventos de Google Analytics.

Veamos un pequeño ejemplo bastante típico. Tenemos una página con pestañas hechas en ajax o DHTML lo que supone que de cara a Analytics no sabemos si los usuarios están viendo los contenidos de las pestañas o no (la url nunca cambia). Ahora, gracias a jquery va a ser muy sencillo hacer esta asociación en el archivo de eventos:

// trackear visualizacion de pestañas
$("a.tab").click(function(){
  // el div esta indicado como anchor en el link del tab
  var divToShow = $( this.attr("href") );
  // sus divs hermanos son el resto de contenidos de los tabs
  var allBrotherDivs = divToShow.parent().find("div")
  // escondemos a todos los hermanos
  allBrotherDivs.hide();
  // mostramos el div del tab
  divToShow.show();
  // trackeamos el evento:
  // categoria = clicks | accion = tab | etiqueta = id del div visto
  $.pagetracker._trackEvent("clicks", "tab", divToShow.attr("id") );
});

Disponibilidad de Eventos

Dado que en jQuery se han preocupado mucho de estandarizar todos los eventos posibles de javascript esto nos da acceso a asignar capturas de eventos a cualquier cosa que queramos. Solo hace falta ver la larga lista de funciones en la documentación de eventos de jQuery para empezar a ver las posibilidades de capturas que se nos abren.

Por ejemplo… podríamos capturar cuando un usuario usa el scroll de nuestra página para ver realmetne el porcentaje de usaurios que no están viendo nuestros productos secundarios:

$(window).scroll(function () { 
  // trackeamos el evento:
  // categoria = userActions | accion = scroll | etiqueta = url actual
  $.pagetracker._trackEvent("userActions", "scroll", window.location.href );
});

Uso de plugins destinados al Marketing

En jQuery han ido apareciendo plugins interesantes destinados a saber más información sobre el usuario y actuar en consecuencia. Buscando un poco podemos aprovechar este trabajo para conocer comportamientos realmente detallados.

Como ejemplo pondré un plugin que me gusta muchisismo y que te permite detectar periodos de inactividad del usaurio (por levantarse del ordenador o navegar por otra pestaña) y lanzar eventos cuando estos son demasiado largos o cuando el usuario vuelve a la actividad tras este periodo: jquery IdleTimer Plugin

$.idleTimer(10000);
$(document).bind("idle.idleTimer", function(){
  // este evento se lanza cuando el usaurio ha pasado
  // demasiado tiempo inactivo
  // trackeamos el evento:
  // categoria = userActions | accion = idle | etiqueta = tiempo inactivo
  $.pagetracker._trackEvent("userActions", "idle", 10000 );  
});

Creación de plugins de tracking

Con un poco de práctica la creación de plugins de jQuery es algo bastante sencillo. Aplicando esto a la captura de eventos de Google Analytics tenemos que debería ser bastante sencillo crear plugins dedicados a capturar siempre los mismos tipos de eventos sobre el html de la web. Así, podemos usar estos plugins para todos nuestros proyectos.

En mi próximo post dejaré el código un un plugin que estoy terminando para capturar el tiempo de escritura de un formulario hasta que este es enviado.