Fatal编程技术网
  • javascript/
  • Javascript 跟踪网站上的用户交互

Javascript 跟踪网站上的用户交互

javascript database

Javascript 跟踪网站上的用户交互,javascript,database,tracking,Javascript,Database,Tracking,我试图跟踪我自己管理的网站上的用户交互。通过跟踪，我的意思是，我想跟踪用户按下的按钮或小部件，以及用户花费的时间和时间等。在我开始在Javascript上编写代码之前，我只是想知道做这些事情的最佳选项和可能的陷阱 如果您不需要从服务器返回任何值，ajax会有点开销——我会使用图像ping（使用脚本作为源创建图像元素，并使用您想要发送的任何参数） 对于事件，将它们绑定到文档并检查事件目标（注意-模糊、聚焦和更改不冒泡） 对于时间测量，您可以检查元素上事件之间经过的时间。我建议您查看类似的内容。集成

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

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

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

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

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

$("#my_button").click(function() {
  // This sends us an event every time a user clicks the button
  mixpanel.track("Button clicked"); 
});
您可以自己浏览文档

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

这个问题发布已经有一段时间了，但我一直在开发一个简单的JavaScript模块来实现这一点

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

这是一个和一个

关于代码，下面是一个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 interactions=新的interactions({
互动：没错，
interactionElement：“someElement someOtherElement”，
interactionEvents:[“mousedown”]，
转换：对，
conversionElement:“转换”，
转换事件：[“mouseup”]，
端点：'/usage/interactions'，
异步：true
});
该体系结构允许您通过多个实例化轻松跟踪多个元素，允许您自定义将不同交互发送到哪些端点。这允许在将数据保存到数据库之前，对任何服务器端预处理进行清晰的分离

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

var elementsToTrack=[
{
元素：“cssClass1”，
事件：[“mouseup”、“touchend”]，
端点：“/interactions/c1”
}, 
{
元素：“cssClass2”，
事件：[“mouseup”]，
端点：“/interactions/c2”
},
{ 
元素：“cssClass3”，
事件：[“mouseup”]，
端点：“/interactions/c3”
}
];
for（var i=0；i
最后，它非常轻巧（约5KB缩小），并且易于扩展到大多数需要

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

当然，它希望你在你的应用程序中使用谷歌分析，但它有一个免费的版本，你可以使用。检查一下。

我认为你的问题有点宽泛。您可以使用不同的技术来实现您的目标。监听事件的方法是jQuery，存储数据的方法有PHP或Python等。还有omniture、comscore等第三方js工具，可以在整个站点上进行更精细的跟踪。我不确定这是否是YouTunks的选择！我已经有一个MySQL的后端数据库和运行在Python上的框架。我只是想得到一个基本的跟踪工作流程。例如，单击一个按钮可能会触发一个ajax调用，同时异步执行正常任务。我如何做到这一点。你能举个例子吗？ 
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
    });
}