javascript - 使用 javascript 库的用户活动跟踪

Question

是否可以跟踪用户在网页上的每个操作并创建日志？这个想法是通过 AJAX 将用户操作日志传输到服务器并保存。在每个元素的每个事件上，我可以编写代码/逻辑来编写一些登录控制台，但我想知道是否有任何可用的库/快捷方式可以记录客户端网页上的所有操作，包括事件和操作，例如复制、粘贴、单击、双击、选择等及其元素引用。

score 23 · Accepted Answer

您可以使用现成的解决方案：

您可以使用 Google Analytics 及其 Event Tracker 做出惊人的事情：

如果您正在寻找定制的解决方案，您可以使用 PHP 和 JavaScript 尝试以下解决方案：

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

请记住，使用第三方解决方案在性能方面会更好。将鼠标移动的坐标实时写入数据库，需要大量资源。

score 11 · Accepted Answer

就我个人而言，我讨厌像谷歌分析和类似公司这样的第三方。因为我不想与他们分享我的网络分析。无论如何，有一个非常轻量级（约 5KB 缩小）且易于扩展的JavaScript 库。

这是 git repo：https ://github.com/greenstick/interactor ，您可以看到它的预览：http : //greenstick.github.io/interactor/

提供什么数据？

一般数据：

加载了哪个页面
当用户加载页面时
当用户离开页面时
加载页面的 URL
上一页位置
页面标题
用户的语言设置
用户平台
用于访问 Web 服务器的端口
网页浏览器的内外宽高

互动/转化数据：

交互类型（即一般交互或转化）
互动时间
触发交互的事件
目标 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
});
}

我希望这些信息会有所帮助。

score 6 · Accepted Answer

我不认为这种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）

然后使用Web 套接字将它们发送到服务器端

score 4 · Accepted Answer

你看过谷歌分析事件跟踪吗？

您需要在 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'
   });

javascript - 使用 javascript 库的用户活动跟踪

4 回答 4

Related

Reference