Me han encargado desarrollar métricas sobre cómo los usuarios interactúan con nuestro portal web. Un compañero de trabajo sugirió que buscara "mapas de calor" para monitorear la posición del mouse del usuario. Esta idea me pareció genial. Parece que ya existen algunas soluciones SaaS, pero nuestro presupuesto es escaso, así que preparé algunos javascript:

 class UserLog { constructor(){ // ... this.results = {... mouseMovements=[]} } /* ... more functions ... */ trackMouseMovement(){ document.addEventListener('mousemove', (event) => { this.results.mouseMovements.push({ timestamp: Date.now(), x: event.pageX, y: event.pageY }); }); } }

Actualmente estoy usando un temporizador para enviar esta matriz a mi servidor cada 10 segundos:

 window.setInterval(() => { $.ajax({ url: endpoint, type: "POST", data: this.results, }); },10*1000);

Me encuentro con la matriz mouseMovements que puede tener varios cientos de elementos de longitud y hace que mi navegador llore cuando se ejecuta el ajax.

Puedo intentar enviar datos con más frecuencia, o puedo intentar preprocesar la matriz mouseMovements :

 preprocessData: results =>{ const newResults= { ...results, mouseMovements: results.mouseMovements.filter((val, index) => index % 10 == 0) } return newResults }

(1) ¿Cómo implementan las personas un protocolo de seguimiento del mouse que permite que la máquina del usuario funcione como de costumbre y proporciona suficiente resolución en el back-end para reproducir la sesión del usuario y comprender cómo mejorar su experiencia en el sitio?

(2) ¿Con qué frecuencia debo enviar las solicitudes ajax a mi servidor? Estoy mirando algunos sitios importantes y me doy cuenta de que sus solicitudes parecen estar basadas en clics. ¿El seguimiento de los movimientos del mouse y los desplazamientos no es óptimo? ¿O hay una mejor manera de recopilar esta información?