Отслеживание активности пользователя или ведение журнала с помощью javascript

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

Ответ 1

Вы можете использовать готовые решения:

Вы можете делать потрясающие вещи с помощью Google Analytics и отслеживания событий:

Если вы ищете индивидуальное решение, вы можете попробовать следующее с PHP и JavaScript:

http://css-tricks.com/tracking-clicks-building-a-clickmap-with-php-and-jquery/

Имейте в виду, что использование сторонних решений лучше по производительности. Написание координат движений мыши в базе данных в реальном времени требует большого количества ресурсов.

Ответ 2

Я не думаю, что такого рода библиотеки javascript существуют, вы можете легко создать библиотеку с помощью jquery, просто прослушайте все события (blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error)

а затем отправить их на серверную часть с помощью веб-сокетов

Ответ 3

Посмотрите отслеживание Google Analytics событий?

Вам нужно встроить функцию отслеживания в свой javascript, но это очень удобно использовать.

// Google API
_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

// Example
_trackEvent('checkout' 'remove-item' 'poodle skirt')

Обновление: 2017 Новая аналитика Api

// Api
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

// Example remove product id#27
ga('send', 'event', 'ecart', 'remove-item', 'poodle skirt', 27);
   // OR
ga('send', {
      hitType: 'event',
      eventCategory: 'ecart',
      eventAction: 'remove-item',
      eventLabel: 'poodle skirt'
   });

Ответ 4

Лично я ненавижу стороннюю компанию, такую как Google Analytics и подобные компании. Потому что я не хочу делиться с ними своей веб-аналитикой. В любом случае, есть очень легкоspringя (около 5 КБ) и легко расширяемая библиотека javascript.

Вот git repo: https://github.com/greenstick/interactor, и вы можете увидеть его предварительный просмотр: http://greenstick.github.io/interactor/

Какие данные предоставляются?

Общие данные:

Какая страница загружена
Когда пользователь загрузил страницу
Когда пользователь покинул страницу
URL загруженной страницы
Местоположение предыдущей страницы
Заголовок страницы
Настройки языка пользователя
Платформа пользователя
Порт, используемый для доступа к веб-серверу
Внутренняя и внешняя ширина и высота веб-браузера

Данные о взаимодействии/конверсии:

Тип взаимодействия (то есть общее взаимодействие или преобразование)
Время взаимодействия
Событие, которое вызвало взаимодействие
Целевой тег HTML-элемента
Целевые классы HTML-элементов
Содержимое целевого элемента HTML (т.е. Текст и т.д.)
Положение курсора относительно клиента
Положение курсора относительно экрана

Пример:

var elementsToTrack = [
{
    element: "element1",
    events : ["mouseup", "touchend"]
}, 
{
    element: "element2",
    events : ["mouseup"]
},
{ 
    element: "element3",
    events : ["mouseup"]
}
];

for (var i = 0; i < elementsToTrack.length; i++) {
var e = elementsToTrack[i];
new Interactor({
    interactionElement  : e.element,
    interactionEvents   : e.events
});
}

Надеюсь эта информация будет полезна.