Запись пользовательских данных для heatmap с JavaScript
Я задавался вопросом, как сайты, такие как crazyegg.com хранят пользовательские данные щелчка во время сессии. Очевидно, существует некоторый базовый сценарий, который хранит каждые данные щелчков, но как те данные затем заполняются в базу данных? Это кажется мне, простое решение состояло бы в том, чтобы отправить данные через Ajax, но когда Вы полагаете, что почти невозможно добраться, перекрестная страница браузера разгружают функциональную установку, я задаюсь вопросом, существует ли, возможно, некоторый другой более усовершенствованный способ получить метрические данные.
Я даже обратился на сайт, который записывает каждое движение мыши, и я предполагаю, что они определенно не отправляют те данные в базу данных по каждому событию перемещения мыши.
Так, короче говоря какой технология мне было бы нужно, чтобы контролировать пользовательское действие по моему сайту и затем хранить эту информацию для создания метрических данных? Я не надеюсь воссоздавать GA, мне просто очень интересно знать, как этот вид вещи сделан.
Заранее спасибо
4 ответа
Фундаментальная идея, используемая многими системами отслеживания, использует изображение размером 1x1px, которое запрашивается с дополнительными параметрами GET. Запрос добавляется в файл журнала сервера, затем файлы журнала обрабатываются для генерации некоторой статистики. Таким образом, минималистичная функция отслеживания кликов может выглядеть так:
document.onclick = function(e){
var trackImg = new Image();
trackImg.src = 'http://tracking.server/img.gif?x='+e.clientX+'&y='+e.clientY;
}
AJAX бесполезен, потому что он подчиняется тем же -origin policy (вы не сможете отправлять запросы на свой сервер отслеживания). И вам нужно будет добавить код AJAX в свой скрипт отслеживания. Если вы хотите отправлять больше данных (например, движения курсора), вы должны сохранить координаты в переменной и периодически опрашивать новое изображение с обновленным путем в параметре GET.
Сейчас существует множество проблем:
- кроссбраузерная совместимость - чтобы вышеуказанная функция работала во всех браузерах, которые имеют значение в данный момент, вам, вероятно, придется добавить еще 20 строк кода
- , чтобы получить полезные данные
- многие страницы имеют фиксированную ширину, центрированы, поэтому необработанные координаты X и Y не позволят вам создать визуальное наложение кликов на странице
- некоторые страницы имеют жидкую ширину элементы, или использовать комбинацию минимальной и максимальной высоты
- , пользователи могут использовать разные размеры шрифта
- динамические элементы, которые появляются на странице в ответ на действия пользователя
- и т. д. и т.д.
Когда у вас есть сценарий отслеживания, вам нужно только создать инструмент, который берет необработанные журналы сервера и превращает их в блестящие тепловые карты :)
Не знаю точных деталей реализации того, как это делает crazyegg, но я бы сделал это так, чтобы хранить события мыши в массиве, который я периодически отправлял бы через AJAX на бэкэнд - например, захваченные события мыши собираются и отправляются на сервер каждые 30 секунд. Это снижает нагрузку на создание запроса для каждого события, но также гарантирует, что я потеряю максимум 30 секунд данных. Вы также можете добавить отправку к событию выгрузки, которое увеличивает объем получаемых вами данных, но вы не будете зависеть от этого.
Пример того, как я бы это реализовал (используя 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);
});
Обратите внимание, что я не тестировал и не пробовал это каким-либо образом, но это должно дать вам общее представление .
Я действительно не вижу Как вы думаете, почему невозможно сохранить в базе данных все точки кликов за один сеанс пользователя?
Их девиз: «Посмотрите, где люди Нажмите » Один раз, когда вы соберете достаточно данных, это довольно легко создавать тепловые карты в пакетных процессах.
Люди действительно недооценивают базы данных, индексацию и сегментирование. Единственная трудность здесь - собрать достаточно денег для базовой архитектуры :)
Если вы просто ищете взаимодействия, вы можете заменить свой на < input type = "image"> . Они автоматически отправляются с координатами X, Y того места, где пользователь щелкнул.
jQuery также имеет хорошую реализацию привязки mousemove even , которая может отслеживать текущее положение мыши. Я не знаю желаемого конечного результата, но вы можете setTimeOut (submitMousePosition, 1000) отправлять вызов ajax с положением мыши каждую секунду или что-то в этом роде.