Question

我想跟踪访问者阅读网页的时间。如果他们标签离开或最小化窗口，则时间不应计入页面上的时间，直到他们再次查看标签。

我认为有必要对javascript和服务器端工作进行一些组合。

我正在努力解决的几个问题：

将此信息存储在数据库中的最佳方法是什么？
如何使用Javascript以合理的准确度捕获页面上的时间？我是否存储“已加载页面”，“用户空闲”，“用户已退回”，“已卸载页面”等事件，然后单独处理数据库中的所有事件以在页面上显示时间？

Answer 1

我已将一些工作放入一个小型JavaScript库中，该库会计算用户在网页上的时长。它具有更准确（但并不完美）跟踪用户实际与页面交互的时间的额外好处。它忽略了用户切换到不同标签，闲置，最小化浏览器等的时间。建议的Google Analytics方法有缺点（据我所知），它只检查您的域处理新请求的时间。它将之前的请求时间与新的请求时间进行比较，并调用“您在网页上花费的时间”＃39;。它实际上并不知道是否有人正在查看您的页面，最小化浏览器，将标签切换到自上次加载页面以来的3个不同的网页等。

https://github.com/jasonzissman/TimeMe.js

其用法示例：

加载页面时

document.onload = function() {
  TimeMe.setIdleDurationInSeconds(30);
  TimeMe.setCurrentPageName("my-home-page");
  TimeMe.initialize();  
}

检索在网页上停留的时间，并在用户离开您的网页时将其发送到您的服务器：

window.onbeforeunload = function (event) {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","ENTER_URL_HERE",false);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds();
    xmlhttp.send(timeSpentOnPage);
};

Answer 2

首先，您需要检测用户何时离开选项卡或处于非活动状态。发生这种情况时，启动计时器，当它们返回时，停止计时器。使用setTimeout / setInterval计算时间可能会因为阻塞而无法进行，因此我根据日期时间的实际差异为自己制作了一个准确的javascript计时器：https://gist.github.com/4600726

所以你的代码看起来像这样：

timer = new Timer;

window.addEventListener('focus', function() {
    timer.start();
}, false);

window.addEventListener('blur', function() {
    timer.stop();
    // send timer.msecs() to the server maybe??
    // if so, also call timer.reset();
}, false);

window.addEventListener('beforeunload', function() {
    timer.stop();
    // send timer.msecs() to the server via jquery post, or better yet websocket
}, false);

然后你可以用timer.secs（）获得经过的时间。我想这取决于您的偏好您希望将信息发送到服务器的频率。你可以在模糊时做到这一点。

另一种选择可能是判断没有鼠标悬停意味着不活动。启动计时器，然后执行setTimeout，然后在窗口的mousemove事件中取消setTimeout并启动另一个setTimeout，之后停止计时器。

就将数据发送到服务器而言，我可能会选择在模糊时发送它，当然还有在卸载之前。我首选的方法是使用socket.io，因为它很快且始终连接，因此您可以使用它来实时跟踪大量用户事件，但您可以只对服务器进行ajax调用。如果您只是将它们作为迷你用户会话发送，{user： userId ，page： pageId ，elapsedTime： msecs }，那么您可以汇总进行分析时，服务器端的数据。

如何在页面上捕获访问者的时间

2 个答案: