如何衡量一个页面上花费的时间?
我想测量用户在页面上花费的时间(以整数或分钟为单位)。 我知道有一个卸载事件,我可以触发他们离开页面时。 但如何得到他们已经在那里度过的时间?
如果您使用Google Analytics(分析),则会提供此统计信息,但我不确定它们是如何得到的。
如果你想推出自己的,你需要有一些AJAX请求发送到你的服务器进行日志logging。
jQuery有一个.unload(…)方法,你可以像这样使用:
var start; $(document).ready(function() { start = Date.getTime(); $(window).unload(function() { end = Date.getTime(); $.ajax({ url: "log.php", data: {'timeSpent': end - start} }) }); });
点击此处查看: http : //api.jquery.com/unload/
唯一需要注意的是,它使用了JavaScript的beforeunload事件,它并不总是有足够的时间来发出这样的AJAX请求,所以合理的,你将失去大量的数据。
另一种方法是定期轮询服务器的某种types的“STILL HERE”消息,可以更一致地处理,但显然更昂贵。
接受的答案是好的,但(作为替代)我已经把一些工作放到一个小的JavaScript库中,用户在网页上的时间有多长。 它有更多的准确性(但不是完美的)跟踪用户实际上与页面进行交互的时间。 它忽略了用户切换到不同的标签页,闲置,最小化浏览器等的时间。在接受的答案中build议的Google Analytics方法有缺点(据我所知),它只会检查您的请求是由您的域。 它将先前的请求时间与新的请求时间进行比较,并调用“在您的网页上花费的时间”。 它实际上并不知道是否有人正在查看您的网页,已经最小化浏览器,自上次加载您的网页以来,切换到3个不同的网页等。
编辑:我已经更新了示例,以包括当前的API使用情况。
其用法的一个例子:
包括在您的页面中:
<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
事件中。
我会说你最好的select是跟踪服务器每个会话ID的请求时间。 用户在最后一页上花费的时间是当前请求的时间与先前请求的时间之间的差值。
这将不会赶上用户访问的最后一页(即,当不会有另一个请求时),但是我仍然会采用这种方法,因为否则你必须在onunload
上提交一个请求,会非常容易出错。
我认为最好的方法是在onload中存储时间,并在cookies中卸载事件处理程序,然后在服务器端脚本中进行分析
除了Jason的回答之外,如果你不想使用库,这里有一小段代码应该可以做到这一点,当用户切换标签或者关注另一个窗口的时候,它会考虑这个问题。
let startDate = new Date(); let elapsedTime = 0; const focus = function() { startDate = new Date(); }; const blur = function() { const endDate = new Date(); const spentTime = endDate.getTime() - startDate.getTime(); elapsedTime += spentTime; }; const beforeunload = function() { const endDate = new Date(); const spentTime = endDate.getTime() - startDate.getTime(); elapsedTime += spentTime; // elapsedTime contains the time spent on page in milliseconds }; window.addEventListener('focus', focus); window.addEventListener('blur', blur); window.addEventListener('beforeunload', beforeunload);
根据正确的答案,我认为这不是最好的解决scheme。 因为根据jQuery文档:
卸载事件的确切处理因浏览器的版本而异。 例如,某些版本的Firefox在遵循链接时会触发事件,而在窗口closures时则不会。 在实际使用中,应该在所有支持的浏览器上testing行为,并与类似的beforeunload事件进行对比。
另一件事是你不应该在文件加载后使用它,因为时间减去的结果可能是假的。
所以更好的解决scheme是将它添加到<head>
部分末尾的onbeforeunload
事件中,如下所示:
<script> var startTime = (new Date()).getTime(); window.onbeforeunload = function (event) { var timeSpent = (new Date()).getTime() - startTime, xmlhttp= new XMLHttpRequest(); xmlhttp.open("POST", "your_url"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds(); xmlhttp.send(timeSpent); }; </script>
当然,如果你想使用空闲探测器来计算时间,你可以使用:
https://github.com/serkanyersen/ifvisible.js/
TimeMe是我粘贴在上面的包装的包装。
<body onLoad="myFunction()"> <script src="jquery.min.js"></script> <script> var arr = []; window.onbeforeunload = function(){ var d = new Date(); var n = d.getTime(); arr.push(n); var diff= n-arr[0]; var sec = diff/1000; var r = Math.round(sec); return "Time spent on page: "+r+" seconds"; }; function myFunction() { var d = new Date(); var n = d.getTime(); arr.push(n); } </script>