精华内容
下载资源
问答
我要提问
  • js统计在页面停留时间
    千次阅读
    2021-01-21 13:46:15

    js计时当前页面停留时长

    一个JavaScript库可用于准确计时用户浏览当前网页的时间，而无需考虑空闲时间（用户停止交互）和最小化标签或切换窗口的时间。

    项目地址

    更多相关内容

  • JS计算网页停留时间代码

     2020-10-26 00:19:38
    主要介绍了JS计算网页停留时间的具体实现,需要的朋友可以参考下
    收起

  • js统计页面停留时长

     千次阅读 2021-01-20 09:19:06
    页面停留时间简称为Tp 是网站分析中的一个指标 用于反映用户在某些页面的停留时间的长短 我们可以把页面的生命周期分为三个动作 进入 活跃状态切换 离开 一、如何监听页面的进入和离开 对于常规页面的 ...

    前言

    页面停留时间简称为Tp 是网站分析中的一个指标 用于反映用户在某些页面的停留时间的长短
    我们可以把页面的生命周期分为三个动作 进入 活跃状态切换 离开

    一、如何监听页面的进入和离开

    对于常规页面的 首次加载 页面关闭 刷新 等都可以通过 window.onload 和 window.onbeforeunload 来监听 页面的进入和离开 浏览器的前进和后退通过 pageshow和 pagehide处理

    对于单页面应用 的内部跳转 可以转化为俩个问题
    监听路由变化 判断URL是否为不页面

    监听路由变化

    路由变化的本质都会调用Histtory.pushState()或 History.replaceState()
    通过 popstate 事件能解决一般的问题 因为他只会在浏览器前进后退的时候触发 调用 hittory.pushState() or history.replaceState() 不会触发
    这个时候需要 Monkeypeatch 解决 运行时重写 history.pushState 和 history.replaceState 方法

    let _wr =  function (type) {  
  let orig = window.history[type]
  return  function () {
    let rv = orig.apply(this, arguments)
    let e = new Event(type.toLowerCase())
    e.arguments = arguments
    window.dispatchEvent(e)
    return rv
  }
}
window.history.pushState = _wr('pushState')  
window.history.replaceState = _wr('replaceState')
window.addEventListener('pushstate',  function (event) {})  
window.addEventListener('replacestate',  function (event) {})

    hashHistory的实现是基于hash变化 hash变化可以通过hashchange来监听

    判断URL是否为不同页面

    1. 客户端定义
    new Tracer({  
  rules: [
    { path: '/index' },
    { path: '/detail/:id' },
    { path: '/user', query: {tab: 'profile'} }
  ]
)
    1. 数据分析平台
      相关事件整理
      在这里插入图片描述
    2. Page Visivility API
      一个网页的可见状态 可以通过 Page Visivility API 获取 比如用户切换浏览器tab 最小化窗口 电脑睡眠 系统会派发 单签页面可见状态变化的visibilitychange事件 然后在事件绑定函数中通过document.hidden
      或 document.visibilityState 读取当前状态
    document.addEventListener('visibilitychange',  function (event) {  
  console.log(document.hidden, document.visibilityState)
})
    什么时候上报数据
    1. 页面离开时上报
      对于页面刷新或者关闭窗口触发的操作可能会照成数据丢失
    2. 下次打开页面时上报
      会丢失历史访问记录中的最后一个页面数据

    单页面应用 最好即时上报

    收起
    展开全文
    web

  • js计算在页面停留时间

     万次阅读 2017-06-08 20:05:09
    js计算页面停留时间_www.jbxue.com 替换原有的 --> 之间--> var ap_name = navigator.appName; var ap_vinfo = navigator.appVersion; va 
    <!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>js计算页面停留时间_www.jbxue.com</title>
  <script type="text/javascript" src="jquery.js"></script>
 </head>
 <body οnlοad="init(); window.setTimeout('show_secs()',1);">  
    <!-- 用<body οnlοad="init(); window.setTimeout('show_secs()',1);">替换原有的<body> -->  
    <!--将以下代码加入html的<body></body>之间-->  
        <script language="javascript">  
              
            var ap_name = navigator.appName;  
            var ap_vinfo = navigator.appVersion;  
            var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf('(')));// 获取版本号
            var time_start = new Date();  
            var clock_start = time_start.getTime();  
            var dl_ok=false;  
            function init (){  
            if(ap_name=="netscape" && ap_ver>=3.0)  
                dl_ok=true;   
                return true;  
            }  
			//已经打开页面多少秒
            function get_time_spent (){   
                var time_now = new Date();  
                return((time_now.getTime() - clock_start)/1000);   
            }  
            function show_secs (){  // show the time user spent on the side           
                var i_total_secs = Math.round(get_time_spent());   
                var i_secs_spent = i_total_secs % 60;  
                var i_mins_spent = Math.round((i_total_secs-30)/60);//四舍五入，超60s，大于0.5，四舍五入就是1min   
                var s_secs_spent = "" + ((i_secs_spent>9) ? i_secs_spent : "0" + i_secs_spent);//改显示格式：个位数-> 0+个位数，如7->07
                var s_mins_spent ="" + ((i_mins_spent>9) ? i_mins_spent : "0" + i_mins_spent);  
                document.fm0.time_spent.value = s_mins_spent + ":" + s_secs_spent;  //把值放入form中name为time_spent的input中
                window.setTimeout('show_secs()',1000);   //每隔1s刷新一次input里的值
            }  
             
        </script>  
        <form name="fm0" οnsubmit="0">  
            <font color="#888888" size="-1">您在本网页的停留时间:</font>  
            <input type="text" name="time_spent" size=7 οnfοcus="this.blur()">  
        </form>  
    </body>  
</html>

    以上完整代码在页面按“分：秒”的格式显示，每秒刷新一次。

    当然你可以再次基础上在做改进，拓展其他业务：比如，到指定时间是弹出对话框给予提示或者弹出广告，甚至在关闭窗口或者浏览器的之前瞬间把对应网站浏览时间入库或缓存下来。

    更完整的例子：

    <!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>js计算页面停留时间_www.jbxue.com</title>
  <script type="text/javascript" src="jquery.js"></script>
 </head>
 <body οnlοad="init(); window.setTimeout('show_secs()',1);"  οnbefοreunlοad="return myFunction()">  
    <!-- 用<body οnlοad="init(); window.setTimeout('show_secs()',1);">替换原有的<body> -->  
    <!--将以下代码加入html的<body></body>之间-->  
        <script language="javascript">  
             
            var ap_name = navigator.appName;  
            var ap_vinfo = navigator.appVersion;  
            var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf('(')));// 获取版本号
            var time_start = new Date();  
            var clock_start = time_start.getTime();  
            var dl_ok=false;  
            function init (){  
            if(ap_name=="netscape" && ap_ver>=3.0)  
                dl_ok=true;   
                return true;  
            }  
			//已经打开页面多少秒
            function get_time_spent (){   
                var time_now = new Date();  
                return((time_now.getTime() - clock_start)/1000);   
            }  
            function show_secs (){  // show the time user spent on the side           
                var i_total_secs = Math.round(get_time_spent());   
                var i_secs_spent = i_total_secs % 60;  
                var i_mins_spent = Math.round((i_total_secs-30)/60);//四舍五入，超60s，大于0.5，四舍五入就是1min   
                var s_secs_spent = "" + ((i_secs_spent>9) ? i_secs_spent : "0" + i_secs_spent);//改显示格式：个位数-> 0+个位数，如7->07
                var s_mins_spent ="" + ((i_mins_spent>9) ? i_mins_spent : "0" + i_mins_spent);  
                document.fm0.time_spent.value = s_mins_spent + ":" + s_secs_spent;  //把值放入form中name为time_spent的input中
                window.setTimeout('show_secs()',1000);   //每隔1s刷新一次input里的值
            }  
            //参考：http://blog.csdn.net/davislien/article/details/47685831

			//----------------------beforeunload使用方法一：（需要去掉body标签里的beforeunload="myFunction()"）------------------------------------
			//在关闭页面时弹出确认提示窗口
//$(window).bind('beforeunload', function(){    
//	//alert(09999);//凡是alert在此函数里被阻止，Blocked alert('09999') during beforeunload.
//	s1(2000);
//	
//	console.log("您在网站"+ document.URL+"停留时间（分：秒）："+document.fm0.time_spent.value);
//
//     window.event.returnValue="1.确定要退出本页吗？";  
//   
//});
	
	//----------------------beforeunload使用方法二：（不去掉body标签里的beforeunload="myFunction()"也可以，还是执行此方法二，而不是方法三）------------------------------------
	//测试：谷歌浏览器：刷新时只执行最后一行代码，关闭页面时三行代码都执行
