Question

假设我有一个浏览器扩展程序，用于运行用户访问的JS页面。

是否有“outLoad”事件或类似事件开始计算并查看用户在页面上花了多长时间？

Answer 1

我假设您的用户打开一个标签，浏览一些网页，然后转到另一个网页，返回到第一个标签页等。您想要计算用户花费的确切时间。另请注意，用户可能会打开网页并使其保持运行但只是消失。一小时后回来，然后再次访问该页面。您不希望将他离开计算机的时间计算在网页上花费的时间。为此，下面的代码每5分钟进行一次docus检查。因此，您的实际时间可能会偏离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);
    }
}

Answer 2

onbeforeunload应符合您的要求。它在页面资源被卸载（页面关闭）之前触发。

Answer 3

<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>

现在计算您的时间差异。您将获得用户在页面上花费的时间。

Answer 4

对于那些感兴趣的人，我已经将一些工作放在一个小的JavaScript库中，该库会计算用户与网页交互的时间。它具有更准确（但并不完美）跟踪用户实际与页面交互的时间的额外好处。它会忽略用户切换到不同选项卡，空闲，最小化浏览器等的时间。

编辑：我已更新示例以包含当前的API使用情况。

http://timemejs.com

其用法示例：

包含在您的信息页中：

<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事件。

Answer 5

start_time是用户首次请求页面时，您通过在用户退出页面之前向服务器发出ajax通知来获取end_time：

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

然后，您还可以通过检查（每次用户离开页面时），如果他导航到外部页面/域，您可以在网站上花费时间。

Answer 6

重新审视这个问题，我知道这对Chrome Ext env没什么帮助，但是你可以打开一个除了每1秒ping一次然后当用户退出时，你知道的一个websock精度为1秒他们在网站上花了多长时间，因为连接将会死亡，你可以随意逃脱。

Answer 7

试试active-timeout.js。它使用Visibility API检查用户何时切换到另一个选项卡或最小化浏览器窗口。

有了它，你可以设置一个运行的计数器，直到谓词函数返回一个假值：

ActiveTimeout.count(function (time) {
    // `time` holds the active time passed up to this point.
    return true; // runs indefinitely
});

是否可以知道用户在页面上花了多长时间？

7 个答案: