Zah*_*ain 10 javascript database tracking web
我正在尝试跟踪我自己管理的网站上的用户互动.通过跟踪我的意思是,我想跟踪用户按下的按钮或小部件,以及用户花费的时间等等.在我开始编写Javascript代码之前,我只想了解什么是最佳选项.做这些事情和可能的陷阱.
这个问题发布已经有一段时间了，但是我一直在研究一个简单的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 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);
对于时间测量，您可以检查元素上的事件之间经过的时间。
| 归档时间： |
|
| 查看次数： |
12675 次 |
| 最近记录： |