Eye tracking para pobres

17 Jul
2006

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.

 

 

Would like to share? These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Reddit
  • Facebook
  • Google Bookmarks
  • Ma.gnolia
  • TwitThis
  • LinkedIn

8 Responses to Eye tracking para pobres

Avatar

Isa

July 26th, 2006 at 14:27

Querría conocer más detalles acerca de las funcionalidades del eye tracking. Gracias

Avatar

david

July 26th, 2006 at 14:32

Hola Isa,

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

Avatar

meneame.net

July 30th, 2006 at 23:39

mapas de clicks con javascript.

Como hacer un mapa de los clicks que hacen los visitantes en una página web usando javascript.

Avatar

hartum

October 24th, 2006 at 14:50

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.

Avatar

Eyetracking de Medios en España &laquo; ddsign

March 21st, 2007 at 13:54

[…] Descargar el estudio (1800 KB). Ampliar información en Alt64 Eyetracking &#8220;para pobres&#8221; con JavaScript En elblog de la empresa coruñesa Corunet nos dan una serie de trucos de cómo hacer algo parecido al eyetracking con lenguaje JavaScript detectando por dónde el usuario mueve el ratón y algunos trucos más. Más sobre este tema en: UX Matters, Introduction to Eyetracking: Seeing Through Your Users&#8217; Eyes Jacob Nielsen, F-Shaped Pattern For Reading Web Content […]

Avatar

HeatMaps – Mapas de Calor | Tópicos Web

August 20th, 2010 at 01:29

[…] dejo un ejemplo de cómo implementar un […]

Avatar

HeatMaps – Mapas de Calor

August 16th, 2011 at 06:33

[…] dejo un ejemplo de cómo implementar un […]

Avatar

HeatMaps – Mapas de Calor by Jose Garrido

November 25th, 2012 at 22:51

[…] dejo un ejemplo de cómo implementar un […]

top