window.onbeforeunload = function(event){    
   //alert(09999);//凡是alert在此函数里被阻止，Blocked alert('09999') during beforeunload.
	s1(2000);
	var arr = [0, 1, 2, 3];
localStorage.setItem("num", arr);//存储数据
console.log(localStorage.getItem("num"));
	console.log("您在网站"+ document.URL+"停留时间（分：秒）："+document.fm0.time_spent.value);
	if(window.is_confirm !== false){
     window.event.returnValue="2.确定要退出本页吗？";  //刷新页面时只执行此行 
	 }
};

	//----------------------beforeunload使用方法三：（需要在body标签里的加上beforeunload="myFunction()"）------------------------------------
	//测试：谷歌浏览器：刷新时只执行最后一行代码，关闭页面时三行代码都执行
		 function myFunction(){    
	//alert(09999);//凡是alert在此函数里被阻止，Blocked alert('09999') during beforeunload.
	s1(2000);
	
	console.log("您在网站"+ document.URL+"停留时间（分：秒）："+document.fm0.time_spent.value);

     window.event.returnValue="3.确定要退出本页吗？";  //刷新页面时只执行此行
   
};	


//js中的暂停方法一
	function sleep(numberMillis) { 
var now = new Date(); 
var exitTime = now.getTime() + numberMillis; 
while (true) { 
now = new Date(); 
if (now.getTime() > exitTime) 
return; 
} 
}
function s(){
sleep(2000);
alert("您在网站"+ document.URL+"停留时间（分：秒）："+document.fm0.time_spent.value);
}
//js中的暂停方法二
function s1(sec){
setTimeout(function(){
alert("您在网站"+ document.URL+"停留时间（分：秒）："+document.fm0.time_spent.value);
},sec);
}
        </script>  
        <form name="fm0" οnsubmit="0">  
            <font color="#888888" size="-1">您在本网页的停留时间:</font>  
            <input type="text" name="time_spent" size=7 οnfοcus="this.blur()">
			<input type="button" value="暂停2秒" οnclick="s1(2000)" />
			<a href="http://blog.csdn.net/davislien/article/details/47685831">参考链接</a>
        </form>  
    </body>  
</html>


    收起
    展开全文

  • 采用JavaScript统计用户在网页的停留时间代码

     2012-12-08 16:53:47
    采用JavaScript统计用户在网页的停留时间代码，简单易懂
    收起

  • uniapp 统计页面停留时间

     千次阅读 2021-09-28 17:53:09
    每个页面都要统计，因此全局处理的方法较好，采用全局混入的解决方式，onHide和onUnload分别处理页面隐藏和页面卸载的情况，onShow确保每次进入页面重新获取时间 1. residenceTime.js let enterTime = ''; let ...

    每个页面都要统计，因此全局处理的方法较好，采用全局混入的解决方式，onHide和onUnload分别处理页面隐藏和页面卸载的情况，onShow确保每次进入页面重新获取时间

    1. residenceTime.js

    let enterTime = ''; 
let outTime = '';
let stayTime = '';
export default {
  data() {
    return {
     
    };
  },
	onShow(){
		// 用户进入时间
		enterTime = new Date();
		console.log(enterTime);
	},
	onHide(){
		// 用户退出时间
		outTime = new Date();
		//停留时间(毫秒)
		stayTime = outTime.getTime() - enterTime.getTime();
		let curRoute = this.$mp.page.route;
		console.log('页面隐藏'+curRoute+':'+stayTime);
	},
	onUnload() {
		// 用户退出时间
		outTime = new Date();
		//停留时间(毫秒)
		stayTime = outTime.getTime() - enterTime.getTime();
		let curRoute = this.$mp.page.route;
		console.log('页面卸载'+curRoute+':'+stayTime);
	}
};

    2.main.js文件全局注入

    import residenceTime from '@/mixins/residenceTime.js'

