0
419
VistasMapas de calor receptivos
El problema
Encontré un pequeño problema en el que escribí un código en el que automaticé un script para rastrear las interacciones de los usuarios con una interfaz de usuario, incluidos los eventos demousemove y click del mouse. Si no tuviera que preocuparme por hacerlo receptivo, entonces probablemente podría darlo por terminado y enviar el trabajo que ya hice, sin embargo, mi cerebro está buscando algo de conocimiento mágico, estoy luchando para que sea súper receptivo. . Aquí hay solo un ejemplo rápido del tipo de cosa en la que estoy trabajando, no es nada genial, en todo caso, es principalmente heatmap.js que está haciendo el trabajo pesado. Actualmente solo estoy viendo si puedo hacer esto como una prueba de concepto más que cualquier otra cosa...
El código
Actualmente, estoy rastreando los valores de event.pageX y event.pageY para almacenar exactamente dónde tuvo lugar un evento, también estoy almacenando los valores de window.innerWidth y window.innerHeight para probar y encontrar alguna función que me permita para compensar las posiciones en función del tamaño o tamaños de otros dispositivos.
Por ejemplo, si observa la imagen de muestra de arriba, es perfecta para una página estática, pero si tuviera que decir que la página sea un poco más estrecha, puede ver aquí que no se alinea con la imagen de arriba:
De todos modos, sin parlotear demasiado, aquí hay un código de muestra:
// A lot of other code... var setupHeatMaps = function (pages, heatMaps) { pages.forEach(function (page) { page.addEventListener("click", function (event) { heatMaps.push({ x: event.pageX, y: event.pageY, value: 10000 }); onStateChange(); }); // Don't collect ALL mouse movements, that'd be crazy, so collect // every 1/10 mouse movements. var counter = 0; page.addEventListener("mousemove", function (event) { if (counter === 10) { heatMaps.push({ x: event.pageX, y: event.pageY, value: 20 }); onStateChange(); counter = 0; } else { counter ++; } }); }); }; // A lot of other code... // Curried function so that it can be passed around without exposing the state... var renderHeatMaps = function (heatMaps) { return function () { var max = heatMaps.length; var points = heatMaps; var parent = getParentElement(); var styleObj = window.getComputedStyle(parent); var div = document.createElement("div"); var body = document.querySelector("body"); var background = document.createElement("div"); // This element needs to sit in front of the // background element, hence the higher z-index value. div.style.position = "absolute"; div.style.zIndex = 9; div.style.left = "0px"; div.style.top = "-80px"; div.style.width = "100vw"; // Even though this element will sit behind the element // that's created above, we will still want this element to // sit in front of 99% of the content that's on the page. background.style.position = "fixed"; background.style.top = "0px"; background.style.left = "0px"; background.style.height = "100vh"; background.style.width = "100vw"; background.style.zIndex = 5; background.style.backgroundColor = "rgba(255, 255, 255, 0.35)"; background.setAttribute("id", "quote-customer-heat-map-background"); var heightInPx = styleObj.getPropertyValue("height"); var rawHeight = parseInt(heightInPx.replace("px", "")); var newHeight = parseInt((rawHeight + 80)); div.style.height = newHeight + "px"; div.setAttribute("id", "quote-customer-heat-map-foreground"); body.style.paddingBottom = "0px"; body.appendChild(background); body.appendChild(div); var heatMap = h337.create({ container: div, radius: 45 }); heatMap.setData({ max: max, data: points }); }; }; // A lot of other code... Como los elementos de las pages que puede ver que se utilizan en setupHeatMaps cambian de ancho, la visualización de estos datos se compensa bastante. Seré honesto, ayer pasé mucho tiempo pensando en este tema y todavía no he pensado en nada que parezca razonable.
Alternativamente
Me he preguntado si de alguna manera debería almacenar la página como una imagen, con el mapa de calor superpuesto, de esa manera no tendría que preocuparme de que el mapa de calor responda. Pero luego necesito averiguar algunas otras cosas... Por ejemplo, versionar estos datos, de modo que en el caso de que un usuario vea una página en su teléfono, almacenará esos datos por separado de los datos recopilados de una sesión anterior en la que estaban en una computadora portátil o en un dispositivo de escritorio.
Conclusión
Seré honesto, no estoy del todo seguro de cuál es el mejor curso de acción, ¿alguno de ustedes se ha encontrado con algo así antes? ¿Habéis pensado en algo genial que resuelva un problema como este?
PD : compartiría mucho más código, sin embargo, hay una inmensa cantidad de código que se incluye en esta solución general , por lo que no puedo compartirlo todo, ¡estoy bastante seguro de que los muchachos de Stackoverflow me odiarían por eso! 😅 - También puedes notar que estoy haciendo esto como un POC porque normalmente solo descargaría la representación del elemento de background y el elemento div al marco subyacente en lugar de hacerlo programáticamente de esta manera, tenlo en cuenta, esto es solo un POC .
2 Respuestas
Responde la pregunta0
Mi comprensión del problema es que el proyecto funciona bien, en términos de realizar correctamente los eventos, almacenar la información y mostrarla, sin embargo, hay un problema de UX, porque el sistema se compensa (en el tiempo, supongo). Usaría una idea que se parece mucho a la compresión. Imagine su monitor como una cuadrícula de píxeles. Está perfectamente claro que hay algunos problemas de precisión, porque incluso si usamos la máxima precisión que nuestra computadora y sus componentes nos permiten usar, si tomamos dos píxeles adyacentes y queremos hacer clic entre los dos, rápidamente nos damos cuenta de que la precisión nuestro Las ofertas del sistema son bastante limitadas, lo que es axiomáticamente cierto para los dispositivos digitales, que no pueden respetar la separación de Hausdorf .
Ahora que hemos explorado las limitaciones con nuestro pequeño experimento mental, podemos reconocer que tales limitaciones existen. Por lo tanto, en principio, reducir el número de píxeles, pero no el número de eventos, no introduciría más problemas, aunque sí disminuiría la precisión espacial en una cierta cantidad (la cantidad que considera aceptable, por supuesto). Por lo tanto, si tiene una resolución x * y aplicada para el mapa, entonces puede pensar en su resolución como "cada 5 píxeles dentro y la altura cuenta". Eso haría un mapeo entre los píxeles reales y los píxeles imaginarios que formarían la base de nuestra compresión, disminuyendo los lugares en los que se puede hacer clic 25 veces.
Esto le permitiría pensar en el monitor como un conjunto de regiones, siendo la cantidad de regiones significativamente menor que la cantidad real de píxeles (25x en nuestro ejemplo). Eso le permitiría evitar almacenar cada coordinación/clic por separado y, en su lugar, siempre podría almacenar (x, y, n), es decir, el centro de la región donde ocurrió el evento y el número de veces que se repitió ese evento.
De esta forma, si el usuario hace clic en un píxel (x', y'), que se encuentra en una región cuyo centro es (x, y), solo tendrá datos nuevos si aún no se ha producido un clic en esa región. De lo contrario, si se produjera un clic allí (no necesariamente en el mismo píxel exacto, sino en la región), simplemente aumentaría n. Como resultado, en lugar de un conjunto muy grande de datos de eventos de píxeles sin procesar, tendría un conjunto mucho más pequeño de datos de número de eventos de píxeles.
El inconveniente de este enfoque, por supuesto, es que reduce un poco la precisión geométrica, pero debería contribuir a la optimización del procesamiento de datos.
Confieso que no tengo mucha experiencia con Heatmap.js, por lo que no estoy seguro de si tiene soporte API para lo que estoy sugiriendo. Si es así, entonces tratar de usarlo tendría sentido. Si no está optimizado correctamente o no es compatible con dicha función, implementaría la función de mapa de calor utilizando un lienzo o un svg, según las necesidades reales.
0
Si bien esta solución puede no ser la solución más elegante de la historia, al menos funciona, si alguien tiene alguna idea o algo que sea simplemente mejor, ¡contribuya por todos los medios!
Mi solución explicada
Así que estaba pensando, podría representar esto a través de un iframe , seguro que no es la solución más hermosa de la historia, pero al menos eso significa que no hay una lógica de posicionamiento complicada involucrada, es relativamente liviana en términos de complejidad computacional en comparación con algunas otras soluciones I' he visto y que funciona para todo tipo de tamaños de pantalla, esencialmente elimina la necesidad de que esto responda... Un poco...
Claro, eso significa que tendrá barras de desplazamiento a la izquierda, a la derecha y al centro, pero es simple, directo al grano y significa que puedo producir un MVP en muy poco tiempo y, de manera realista, esperaría que su desarrollador junior promedio pueda tener un tiempo más fácil entender lo que está pasando? ¿Qué piensan ustedes? 🙂
También estoy tratando de pensar en ello desde la perspectiva del usuario, de manera realista en este tipo de aplicación, preferiría con mucho la precisión verdadera y cruda en lugar de algo que se vea tan bien que me haga querer convertirme en diseñador. Incluso he hecho algunos deberes en este tema, ya que esencialmente he estado tratando de construir un software de reproducción de sesión, ¡debo decir que ha sido un proyecto / característica muy interesante! 😀
Con un poco de estilo, he podido lograr algo como esto... Obviamente, este no es un fragmento directo del sitio web/aplicación, pero este es un material de marketing que ha creado mi jefe, pero el contenido dentro de la 'computadora portátil ', ¡esa es una captura de pantalla/recorte real de la aplicación web! 😅 - Entonces, en general, ¿creo que se ve bien? - Puede ver dónde ocurre el desbordamiento y el lado derecho de la pantalla está un poco cortado, pero debido a que todo lo demás dentro de la interfaz de usuario se comporta como si tuviera una posición fixed allí, personalmente creo que parece funcionar bastante bien.
Editar
Me gustaría agradecer a todos los que dedicaron su tiempo, ya sea agregando comentarios o brindando respuestas, ¡es fantástico ver a la comunidad de desarrolladores ser tan útil! ¡Gracias a todos, chicos! 😀
Entrada en el blog
Así que he escrito un poco más sobre este tema aquí: