【JavaScript】获取页面停留时间并提交
花了点时间研究了下JavaScript获取页面停留时间并提交的方法，小结一下。
《页面停留时间为什么为0》中介绍Google Analytic的算法是：当发现一个访问者进入一个网站访问了第一个页面时，会记录下他的访问时间。等到他访问第二个页面时，记录下第二个时间，用第二个时间和第一个时间的差值作为这个访问者在第一个页面的停留时间。 以此类推，每个页面的停留时间就是用户访问下个页面时的时间减去他访问这个页面时的时间，并加入到这个页面总的停留时间中。 这个方法在诸多统计方法里，是最简单的，也比较合理，并且计算量最小。 但有个问题，就是用户访问的最后一个页面， 它没有下一个页面，那么怎么计算它的停留时间呢？ 用户访问的最后一个页面的停留时间被认为是0。
下面是自己google一番后找到的两种实现方法。原理相同，皆是在页面加载后JS记录一个开始时间，在离开页面时（跳转到别的页面或是页面刷新，不包括页面关闭）记录结束时间，减一下就是页面停留时间，利用最简单的异步提交方式提交数据。
方法一代码如下：1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript获取页面停留时间并提交-1</title>
<script language=JavaScript>
var start = new Date();;
var end;
window.onbeforeunload = function(){
end = new Date();
var len = (end.getTime() - start.getTime()) / 1000;
var img = new Image();
img.src = "log.php?visitlength=" + len + "&visitpage=1.html";
}
</script>
</head>
<body>
<h2>JavaScript获取页面停留时间并提交-1</h2>
<a href="1.html">JavaScript获取页面停留时间并提交-1</a><br /><br />
<a href="2.html">JavaScript获取页面停留时间并提交-2</a><br /><br />
<a href="http://witmax.cn">晴枫</a>
</body>
</html>
方法二代码如下：2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript获取页面停留时间并提交-2</title>
<script language=JavaScript>
var start;
var end;
function load() {
start=new Date();
}
function unload() {
end=new Date();
var len = (end.getTime() - start.getTime()) / 1000;
var img = new Image();
img.src = "log.php?visitlength=" + len + "&visitpage=2.html";
}
</script>
</head>
<body onload="load()" onunload="unload()">
<h2>JavaScript获取页面停留时间并提交-2</h2>
<a href="1.html">JavaScript获取页面停留时间并提交-1</a><br /><br />
<a href="2.html">JavaScript获取页面停留时间并提交-2</a><br /><br />
<a href="http://witmax.cn">晴枫</a>制作
</body>
</html>
服务器端采用PHP记录提交的数据，代码如下：log.php
<?php
$visittime = date("Y-m-d H:i:s");
$visitlength = $_GET['visitlength'];
$visitpage = $_GET['visitpage'];
$log = file_get_contents("log.txt");
file_put_contents("log.txt", $log."\n".$visittime ." " .$visitlength ." " .$visitpage );
?>
以上两种方法效果相同，缺陷也是一样，就是通过关闭标签页的方式关闭页面不会提交数据，暂未找到更好的解决方案。
打包了下源码，需要的点击 [download id="27" format="3"] 下载
标签： Javascript
还没有人抢沙发呢~