5

我想计算访问者在某个页面上花费的时间并将其存储在我的 MySQL 数据库中。

我想像这样在 window.onload 上启动一个计时器：

window.onload= startCount;
window.onunload= sendCount;

var b=0;
var y;
function startCount() {
    document.getElementById('livecount').innerHTML=b;
    b=b+1;
    y=setTimeout("startCount()",1000);
}

在访问者离开页面（window.onunload）后，我通过 XMLHttpRequest 将时间发送到 PHP 文件，该文件将其存储在我的数据库中：

function sendCount() {
    clearTimeout(y);    
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }  
xmlhttp.open("GET","count.php?q="+b,true);
xmlhttp.send();
}

问题是它并不总是有效。我会说它的效果就像我尝试它的 10 次中的 3 次一样。难道是没有足够的时间让PHP和SQL完全执行？

4

5 回答 5

4

由于 onunload 不可靠，我会考虑使用 AJAX 解决方案。我根本不是这方面的专家，但我脑海中浮现的想法是每隔一段时间就会对你的柜台发出一次提示。我不会每秒钟都ping你的柜台，因为这似乎太过分了。

我会将时间分解为您关心的持续时间，例如 <5 秒、<30 秒、<1 分钟、<5 分钟、5 分钟以上。

然后我会像这样写一段JavaScript：

window.onload = soCounter;

var iter=0;
var times=[0,5,30,60,300];  // Your duration choices

function doCounter() {

    sendCountPing(times(iter));

    iter++;

    if(iter < times.length) {
        setTimeout(doCounter, times[iter]*1000);
    }
} 

function sendCountPing(dur) {
    if (window.XMLHttpRequest)
    {  // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {  // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }  

    xmlhttp.open("GET","count.php?q="+b,true);
    xmlhttp.send();

}

诀窍是，对于每count.php?q=30一个被发送的，你需要从count.php?q=5计数中减去一个。这不必是程序化的，它很容易后处理。

澄清一下，如果您有 3 个访问者，一个花费 3 秒，一个花费 20 秒，一个花费 30 分钟，您会看到以下计数：

  0:  3   // 3 people spent at least 0 seconds
  5:  2   // 2 people spent at least 5 seconds
 30:  1
 60:  1
300:  1   // 1 person spent at least 5 minutes

说得通？

于 2010-11-29T21:15:05.377 回答
1

在 onload 处理程序运行时，页面正在被删除。我不确定您对 DOM 或其他服务的状态有什么保证，但您当然不能期望触发异步事件或超时。尽管不是标准的一部分，但今天的大多数（全部？）浏览器都提供了一个onbeforeunload挂钩，它的工作方式与其他事件处理程序大致相同，除了您也可以返回 false 以取消卸载（如果您选择）。

于 2010-11-30T03:57:12.207 回答
1

您可以按照建议设置一个计时器，它可以根据需要运行（每隔几秒钟左右），并将信息存储在一个 cookie（或多个 cookie）中。当您想要做的事情不仅仅是向用户显示值时，如果需要，您可以将此信息发送到服务器。因此，不要在每个周期都将其发送到服务器，只需在您想要对这些信息做某事时将其发送到服务器（例如向用户显示他在您网站的各个页面上花费的所有时间的列表）。

于 2010-11-30T03:59:01.537 回答
0

onunload 不是一种可靠的跟踪方式......好吧，几乎任何东西。例如参见http://www.google.com/support/forum/p/Google+Analytics/thread?tid=6496cd5d4b627c0e&hl=en

就解决问题而言，最好的方法是跟踪用户上次访问页面的时间。例如，每分钟从客户端调用一次跟踪器。像 Google Analytics 这样的分析系统实际上只是假设用户在提供的最后一页之后离开了。即，如果我阅读页面然后单击某些内容，它会刷新计数器。但是，如果没有后续命中发生，那就意味着我离开了。

于 2010-11-29T19:35:52.453 回答
0

另一种选择是将数据保存在 localStorage/cookie 中，并在用户下次访问网站时发送；假设用户留下或曾经返回您的网站。

最好使用Date()calc 而不是setInterval/setTimeout计算时间。
最好使用addEventListener而不是onload = func.

sendPreviousStats();
window.addEventListener('load',loadFunc);
window.addEventListener('unload',leaveFunc);

function loadFunc() {
    window.startTime = new Date();
}

function leaveFunc() {
    var msec = new Date().getTime()-window.startTime.getTime();
    var seconds = Math.round(msec/1000);
    localStorage.setItem('leaveSeconds',seconds);
}

function sendPreviousStats() {
    var duration = localStorage.getItem('leaveSeconds');
    if (duration !== null && duration !== undefined) {
        localStorage.removeItem('leaveSeconds');
        sendCountPing(duration);
    }
}
于 2015-11-24T12:00:57.640 回答