2012-02-09 15 views
10

Existen servicios como crazyegg.com que le muestran dónde los visitantes están descansando los cursores de su mouse en su página web. Mi pregunta es, dado que las personas tienen anchos de pantalla diferentes, ¿cómo pueden estar seguros de que mi coordenada x es la misma posición en la página que la coordenada x de otra persona? Es decir, dos personas pueden tener las mismas coordenadas de ratón x, pero como las pantallas tienen diferentes anchuras, su mouse estará en una parte diferente de la página web.¿Cómo hacen los mapas de calor del sitio web datos precisos?

¿Cómo se puede crear un servicio de mapa de calor de página web que tenga esto en cuenta, y se puede escalar y usar en varios sitios web diferentes con diferentes tamaños de contenido?

+1

Esto solo es relevante si su página está centrada. Si comienza arriba a la izquierda, la resolución no importa. Una vez probé ese servicio, tenían instrucciones especiales para diseños centrados. –

+0

Al usar una combinación de alto y ancho del documento, junto con la altura y el ancho del contenido, podrá calcular la posición exacta del cursor de los usuarios en el contenido de su sitio. Si conoce la cantidad de relleno que hay en su sitio (esto puede resolverse), entonces es realmente bastante simple. –

+0

¿Es posible obtener el contenido de alto y ancho de forma dinámica, sin que el propietario del sitio web lo ingrese? – levi

Respuesta

1

Puede recopilar x & y datos por elemento (como un contenido div principal) en lugar de toda la ventana gráfica. De esta manera, puedes descartar el espacio muerto que está sujeto a la resolución de un usuario.

+0

¿Cómo funcionaría esto cuando estés ofreciendo un servicio de mapa de calor para usar en varios sitios web diferentes? Es decir, no se puede esperar que los clientes ingresen la div principal Id. – levi

+0

@levi ¿por qué no? No es raro proporcionar información especial a un servicio para alterar su comportamiento predeterminado. – canon

+0

Supongo que tener el propietario del sitio web inicialmente dibujar un cuadro delimitador alrededor del contenido de su sitio web podría funcionar – levi

1

Puede agregar un manipulador de clics al cuerpo o un divisor de envoltura (mejor cuando su contenido se centra en la pantalla usando margin: auto) que contienen todo el contenido de la página. El pasado en MouseEvent contiene las coordenadas X/Y y las coordenadas X/Y del cliente, donde las primeras son las coordenadas que comienzan en la esquina superior izquierda de la pantalla y las otras son coordenadas basadas en la esquina superior/izquierda del cuerpo o envoltura div. El uso de las coordenadas X/Y del cliente facilitó la creación de un mapa de calor que le da el mismo punto de inicio en relación con su contenido en diferentes tamaños de pantalla.

+0

Expandir esa buena idea. Puede generar sus mapas de calor en función del elemento y simplemente registrar la actividad del mouse en esa parte de la pantalla. No es tan preciso, pero creo que es una buena dirección. – Prospero

Cuestiones relacionadas