Запись пользовательских данных для тепловой карты с использованием JavaScript

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

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

Итак, вкратце, какая технология мне понадобится для мониторинга активности пользователя на моем сайте, а затем сохраните эту информацию, чтобы создать метрические данные? Я не собираюсь воссоздавать GA, мне просто очень интересно узнать, как это делается.

Заранее спасибо

Ответ 1

Основная идея, используемая многими системами отслеживания, использует изображение 1x1px, которое запрашивается с дополнительными параметрами GET. Запрос добавляется в файл журнала сервера, затем файлы журнала обрабатываются для генерации некоторых статистических данных. Таким образом, минимальная функция отслеживания кликов может выглядеть так:

document.onclick = function(e){
  var trackImg = new Image();
  trackImg.src = 'http://tracking.server/img.gif?x='+e.clientX+'&y='+e.clientY;
}

AJAX не будет полезен, поскольку он зависит от политики одного и того же происхождения (вы не сможете отправлять запросы на свой сервер отслеживания). И вам нужно будет добавить код AJAX для отслеживания script. Если вы хотите отправить больше данных (например, перемещения курсора), вы сохраните координаты в переменной и периодически опросите новое изображение с обновленным путем в параметре GET.

Теперь существует много проблем:

совместимость с кросс-браузером - чтобы эта функция работала во всех браузерах, которые имеют значение на данный момент, вам, вероятно, придется добавить еще 20 строк кода.
Получение полезных данных
- многие страницы имеют фиксированную ширину, центрируют, поэтому исходные координаты X и Y не позволят вам создавать визуальное наложение кликов на странице
- некоторые страницы имеют элементы ширины жидкости или используют комбинацию min- и max-height
- пользователи могут использовать разные размеры шрифта
- динамические элементы, которые появляются на странице в ответ на действия пользователя
и т.д.. и др.

Когда вы разработали отслеживание script, вам нужно создать инструмент, который берет необработанные журналы сервера и превращает их в блестящие тепловые карты:)

Ответ 2

Аналитика Heatmap оказывается более сложной, чем просто захват координат курсора. Некоторые веб-сайты выровнены по правому краю, некоторые из них выровнены по левому краю, некоторые из них - на 100%, некоторые из них имеют фиксированную ширину и "центрируют"... Элемент страницы можно позиционировать абсолютно или относительно, плавать и т.д. О, и там также различные разрешения экрана и даже конфигурации с несколькими мониторами.

Здесь, как это работает в HeatTest (я один из основателей, должен показать, что из-за правил):

JavaScript обрабатывает событие onClick: document.onclick = function(e){ } (это не будет работать с элементами <a> и <input>, вам придется взломать свой путь)
Script записывает адрес XPath щелкнутого элемента (поскольку координаты ненадежны, см. выше) в форме //body/div[3]/button[id=search] и координаты внутри элемента.
Script отправляет запрос JSONP на сервер (JSONP используется из-за ограничений между доменами в браузерах).
Сервер записывает эти данные в базу данных.

Теперь интересная часть - сервер.

Для расчета тепловой карты сервер запускает виртуальный экземпляр браузера в памяти (мы используем Chromium и IE9)
Отображает страницу
Делает снимок экрана,
Находит координаты элементов, а затем строит тепловую карту.

Требуется много мощности процессора и памяти. Много. Таким образом, большинство сервисов Heatmap, включая как нас, так и CrazyEgg, для этой задачи имеют стеки виртуальных машин и облачных серверов.

Ответ 3

Не знаю точную информацию о реализации, как это делает crazyegg, но так, как я бы это сделал, это хранить события мыши в массиве, который я бы периодически отправлял по AJAX на бэкэнд – например захваченные события мыши собираются и отправляются каждые 30 секунд на сервер. Это возвращает нагрузку на создание запроса для каждого события, но также гарантирует, что я потеряю только 30 секунд данных максимум. Вы также можете добавить отправку в событие выгрузки, которое увеличивает объем данных, которые вы получаете, но вы не будете зависеть от него.

Какой-то пример о том, как я его реализую (используя jQuery, так как мои навыки работы с Vanilla JS немного ржавы):

$(function() {

    var clicks = [];

    // Capture every click
    $().click(function(e) {
        clicks.push(e.pageX+','+e.pageY);
    });

    // Function to send clicks to server
    var sendClicks = function() {
        // Clicks will be in format 'x1,y1;x2,y2;x3,y3...'
        var clicksToSend = clicks.join(';');
        clicks = [];
        $.ajax({
            url: 'handler.php',
            type: 'POST',
            data: {
                clicks: clicksToSend
            }
        });
    }

    // Send clicks every 30 seconds and on page leave
    setInterval(sendClicks, 30000);
    $(window).unload(sendClicks);
});

Обратите внимание, что я никоим образом не тестировал и не пробовал, но это должно дать вам общую идею.

Ответ 4

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

Их moto - "Смотрите, где люди Нажмите" Когда вы собираете достаточно данных, довольно легко сделать карты тепла в пакетных процессах.

Люди действительно недооценивают базы данных, индексирование и очертание. Единственное трудное здесь - собрать достаточно денег для базовой архитектуры:)

Ответ 5

Если вы просто ищете взаимодействие, вы можете заменить <input type="button"> на <input type="image">. Они автоматически отправляются с координатами X, Y, где пользователь нажал.

jQuery также имеет хорошую реализацию mousemove even binding, которая может отслеживать текущую позицию мыши. Я не знаю вашего желаемого конечного результата, но вы могли бы setTimeOut (submitMousePosition, 1000) отправлять аякс-вызов с помощью мыши каждую секунду или что-то в этом роде.