15

我正在尝试跟踪我自己管理的网站上的用户交互。通过跟踪我的意思是，我想跟踪用户按下了哪个按钮或小部件，以及用户在何时以及花费了多少时间等等。在我深入编写 Javascript 代码之前，我只是想知道什么是最好的选择做这样的事情和可能的陷阱。

4

4 回答 4

9

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

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

这是GitHub 项目的链接和示例页面

关于代码，下面是 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）并且可以轻松扩展以满足大多数需求。

于 2015-08-06T23:25:58.757 回答
2

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

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

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

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

于 2013-09-12T22:23:10.603 回答
1

我建议研究类似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 来减少它的麻烦。

于 2013-09-12T22:26:16.600 回答
0

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

https://github.com/googleanalytics/autotrack

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

于 2018-01-20T00:35:30.443 回答