使用 javascript 库的用户活动跟踪 [关闭]答案

【问题标题】：User Activity Tracking using javascript library [closed]使用 javascript 库的用户活动跟踪 [关闭]
【发布时间】：2013-09-13 20:07:04
【问题描述】：

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

【问题讨论】：

所以基本上你想重新创建 Google Analytics？
现在只记录 :) 创建分析报告太远了。
我在stackoverflow.com/a/7439584/1356109 找到了一些东西，但它是针对单个元素的。我正在寻找一些动态的解决方案。我猜 $( "*" ) 应该可以工作。
您可能会发现这个blog post 很有用。它共享自定义 JavaScript 代码以跟踪网页上的用户活动。

标签： javascript jquery html dom logging

【解决方案1】：

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

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

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

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

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

【讨论】：

用几句话来描述每个链接的含义会很有帮助。

【解决方案2】：

我个人讨厌像 google analytics 和类似公司这样的第三方。因为我不想与他们分享我的网络分析。无论如何，有一个非常非常轻量级（约 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
});
}

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

【讨论】：

【解决方案3】：

我不认为这种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 sockets将它们发送到服务器端

【讨论】：

【解决方案4】：

你看过Google Analytic Event Tracking吗？

您需要在您的 javascript 中嵌入跟踪功能，但使用起来非常方便。

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

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

更新：2017 New Analytics 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'
   });

【讨论】：