jQuery 使用 javascript 跟踪或记录用户活动

User Activity Tracking or Logging with javascript

提问by Rameez

Is it possible to track every action of a user on a webpage and creating log of it? The idea is to transfer log of user actions to server via AJAX and saving it. On each event for each element I can write code/logic to write some log in console, but I was wondering if there is any library/shortcut available which can log all actions on webpage at client side including events and actions such as copy, paste, click, double click, selection etc. with their element reference.

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

回答by Wissam El-Kik

You can use ready-made solutions:

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

• http://www.google.com/analytics/
• http://www.clicktale.com/
• https://segment.io/
• http://www.extrawatch.com/
• http://mouseflow.com/
• https://www.seevolution.com/
• http://clicky.com/

• http://www.google.com/analytics/
• http://www.clicktale.com/
• https://segment.io/
• http://www.extrawatch.com/
• http://mouseflow.com/
• https://www.seevolution.com/
• http://clicky.com/

You can do amazing stuff with Google Analytics and its Event Tracker:

您可以使用 Google Analytics 及其事件跟踪器做出惊人的事情：

• https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
• http://searchenginewatch.com/article/2287906/10-Google-Analytics-Custom-Events-That-Track-the-Untrackable

• https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
• http://searchenginewatch.com/article/2287906/10-Google-Analytics-Custom-Events-That-Track-the-Untrackable

If you're looking for a custom-made solution, you can try the following one with PHP and JavaScript:

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

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

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

Keep in mind that using third-party solutions is better performance-wise. Writing the coordinates of the mouse movements in a database in real time, needs a lot of resources.

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

回答by InvisibleUn1corn

I don't think that this kind of javascript library exist, you could easily build one with jquery, just listen to all the event (blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error)

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

and than send them to the server side using web sockets

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

回答by Du D.

Have you look at Google Analytic Event Tracking?

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

You need to embed the tracking function within your javascript but it is very convenience to use.

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

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

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

---

---

Update: 2017New Analytics Api

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

回答by Kalyan Halder Raaz

Personally I hate3rd party like google analyticsand similar company. Because I dont want to share my web analytics with them. Anyway there is a very very lightweight(about 5KB minified) and easily extendablejavascript library.

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

Here is git repo: https://github.com/greenstick/interactorand you can see a previewof it: http://greenstick.github.io/interactor/

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

What Data is Provided?

提供什么数据？

General Data:

一般数据：

• Which page is loaded
• When the user loaded the page
• When the user left the page
• The URL of the loaded page
• The previous page location
• The title of the page
• The language settings of the user
• The user's platform
• The port used to access the web server
• The inner and outer width and height of the web browser

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

Interaction / Conversion Data:

互动/转化数据：

• The interaction type (i.e. general interaction or conversion)
• The time of the interaction
• The event that triggered interaction
• The target HTML element tag
• The target HTML element classes
• The target HTML element content (i.e. text, etc.)
• The cursor position relative to client
• The cursor position relative to screen

• 互动类型（即一般互动或转化）
• 互动时间
• 触发交互的事件
• 目标 HTML 元素标签
• 目标 HTML 元素类
• 目标 HTML 元素内容（即文本等）
• 相对于客户端的光标位置
• 光标相对于屏幕的位置

Example:

例子：

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
});
}

I Hope this information will be helpful.

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