Grabación de datos de usuario para heatmap con JavaScript

Question

Me preguntaba cómo los sitios como crazyegg.com almacenan datos de usuario de la cuenta durante una sesión. Obviamente, hay una secuencia de comandos subyacente que almacena cada información de clics, pero ¿cómo se puede completar esa información en una base de datos? Me parece que la solución más simple sería enviar datos a través de AJAX, pero cuando consideras que es casi imposible obtener una configuración de función de descarga de páginas entre navegadores, me pregunto si tal vez haya alguna otra forma más avanzada de obtener datos métricos.

Incluso vi un sitio que registra cada movimiento del mouse y supongo que definitivamente no están enviando esos datos a una base de datos en cada evento de movimiento del mouse.

Entonces, en pocas palabras, ¿qué tipo de tecnología necesitaría para controlar la actividad del usuario en mi sitio y luego almacenar esta información para crear datos métricos? No estoy buscando recrear GA, estoy muy interesado en saber cómo se hace este tipo de cosas.

Gracias de antemano

Answer 1

La idea fundamental utilizada por muchos sistemas de seguimiento utiliza una imagen 1x1px que se solicita con parámetros GET adicionales. La solicitud se agrega al archivo de registro del servidor, luego se procesan los archivos de registro para generar algunas estadísticas. Así una función de seguimiento clic minimalista podría tener este aspecto:

document.onclick = function(e){ 
    var trackImg = new Image(); 
    trackImg.src = 'http://tracking.server/img.gif?x='+e.clientX+'&y='+e.clientY; 
} 

AJAX no sería útil, ya que está sujeta a la política del mismo origen (que no será capaz de enviar peticiones al servidor de seguimiento). Y tendrías que agregar código AJAX a tu script de seguimiento. Si desea enviar más datos (como movimientos del cursor), almacenará las coordenadas en una variable y realizará sondeos periódicamente para una nueva imagen con una ruta actualizada en el parámetro GET.

Ahora hay muchos muchos problemas:

• de compatibilidad entre navegadores - para hacer el trabajo por encima de la función en todos los navegadores que son importantes en el momento en que probablemente habría que añadir 20 más líneas de código
• obtener datos útiles
  • número de páginas de ancho fijo, centrado, tan cruda coordenadas X e y no le permitirá crear superposición visual de clics n la página
  • algunas páginas tienen elementos líquidos de ancho, o utilizar una combinación de mínima y máxima altura
  • usuarios pueden utilizar diferentes tamaños de fuente
  • elementos dinámicos que aparecen en la página en respuesta a las acciones del usuario
• , etc, etc

Cuando tenga el script de seguimiento resuelto, solo necesita crear una herramienta que tome registros del servidor sin procesar y los convierta en mapas de calor brillantes :)

Answer 2

No sé los detalles de implementación exactos de cómo CrazyEgg lo hace, pero la forma en que lo haría es almacenar eventos de ratón en una matriz, que me envían periódicamente sobre AJAX para la backend – por ejemplo los eventos del mouse capturados se recopilan y se envían cada 30 segundos al servidor. Esto recuperó la tensión de crear una solicitud para cada evento, pero también garantiza que solo perderé 30 segundos de datos como máximo. También puede agregar el evento de envío al evento de descarga, que aumenta la cantidad de datos que obtiene, pero no dependería de él.

Algunos ejemplos de cómo me gustaría ponerlo en práctica (usando jQuery como mis habilidades JS vainilla son un poco oxidado):

$(function() { 

    var clicks = []; 

    // Capture every click 
    $().click(function(e) { 
     clicks.push(e.pageX+','+e.pageY); 
    }); 

    // Function to send clicks to server 
    var sendClicks = function() { 
     // Clicks will be in format 'x1,y1;x2,y2;x3,y3...' 
     var clicksToSend = clicks.join(';'); 
     clicks = []; 
     $.ajax({ 
      url: 'handler.php', 
      type: 'POST', 
      data: { 
       clicks: clicksToSend 
      } 
     }); 
    } 

    // Send clicks every 30 seconds and on page leave 
    setInterval(sendClicks, 30000); 
    $(window).unload(sendClicks); 
}); 

Tenga en cuenta que no he probado ni intentado esto de ninguna manera, pero esto debe darte una idea general.

Answer 3

Si solo está buscando interacción, puede reemplazar su <input type="button"> con <input type="image">. Estos se envían automáticamente con las coordenadas X, Y de donde el usuario ha hecho clic.

jQuery también tiene una buena implementación del mousemove even binding que puede rastrear la posición actual del mouse. No sé cuál es tu resultado final deseado, pero puedes configurar TimeOut (submitMousePosition, 1000) para enviar una llamada ajax con la posición del mouse cada segundo o algo así.

Answer 4

Realmente no veo por qué cree que es imposible almacenar todo haga clic en puntos en una sesión de usuario a la base de datos?

Su moto es "Ver donde la gente Haga clic en" Una vez que reúne datos suficientes es bastante fácil hacer mapas de calor en procesos por lotes.

Las personas realmente están subestimando las bases de datos, la indexación y la fragmentación. Lo único difícil aquí es reunir suficiente dinero para la arquitectura subyacente :)

Answer 5

La analítica de Heatmap resulta ser MUCHO más complicada que la simple captura de las coordenadas del cursor. Algunos sitios web están alineados a la derecha, algunos están alineados a la izquierda, algunos tienen un ancho del 100%, otros son de ancho fijo, "centrados" ... Un elemento de página puede colocarse absoluta o relativamente, flotar, etc. Ah, y también hay diferentes resoluciones de pantalla e incluso configuraciones de múltiples monitores.

Así es como funciona en HeatTest (yo soy uno de los fundadores, que revelan que, debido a las reglas):

1. JavaScript controla el evento onClick: document.onclick = function(e){ } (esto no funcionará con <a> y <input> elementos, tienen que abrirse paso a su alrededor)
2. escritura registra el XPath dirección del elemento se hace clic (ya que las coordenadas no son confiables, véase más arriba) en una forma //body/div[3]/button[id=search]y las coordenadas dentro del elemento.
3. La secuencia de comandos envía una solicitud JSONP al servidor (JSONP se utiliza debido a las limitaciones entre dominios en los navegadores)
4. El servidor registra estos datos en la base de datos.

Ahora, la parte interesante - el servidor.

1. Para calcular el mapa de calor el servidor lanza una instancia virtual de un navegador en memoria (usamos cromo y IE9)
2. muestra la página
3. Toma una captura de pantalla,
4. Encuentra los elementos 'coordina y luego construye el mapa de calor.

Requiere una gran cantidad de CPU y el uso de memoria. Un lote. Así que la mayoría de los servicios de mapa de calor, incluidos nosotros y CrazyEgg, tienen montones de máquinas virtuales y servidores en la nube para esta tarea.