Vue.mixin(residenceTime); //全局混入

    收起
    展开全文

  • js统计网页在线时间的脚本

     2020-10-30 11:42:50
    分析用户行为时,某网页停留时间可能会是个可参考的数据 由后台分析函数取一个合理值作为在线时间
    收起

  • 微信小程序页面停留时间统计

     千次阅读 2021-11-26 13:54:36
    收到一个需求，要统计一个用户在我们小程序的每个页面的停留时间。 初步想法，在页面的onShow事件里面，打一个开始的时间戳，然后在onHide里面再弄一个时间戳，两个一减，然后把得出来的数据，一提交，齐活。 BUT~，...
    收起
    es6

  • php记录页面停留时间的代码

     2021-05-08 15:16:58
    首先在要监控的页面添加js，如下。var dt1 = new Date();window.onbeforeunload = function(){var dt2 = new Date();var ms = dt2.getTime() - dt1.getTime();var img = new Image();img.src = 'log....
    收起

  • PHP记录页面停留时间的方法

     2020-10-22 14:59:34
    主要介绍了PHP记录页面停留时间的方法,涉及PHP结合js针对文件与时间的相关操作技巧,需要的朋友可以参考下
    收起

  • 如何精确统计页面停留时长

     千次阅读 2021-01-23 16:26:20
    基于上述背景，重新调研和实现了精确统计页面停留时长的方案，需要 兼容单页应用和多页应用，并且不耦合或入侵业务代码。 2、分析 我们可以把一个页面生命周期抽象为三个动作：「进入」、「活跃状态切换」、「离开」...
    收起
    web java 编程语言 css

  • vue埋点 记录在前端页面停留时间

     2021-12-06 17:46:39
    // 第一步：页面跳转后记录一下当前的时间 currentTime currentTime = Date.now() standingTime = parseInt((currentTime - startTime) / 1000) from.matched.forEach(routeItem => { pageName.push(routeItem.meta....
    收起

  • 前端js计算用户在网页的停留时间和用户是否在点击浏览的时间

     2021-04-24 15:41:29
    计算用户在网页的停留时间并且发送ajax：关键代码onbeforeunload是当页面用户刷新页面或者关闭时触发的事件请引入jquery还有需要将ajax设置成async:false,async 设置为 false，则所有的请求均为同步请求，在没有...
    收起

  • vue埋点 记录页面停留时间

     千次阅读 2021-10-23 19:21:14
    vue记录使用日志 页面停留时间 import API from '@/modules/system/api/api_userTime' const router = new Router({ mode: 'history', base: process.env.BASE_URL, scrollBehavior: () => ({ y: 0 }), ...
    收起
    开发语言 ecmascript

  • H5端记录页面停留时间

     2022-02-28 20:43:32
    最近公共号内嵌的H5项目上有个需求，要记录个别页面的页面停留时间，后端已经写好接口，只要把页面的停留时间传递给后端就可以了。 思路 一开始我的思路是进入页面的时候记录一个开始时间，离开页面的时候获取一...
    收起
    react

  • 如何精确统计用户在页面的停留时长？

     2020-11-10 13:53:22
    基于上述背景，重新调研和实现了精确统计页面停留时长的方案，需要 兼容单页应用和多页应用，并且不耦合或入侵业务代码。 2、分析 我们可以把一个页面生命周期抽象为三个动作：「进入」、「活跃状态切换」、「离开」...
    收起
    java web 编程语言 大数据

  • JS实现记录用户在网站的停留时间

     2020-09-18 18:34:43
    JS实现记录用户在网站的停留时间 今天给了一个需求让实现记录用户在当前页面进行操作的时间，如果两分钟之内没有进行操作就停止记时，直到再次操作时才开始继续记时。起初我自己用监听加定时器的方案实现，但是逻辑...
    收起

  • js 统计网站停留时间

     千次阅读 2018-12-05 15:00:37
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...统计网站停留时间&lt;/title&gt; &lt;script src="js/jquery-1.11.3.min.js"&gt;&lt;/script
    收起

  • vue项目进行前端埋点，记录页面停留时间

     千次阅读 2022-01-17 11:15:01
    数据埋点在现在的项目开发中都是不较比常见的，尤其是在电商公司，数据的统计分析尤为重要，通过数据分析可以提升用户的购买体验，方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据采集方法。 ...
    收起

  • 如何精准统计页面停留时长？

     2021-04-01 19:51:16
    点击上方“蓝色字体”，选择“设为星标”做积极向上的前端人！1.背景页面停留时间（Time on Page）简称 Tp，是网站分析中很常见的一个指标，用于反映用户在某些页面上停留时间的长短，...
    收起
    web java html 编程语言

  • 【Web技术】677- 如何精确统计页面停留时长

     2020-08-06 07:53:00
    来源：字节跳动技术团队https://mp.weixin.qq.com/s/eLPWGqR6hOYVrwfa3OEVMA01背景页面停留时间（Time on Page）简称 Tp，是网站...
    收起
    web 设计模式 编程语言

  • 小程序记录页面停留时间

     千次阅读 2020-08-17 17:43:02
    小程序记录页面停留时间 小程序记录页面停留时间的传统做法，每个页面的onshow开始计时，onhide和onUnload停止计时，但每个需要加载的页面都要调用一遍方法，比较麻烦
    收起

  • react利用useEffect记录用户在当前页面停留时长

     2022-01-05 10:49:25
    useEffect配合useRef记录用户在当前页面停留时长
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,777
精华内容 1,510
热门标签
关键字：

js统计在页面停留时间