Как тепловые карты сайта получают точные данные?

Question

Существуют такие службы, как crazyegg.com, которые показывают, где посетители размещают свои курсоры мыши на вашей веб-странице.У меня вопрос, учитывая, что люди имеют разную ширину экрана, как они могут быть уверены, что моя координата x находится на той же позиции на странице, что и координата x других людей?Это означает, что два человека могут иметь одинаковые координаты мыши x, но, поскольку экраны имеют разную ширину, их мышь будет находиться в другой части веб-страницы.

Как создать службу тепловой карты для веб-страницы, которая учитывает это и может быть масштабирована и использована на нескольких разных веб-сайтах с различным размером контента?

Answer 1

Вы можете добавить обработчик кликов к телу или div-оболочке (лучше, если ваш контент центрирован на экране с помощью margin: auto), который содержит все содержимое страницы.Переданные в MouseEvent содержат координаты screenX / Y и clientX / Y, где первые - это координаты, начинающиеся в левом верхнем углу экрана, а другие - координаты, основанные на верхнем / левом углу тела или div-оболочки.Используя координаты clientX / Y, вы легко можете создать тепловую карту, чтобы получить одинаковую стартовую точку относительно вашего контента на экранах разных размеров.

Answer 2

Вы можете собирать данные x & y по элементам (например, div основного содержимого), а не по всему окну просмотра.Таким образом, вы можете сбросить мертвое пространство, которое зависит от разрешения пользователя.