跟踪用户在网站上的互动

Question

I am trying to track user interaction on a website that I manage myself.我正在尝试在我自己管理的网站上跟踪用户交互。 By tracking I mean, I want to track which button or widget the user pressed and when and also how much time a user spent and etc. Before I dive into coding something up on Javascript, I just to get an idea what are best options to do such things and possible pitfalls.通过跟踪，我的意思是，我想跟踪用户按下了哪个按钮或小部件，以及用户何时以及花费了多少时间等等。在我深入研究使用 Javascript 编写代码之前，我只是想知道什么是最好的选择做这样的事情和可能的陷阱。

Answer 1

It's been some time since this question was posted, but I've been working on a simple JavaScript module to do just this.这个问题发布已经有一段时间了，但我一直在研究一个简单的 JavaScript 模块来做到这一点。

Rather than using images, it captures event data from user-specified HTML element(s) along side some basic information about the site visitor's browser configuration.它不使用图像，而是从用户指定的 HTML 元素中捕获事件数据以及有关站点访问者浏览器配置的一些基本信息。 The data is then sent to a specified server endpoint using an XHR triggered on the beforeunload event.然后使用在 beforeunload 事件上触发的 XHR 将数据发送到指定的服务器端点。

Here's a link to the GitHub project and an example page这是GitHub 项目的链接和示例页面

Regarding the code, here's an example of what the HTML would look like:关于代码，以下是 HTML 外观的示例：

<!DOCTYPE html>
<html>
    <head>
        <title>Interaction Tracker Example</title>
    </head>
    <body>
        <div class="someElement"></div>
        <div class="someOtherElement"></div>
        <div class="conversion"></div>
        <script src="interactor.min.js" type="application/javascript"></script>
        <script>
            // An example instantiation with custom arguments
            var interactions = new Interactor({
                interactions        : true,
                interactionElement  : "someElement someOtherElement",
                interactionEvents   : ["mousedown"],
                conversions         : true,
                conversionElement   : "conversion",
                conversionEvents    : ["mouseup"],
                endpoint            : '/usage/interactions',
                async               : true
            });
        </script>
    </body>
</html>

The architecture allows you to easily track multiple elements through multiple instantiations, allowing you to customize which endpoints different interactions are sent to.该架构允许您通过多个实例轻松跟踪多个元素，允许您自定义将不同交互发送到哪些端点。 This allows for clean separation of any server-side pre-processing prior to saving the data to a database.这允许在将数据保存到数据库之前完全分离任何服务器端预处理。

var elementsToTrack = [
    {
        element  : "cssClass1",
        events   : ["mouseup", "touchend"],
        endpoint : "/interactions/c1"
    }, 
    {
        element  : "cssClass2",
        events   : ["mouseup"],
        endpoint : "/interactions/c2"
    },
    { 
        element  : "cssClass3",
        events   : ["mouseup"],
        endpoint : "/interactions/c3"
    }
];

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

Finally, it's very lightweight (about 5KB minified) and easily extendable to most needs.最后，它非常轻量级（缩小约 5KB）并且可以轻松扩展以满足大多数需求。

Answer 2

If you don't need to return any value from server, ajax is a bit overhead - I would use image pings (creating image elements with script as source with any parameter you want to send)如果您不需要从服务器返回任何值，ajax 会有点开销 - 我会使用图像 ping（使用脚本作为源创建图像元素，并带有您要发送的任何参数）

For events, bind them to document and check event target (be aware - blur, focus and change do not bubble)对于事件，将它们绑定到文档并检查事件目标（注意 - 模糊、聚焦和更改不会冒泡）

document.body.addListener(event, function() {
    var i = new Image();
    i.src = 'script.php?target=' + event.target;
}, false);

For time measurement, you could check time that passes between events on elements.对于时间测量，您可以检查元素上事件之间经过的时间。

Answer 3

I would recommend looking into something like mixpanel .我建议您研究一下mixpanel 之类的东西。 It's very simple to integrate and they provide you with the graphic tools to parse large amounts of data.集成非常简单，它们为您提供了解析大量数据的图形工具。 The basic premise is similar to what you said.基本前提和你说的差不多。 Fire asynchronous events on specific user interaction, passing along a set of options.触发特定用户交互的异步事件，传递一组选项。 You can also integrate it into your Python code, which makes it easy to track when server side actions take place.您还可以将其集成到您的 Python 代码中，这样可以轻松跟踪服务器端操作何时发生。 Example:例子：

$("#my_button").click(function() {
  // This sends us an event every time a user clicks the button
  mixpanel.track("Button clicked"); 
});

You can explore the docs for yourself.您可以自己浏览文档。 https://mixpanel.com/docs/integration-libraries/javascript https://mixpanel.com/docs/integration-libraries/javascript

Mixpanel is just one option, but the premise is the same for all. Mixpanel 只是一种选择，但前提是所有人都一样。 The thing you need to consider is managing that data after it's been collected.您需要考虑的是在收集数据后对其进行管理。 Companies like mixpanel provide a nice GUI to make it less of a headache.像 mixpanel 这样的公司提供了一个很好的 GUI，让它不那么令人头疼。

Answer 4

Google Analytics provides a good Javascript library for this:谷歌分析为此提供了一个很好的 Javascript 库：

https://github.com/googleanalytics/autotrack https://github.com/googleanalytics/autotrack

Of course, it expects you to use Google Analytics in your app, but it has a free version you can use.当然，它希望您在您的应用程序中使用 Google Analytics，但您可以使用它的免费版本。 Check thecomparison between their free and paid services .检查他们的免费和付费服务之间的比较。

跟踪用户在网站上的互动

问题描述

4 个解决方案

解决方案1
9 2015-08-06 23:25:58

解决方案2
3 2013-09-12 22:23:10

解决方案3
1 2013-09-12 22:26:16

解决方案4
0 2018-01-20 00:35:30

跟踪用户在网站上的互动

问题描述

4 个解决方案

解决方案1 9 2015-08-06 23:25:58

解决方案2 3 2013-09-12 22:23:10

解决方案3 1 2013-09-12 22:26:16

解决方案4 0 2018-01-20 00:35:30

解决方案1
9 2015-08-06 23:25:58

解决方案2
3 2013-09-12 22:23:10

解决方案3
1 2013-09-12 22:26:16

解决方案4
0 2018-01-20 00:35:30