Запись пользовательских данных для карты тепла с помощью JavaScript - PullRequest
34 голосов
/ 23 марта 2010

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

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

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

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

Ответы [ 5 ]

34 голосов
/ 14 мая 2012

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

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

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

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

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

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

27 голосов
/ 23 марта 2010

Фундаментальная идея, используемая многими системами слежения, использует изображение размером 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 в ваш скрипт отслеживания. Если вы хотите отправить больше данных (например, перемещения курсора), вы должны сохранить координаты в переменной и периодически запрашивать новое изображение с обновленным путем в параметре GET.

Сейчас есть много много проблем:

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

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

7 голосов
/ 23 марта 2010

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

Некоторые примеры того, как я бы это реализовал (используя jQuery, так как мои ванильные навыки 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);
});

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

2 голосов
/ 23 марта 2010

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

Их девиз: «Где люди Нажмите » Однажды, когда вы соберете достаточно данных, довольно просто создать тепловые карты в пакетных процессах.

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

1 голос
/ 23 марта 2010

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

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

...