跟踪网站上的用户互动

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代码之前，我只是想知道什么是最佳选项。做这些事情和可能的陷阱。

4 个解决方案

#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. The data is then sent to a specified server endpoint using an XHR triggered on the beforeunload event.

它不是使用图像，而是从用户指定的HTML元素中捕获事件数据，以及有关站点访问者浏览器配置的一些基本信息。然后使用在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缩小）并且可以轻松扩展到大多数需求。

#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.

对于时间测量，您可以检查元素上事件之间的时间。

#3

I would recommend looking into something like 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. Example:

我建议看看像mixpanel这样的东西。它非常易于集成，它们为您提供了解析大量数据的图形工具。基本前提与您所说的类似。在特定用户交互上触发异步事件，传递一组选项。您还可以将其集成到Python代码中，这样可以轻松跟踪服务器端操作的发生时间。例：

$("#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. 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只是一种选择，但前提是所有人都一样。您需要考虑的是在收集数据后对其进行管理。像mixpanel这样的公司提供了一个很好的GUI，使它不那么令人头痛。

#4

Google Analytics provides a good Javascript library for this:

Google Analytics为此提供了一个很好的Javascript库：

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. Check the comparison between their free and paid services.

当然，它希望您在自己的应用中使用Google Analytics，但它有一个免费版本可供您使用。检查他们的免费和付费服务之间的比较。

#1