假设我有一个浏览器扩展，它运行用户访问的 JS 页面。
是否有“outLoad”事件或类似事件开始计数并查看用户在页面上花费了多长时间？
问问题
10590 次
7 回答
5
我假设您的用户打开一个选项卡，浏览一些网页，然后转到另一个网页，返回第一个选项卡等。您想计算用户花费的确切时间。另请注意，用户可能会打开网页并使其保持运行，但会离开。一个小时后回来，然后再次访问该页面。你不会想把他离开电脑的时间算作花在网页上的时间。为此，以下代码每 5 分钟执行一次文档检查。因此，您的实际时间可能会相差 5 分钟，但您可以根据需要调整间隔以检查焦点。另请注意，用户可能只是盯着视频超过 5 分钟，在这种情况下，以下代码不会计算在内。您将不得不运行智能代码来检查是否有闪存运行或其他东西。
这是我在内容脚本中所做的（使用 jQuery）：
$(window).on('unload', window_unfocused);
$(window).on("focus", window_focused);
$(window).on("blur", window_unfocused);
setInterval(focus_check, 300 * 1000);
var start_focus_time = undefined;
var last_user_interaction = undefined;
function focus_check() {
if (start_focus_time != undefined) {
var curr_time = new Date();
//Lets just put it for 4.5 minutes
if((curr_time.getTime() - last_user_interaction.getTime()) > (270 * 1000)) {
//No interaction in this tab for last 5 minutes. Probably idle.
window_unfocused();
}
}
}
function window_focused(eo) {
last_user_interaction = new Date();
if (start_focus_time == undefined) {
start_focus_time = new Date();
}
}
function window_unfocused(eo) {
if (start_focus_time != undefined) {
var stop_focus_time = new Date();
var total_focus_time = stop_focus_time.getTime() - start_focus_time.getTime();
start_focus_time = undefined;
var message = {};
message.type = "time_spent";
message.domain = document.domain;
message.time_spent = total_focus_time;
chrome.extension.sendMessage("", message);
}
}
于 2013-07-23T19:10:22.490 回答
3
onbeforeunload应该符合您的要求。它在页面资源被卸载（页面关闭）之前触发。
于 2013-07-23T07:38:07.040 回答
2
<script type="text/javascript">
function send_data(){
$.ajax({
url:'something.php',
type:'POST',
data:{data to send},
success:function(data){
//get your time in response here
}
});
}
//insert this data in your data base and notice your timestamp
window.onload=function(){ send_data(); }
window.onbeforeunload=function(){ send_data(); }
</script>
现在计算您的时间差异。您将获得用户在页面上花费的时间。
于 2013-07-23T07:37:59.217 回答
2
对于那些感兴趣的人，我在一个小型 JavaScript 库中做了一些工作，该库可以计算用户与网页交互的时间。它还有一个额外的好处，那就是更准确（虽然不是很完美）跟踪用户实际与页面交互的时间。它忽略用户切换到不同选项卡、空闲、最小化浏览器等的时间。
编辑：我已经更新了示例以包含当前的 API 使用情况。
其用法示例：
在您的页面中包含：
<script src="http://timemejs.com/timeme.min.js"></script>
<script type="text/javascript">
TimeMe.initialize({
currentPageName: "home-page", // page name
idleTimeoutInSeconds: 15 // time before user considered idle
});
</script>
如果您想自己向后端报告时间：
xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","ENTER_URL_HERE",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds();
xmlhttp.send(timeSpentOnPage);
TimeMe.js 还支持通过 websockets 发送计时数据，因此您不必尝试将完整的 http 请求强制到document.onbeforeunload事件中。
于 2015-01-31T20:27:16.763 回答
1
这start_time是当用户第一次请求页面并且您end_time在用户退出页面之前通过向服务器触发 ajax 通知来获得：
window.onbeforeunload = function () {
// Ajax request to record the page leaving event.
$.ajax({
url: "im_leaving.aspx", cache: false
});
};
keep_alive.aspx对于在同一页面上停留很长时间的用户（可以是空页面），您还必须保持用户会话处于活动状态：
var iconn = self.setInterval(
function () {
$.ajax({
url: "keep_alive.aspx", cache: false });
}
,300000
);
然后，您还可以通过检查（每次用户离开页面时）是否导航到外部页面/域来获取在网站上花费的时间。
于 2013-07-23T07:58:25.160 回答
0
重新审视这个问题，我知道这在 Chrome Ext 环境中没有多大帮助，但你可以打开一个 websock，它只会每 1 秒 ping 一次，然后当用户退出时，你知道如何精确到 1 秒他们在该站点上花费了很长时间，因为连接将断开，您可以随意逃脱。
于 2015-02-03T09:55:49.677 回答
0
试试active-timeout.js。它使用 Visibility API 检查用户何时切换到另一个选项卡或最小化浏览器窗口。
有了它，您可以设置一个计数器，该计数器一直运行到谓词函数返回一个假值：
ActiveTimeout.count(function (time) {
// `time` holds the active time passed up to this point.
return true; // runs indefinitely
});
于 2017-07-30T11:55:12.757 回答