Eye tracking para pobres

Los dispositivos de eye tracking son caros. Dan un rendimiento excepcional para analizar adónde miran los visitantes de un sitio web, pero a veces es dificil justificar la inversión. Si consigues convencer a tus testers para que hagan click en el punto al que miran, puedes sacar conclusiones…

Ojo de usuario

Con un poco de ingenuidad, es posible implantar en una página web un sistema parecido, basado en javascript y que siga los puntos en donde la gente hace click con el ratón. Para ello, son necesarios los siguientes pasos:

  1. Crear una función que siga el movimiento del ratón, y que se lo pase a un logger cada vez que se hace click.
  2. Hacer una llamada a un método asíncrono (HttpRequest o similar) que mande, de forma transparente para el usuario, las coordenadas del punto en el que se ha clickado.
  3. Que el logger escriba en un archivo, base de datos o similar la información pertinente

Capturar  la posición del ratón 

Antes de nada, es necesario encontrar las coordenadas del ratón. Lo mejor para esto es hacer, al final del ducumento html, un enlace a un fichero javascrip parecido a este:

/*detectar navegador y declaraciones*/
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
var tempX = 0
var tempY = 0/*llamada a la funcion con un handler*/
document.onclick = getMouseXY;
function getMouseXY(e) { //hace todo el trabajo
  if (IE) {
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {
    tempX = e.pageX
    tempY = e.pageY
  }
  var url="/perl/guardacoordenadas.pl?x="+tempX+"&y="+tempY;
  guardar(url);
  return true
}
if( document.getElementsByTagName ){
 var links = document.getElementsByTagName( 'a' );
 for( var i=0; i < links.length; i++ ){   links[i].onclick = function(){    return getMouseXY(this);   }  } }

 Lo que hace, más o menos, es detectar que navegador está utilizando el usuario, inicializar el controlador de clicks, asignar a cada enlace una función en tiempo de ejecución y definir una función getMouseXY. Ésta devuelve true despues de llamar a una función externa que se define en el segundo paso:

HttpRequest

Permite hacer una llamada al servidor fuera del flujo de la navegación. En este caso, queremos que,  cuando el usuario haga click, el servidor guarde la posición del ratón. Para esto, el código es el siguiente:

var xmlDoc = null ;
if (typeof window.ActiveXObject != 'undefined' ) {
 xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
}else {
 xmlDoc = new XMLHttpRequest();
}
function guardar(url){
 xmlDoc.open( "GET", url, true );
 xmlDoc.send( null );
}

Al igual que antes, diferenciamos entre el código de Internet Explorer y el resto. Luego, utilizamos el objeto xmlDoc para hacer la petición. De esta forma, llamamos al servidor sin que el cliente note nada, y podemos guardar la posición del cursor.

El lado del servidor

Desde el lado del servidor, la petición se ve como cualquier otra solicitud, pero no es necesario devolver nada por salida estándar. Lo único que haría falta es imprimir en un archivo la query string que le hemos pasado (con las coordenadas x e y), el referer y, si queremos, la dirección IP. Como prueba de concepto, serviría este código (CGI en perl, fácil de entender o de implementar en otro lenguaje)

#!/usr/bin/perl
use CGI;
use strict;
my $q=new CGI; #crea una nueva instancia del objeto CGI
print $q->header(); #imprime cabeceras
open (LOG,">>log.txt") ||die; #abre el archivo log
print LOG $q->Vars; #e imprime todos los datos
print LOG "\t";
print LOG $ENV{'HTTP_REFERER'};
print LOG "\t";
print LOG $ENV{'REMOTE_ADDR'};
print LOG "\n";
close (LOG);

Con esto, obtendremos un archivo log.txt que nos permitirá saber los puntos donde el usuario ha clickado.

Más cosas

Ahora sería el momento de programar un visualizador para toda esta información, superponiendo a la web los puntos en los que se ha hecho click. En breve escribiré los resultados de mi primer experimento público y como analizar todos los datos.  Ya puedes leer como analizar los logs generados en la parte 2 del artículo

Con este mismo sistema es posible hacer muchísimas cosas. Por ejemplo, llevar un log de los enlaces internos y externos que se siguen en la página, guardar los movimientos del ratón para seguir la navegación... La imaginación es la que marca el límite.

 

 

8 respuestas a “Eye tracking para pobres”

  1. Hola Isa,

    Encantado. En cuanto tenga ocasión escribiré sobre eye tracking, tanto a nivel de software como de hardware

  2. Pingback: meneame.net
  3. Buah!!! interesantisimo articulo aunque como bien dices sería mas interesante hacer llamadas cada x segundos para obtener “el recorrido” del raton y asi obtener un eyetracking mas real, asi podriamos tener 2 mapas, 1 el de clicks y otro el de “movimiento del raton” pero los primeros pasos ya estan dados.

    Enhorabuena.

Comentarios cerrados.