Нажмите на карту тепла и координаты мыши!- JavaScript

Question

Я пытаюсь создать простую тепловую карту для одного из моих сайтов, но мне кажется, что это намного сложнее, чем я думал!

1) Существуют разные темы для сайта, 1 выровнена по левому краю, другая - по центру.

2) Размеры экрана меняются у разных пользователей.

Мне нужно отслеживать клики на сайте, но, к сожалению, event.PageX и event.PageY рассчитываются с учетом всего экрана.

---

Примеры * +1014 * В первом примере щелчок с координатами [300, 500], вероятно, будет расположен где-то вокруг гориллы (возможно, его ноздри! =)). В этом другом примере щелчок с координатами [300. 500], вероятно, будет находиться где-то за пределами основной области контента! Bottomline: Как я могу решить эту проблему, чтобы я мог построить точную карту тепловых расчетов "Сделай сам"? Это было бы очень интересно узнать! Спасибо, парни! =)

Answer 1

1) Просто передайте текущую тему вместе с координатами.

2) Получите относительную позицию мыши вашей основной области содержимого. Таким образом, вы избежите проблемы разных позиций для браузеров разной ширины / высоты.

В документации jQuery для позиции мыши есть специальная часть (если ее использовать) об этом:

(Обратите внимание, что значения в пикселях относительно всего документа. Если Вы хотите рассчитать позицию внутри определенного элемента или внутри в окне просмотра вы можете посмотреть на offsetY и offsetX, и сделать немного арифметика, чтобы найти относительное значение.

Вот пример поиска положение в конкретном элементе а не страница:

$("#special").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $('#status2').html(x +', '+ y);
});

Это, как говорится, возможно, излишним; Google Analytics также имеет функцию тепловой карты.

Answer 2

Вместо того, чтобы хранить абсолютные координаты для каждого клика, вы можете сохранить относительные координаты для каждого клика на основе базового объекта, то есть гориллы.

Затем при отображении тепловой карты вы отображаете щелчки относительно каждого объекта с вашим разрешением.

Чтобы сделать это, вам просто нужно захватить объект 'target' каждого клика (это свойство 'target' аргументов события) и вычесть его ко-орды из ко-ордов клика.

Answer 3

Вот мой код.Он регистрирует клики только внутри обёртки страницы (не фоновый материал).Таким образом, вы получаете только относительные позиции.

$(function(){
  var o = $("#wrapperDiv"); // page wrapper div
  var lf = o.offset().left; // wrapper left position
  var lt = lf+o.width(); // wrapper right position
  $(document).click(function(e){ // bind click event to whole page
    var x = e.pageX; // mouse x position
    if(x >= lf || x <= lt){ // was the click inside wrapper div?
      $.get("heatmap.php", { // send ajax request to server width:
        x: x-lf, // x position of page
        y: e.pageY, // y position of page
        url: document.location.href.replace('http://'+document.domain, '') // request uri
      });
    }
  });
});