logo标签列表

在网站上追踪用户交互

javascriptdatabasetracking
17

我正在尝试跟踪我自己管理的网站上用户的交互。通过跟踪，我的意思是，我想跟踪用户何时按下哪个按钮或小部件以及花费了多少时间等信息。在我开始使用Javascript编写代码之前，我想先了解最佳操作选项和可能存在的问题。

1
我认为你的问题有点宽泛。你可以使用不同的技术来实现你的目标。使用jQuery监听事件，使用PHP或Python存储数据。 - Lucio
有第三方的JS工具，比如Omniture、Comscore，可以在整个网站上更细粒度地进行跟踪。我不确定这是否适用于您。 - Raghu
谢谢！我已经在MySQL中拥有后端数据库和在Python上运行的框架。我只是想获得跟踪的基本工作流程。例如，点击一个按钮应该会触发一个ajax调用，并同时异步执行正常任务。我该如何实现这一点？你能给出一个例子吗？ - Zahid Hossain
4个回答
10

虽然这个问题已经发布有一段时间了，但我一直在开发一个简单的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压缩后），并且可以轻松地扩展到大多数需求。
2

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

对于事件，请将它们绑定到文档并检查事件目标（请注意 - blur，focus和change不会冒泡）

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

在时间测量方面，您可以检查元素之间事件经过的时间。

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这样的公司提供了漂亮的图形用户界面，使其变得更加简单。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接