跟踪网站上的用户交互答案

【问题标题】：Tracking user interaction on a website跟踪网站上的用户交互
【发布时间】：2013-09-17 10:57:34
【问题描述】：

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

【问题讨论】：

我认为你的问题有点宽泛。您可以使用不同的技术来实现您的目标。监听事件是 jQuery，存储数据你有 PHP 或 Python 之类的选项。
有第三方 js 工具，如 omniture 、 comscore 允许在整个站点上进行更精细的跟踪。我不确定这是否适合您
谢谢！好吧，我已经在 MySQL 中有一个后端数据库，并且在 Python 上运行了框架。我只是想获得一个基本的跟踪工作流程。因此，例如，单击一个按钮可能会触发一个 ajax 调用并同时异步执行正常任务。我如何做到这一点。你能举个例子吗？

标签： javascript database tracking

【解决方案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）并且可以轻松扩展以满足大多数需求。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案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 来减轻它的麻烦。

【讨论】：

【解决方案4】：

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

https://github.com/googleanalytics/autotrack

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

【讨论】：