如何统计一个浏览者在某页面的停留时间

如何统计一个浏览者在某页面的停留时间,并要把它录入数据库存储以待日后查询?

解决该问题目前本人的思路:在浏览器打开的时候设置一个时间开关并且记录下打开页面的时间,而离开或关闭浏览器的时候计算那时的时间值,并把后者的时间减去前面预先设置的初始值,这样的差就是页面停留时间了。

那么现在需要解决的问题是,我们在页面打开时间如何设置时间值?我们需要用何种方式监测到用户在何时离开页面?这两个问题我们都可以利用JavaScript方式解决。

我们在页面初始化前利用JS设置:
pageOpen = new Date();

我们可以利用onbeforeunload事件监测到用户离开浏览器页面。

那么我们如何将数据在onbeforeunload事件的时候录入到数据库呢?这里需要一点技巧。我们利用一般操作方式无法将数据入库,因为在该事件发生时操作也差不多完成了,既使FireFox或是其它浏览器能行,可是IE浏览器却不成。原因在于操作的同步或是异步的关系。如果操作同步了,但是数据添加又来不及操作,那么数据就无法入库了。因而我们采用了Ajax方式进行操作,以异步添加数据的方式来解决该问题。代码如下:

function createXMLHttpRequest() {
 if (window.XMLHttpRequest) {
  return new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  return new ActiveXObject("Microsoft.XMLHttp");
 }
}
pageOpen = new Date();
function GetResidentTime() {
 pageClose = new Date();
 minutes = (pageClose.getMinutes() - pageOpen.getMinutes());
 seconds = (pageClose.getSeconds() - pageOpen.getSeconds());
 time = (seconds + (minutes * 60)); 
 var xmlHttp = createXMLHttpRequest();
 xmlHttp.open("POST", "page.cfm?ResidentTime="+time, false);
 xmlHttp.send(null); 
}
window.onbeforeunload = GetResidentTime;

注意那个粗体的false哦,那里可以能否成功添加数据的关键,因为我们采用了异入操作。

猜你喜欢

转载自yuanq-20.iteye.com/blog/1330814