es6 - Grabación de datos de usuario para heatmap con JavaScript

sonarlint

Question

Me preguntaba cómo los sitios como el usuario de la tienda crazyegg.com hacen clic en los datos 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 sencilla 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 existe 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 por adelantado

Answer 1

La analítica de Heatmap resulta ser MUCHO más complicada que simplemente capturar 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 (soy uno de los fundadores, tengo que revelarlo debido a las reglas):

1. JavaScript maneja el evento onClick: document.onclick = function(e){ } (esto no funcionará con los elementos <a> y <input> , tiene que hackear su camino)
2. El script registra la dirección XPath del elemento cliqueado (dado que las coordenadas no son confiables, ver arriba) en un formato //body/div[3]/button[id=search] y las coordenadas dentro del elemento.
3. El script 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 inicia una instancia virtual de un navegador en la memoria (usamos Chromium e IE9)
2. Renders la página
3. Toma una captura de pantalla
4. Encuentra las coordenadas de los elementos y luego construye el mapa de calor.

Se requiere una gran cantidad de CPU y uso de memoria. Mucho 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.

Answer 2

La idea fundamental utilizada por muchos sistemas de seguimiento utiliza una imagen de 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. Entonces, una función de seguimiento de clics minimalista podría verse así:

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 porque está sujeto a la misma política de origen (no podrá enviar solicitudes a su 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:

• compatibilidad entre navegadores: para hacer que la función anterior funcione en todos los navegadores que importan, en el momento en que probablemente tenga que agregar 20 líneas más de código
• obteniendo datos útiles
  • muchas páginas son de ancho fijo, centradas, por lo que las coordenadas X e Y crudas no le permitirán crear una superposición visual de clics en la página
  • algunas páginas tienen elementos de ancho de líquido, o usan una combinación de altura mínima y máxima
  • los usuarios pueden usar diferentes tamaños de fuente
  • elementos dinámicos que aparecen en la página en respuesta a las acciones del usuario
• etcétera etcétera.

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

Answer 3

No conozco los detalles de implementación exactos de cómo lo hace crazyegg, pero la forma en que lo haría es almacenar los eventos del mouse en una matriz que enviaría periódicamente por AJAX al backend; por ejemplo, los eventos del mouse capturados se recopilan y 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.

Un ejemplo de cómo lo implementaría (usando jQuery ya que mis habilidades de vanilla JS están un poco oxidadas):

$(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 o probado esto de ninguna manera, pero esto debería darle una idea general.

Answer 4

Realmente no veo por qué crees que es imposible almacenar todos los puntos de clics en una sesión de usuario en la base de datos?

Su moto es "Vea dónde hace clic la gente". Una vez que reúne datos suficientes, es bastante fácil hacer mapas de calor en procesos por lotes.

La gente realmente está 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

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 incluso vinculante 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í.