Question

我正在尝试跟踪我自己管理的网站上的用户互动。通过跟踪我的意思是，我想跟踪用户按下的按钮或小部件，以及用户花费的时间等等。在我开始编写Javascript代码之前，我只想了解什么是最佳选项。做这些事情和可能的陷阱。

Answer 1

自问题发布以来已经有一段时间了，但我一直在研究一个简单的JavaScript模块来做这件事。

它不是使用图像，而是从用户指定的HTML元素中捕获事件数据，以及有关站点访问者浏览器配置的一些基本信息。然后使用在beforeunload事件上触发的XHR将数据发送到指定的服务器端点。

这里是link to the GitHub project和example page

关于代码，这里是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>

该体系结构允许您通过多个实例轻松跟踪多个元素，允许您自定义发送到不同交互的端点。这允许在将数据保存到数据库之前清除任何服务器端预处理。

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

最后，它非常轻巧（约5KB缩小）并且可以轻松扩展到大多数需求。

Answer 2

如果您不需要从服务器返回任何值，则ajax有点开销 - 我会使用图像ping（使用脚本创建图像元素作为源以及您要发送的任何参数）

对于事件，将它们绑定到文档并检查事件目标（注意 - 模糊，焦点和更改不会冒泡）

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

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

Answer 3

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

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

您可以自己探索文档。 https://mixpanel.com/docs/integration-libraries/javascript

Mixpanel只是一个选项，但前提是所有人都一样。您需要考虑的是在收集数据后对其进行管理。像mixpanel这样的公司提供了一个很好的GUI，使它不那么令人头痛。

Answer 4

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

https://github.com/googleanalytics/autotrack

当然，它希望您在自己的应用中使用Google Analytics，但它有一个免费版本可供您使用。查看comparison between their free and paid services。

跟踪网站上的用户互动

4 个答案: