跟踪网站上的用户交互

Tracking user interaction on a website

本文关键字：用户 交互 网站 跟踪      更新时间：2023-09-26

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

这个问题发布已经有一段时间了，但我一直在研究一个简单的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），可轻松扩展到大多数需求。

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

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

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

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

我建议研究一下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，让它不那么令人头疼。

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

https://github.com/googleanalytics/autotrack

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

相关文章：