计算用户浏览时长（微信浏览器）

最新推荐文章于 2023-01-30 16:52:57 发布

Bovia-zdd

最新推荐文章于 2023-01-30 16:52:57 发布

阅读量2k

点赞数 2

分类专栏：微信项目文章标签： js 微信浏览器累计时长浏览时间

本文链接：https://blog.csdn.net/qq_42506969/article/details/99678946

版权

微信项目专栏收录该内容

0 篇文章 0 订阅

订阅专栏

关于计算用户浏览微信浏览器时长问题

观看时长

最近公司提出这样的需求：希望能统计用户观看直播或录播的时间；
场景：从微信打开的浏览器
那就绞尽脑汁，开始干起 ╮(╯▽╰)╭

观看时长

这里要求没那么严格，我们需要简单记录：用户开始时间、用户离开时间。开始时间好记录，但是结束时间呢？

结束情况我粗略分了以下几类：

1.微信客户端浏览器：

直接关闭浏览器（左上角关闭按钮），如图↓
点击后退按钮
手动直接销毁
转到后台

2.微信pc端浏览器：

关闭页面，如图↓
后退，如图↓

微信客户端浏览器

先定义两个全局变量：

var startTime, quitTime;//开始时间，结束时间

用户进入，先获取用户开始时间：

function signInTime() { //获取开始时间
	startTime = formatDateTime(new Date());
}

监听后退js代码（参考某位大佬的）：

pushHistory();
window.addEventListener("popstate", function (e) {
    //后退后执行操作
	quitTime = formatDateTime(new Date());//获取用户离开时间
	sendTimes(startTime, quitTime); //发送请求
			
	WeixinJSBridge.call('closeWindow');
	if (typeof (WeixinJSBridge) != "undefined") {
		WeixinJSBridge.call('closeWindow');
	} else {
		if (navigator.userAgent.indexOf("MSIE") > 0) {
			if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
				window.opener = null;
				window.close();
			} else {
				window.open('', '_top');
				window.top.close();
			}
		} else if (navigator.userAgent.indexOf("Firefox") > 0) {
			// window.location.href = 'about:blank ';
			window.history.go(-2);  
		} else {
			window.opener = null;
			window.open('', '_self', '');
			window.close();
		}
	}
}, false);
window.onbeforeunload = function () {
	return;
}

function pushHistory() {
	var state = {
		title: "title",
		url: ""
	};
	window.history.pushState(state, "title", "");
}

监听页面（左上角按钮）关闭、手动销毁js代码：

//监听页面关闭、销毁
window.addEventListener('pagehide', () => {
	quitTime = formatDateTime(new Date());//获取用户离开时间
	sendTimes(startTime, quitTime);//发送请求
})

获取时间之后，发送给后台

function sendTimes(startTime, quitTime) { //结束时发送数据给服务器
			$.ajax({
				url: "http://api",
				type: 'get',
				data: {
					loginTime: startTime,
					logoutTime: quitTime,
				},
				async: false,
				dataType: "json",
			})
		}

这里要说一下，当微信浏览器切换至后台的情况，这种情况下，是监听不到的，但如果用户后续主动销毁，是可以捕捉到的。还有手机定时自动销毁，这种情况还没有测试，这种情况应该可以忽略不计了吧。

微信pc端浏览器（以 QQ浏览器为例）

因为微信浏览器的内核是QQ浏览器X8内核，所以我做测试的时候直接用的qq浏览器
上面的方法，直接兼容PC端浏览器，这里就不一一列举了

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>直播</title>
	</script>
	<script>
		var startTime, quitTime;
		function signInTime() { //获取
			startTime = formatDateTime(new Date());
		}
		function sendTimes(startTime, quitTime) { //结束时发送数据给服务器
			$.ajax({
				url: "http://api",
				type: 'get',
				data: {
					loginTime: startTime,
					logoutTime: quitTime,
				},
				async: false,
				dataType: "json",
			})
		}
		//监听页面关闭
		window.addEventListener('pagehide', () => {
			quitTime = formatDateTime(new Date());//获取离开时间
			sendTimes(startTime, quitTime);
		})
		//监听页面后退
		pushHistory();
		window.addEventListener("popstate", function (e) {
			quitTime = formatDateTime(new Date());//获取离开时间
			sendTimes(startTime, quitTime);//发送请求
			WeixinJSBridge.call('closeWindow');
			if (typeof (WeixinJSBridge) != "undefined") {
				WeixinJSBridge.call('closeWindow');
			} else {
				if (navigator.userAgent.indexOf("MSIE") > 0) {
					if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
						window.opener = null;
						window.close();
					} else {
						window.open('', '_top');
						window.top.close();
					}
				} else if (navigator.userAgent.indexOf("Firefox") > 0) {
					// window.location.href = 'about:blank ';
					window.history.go(-2);  
				} else {
					window.opener = null;
					window.open('', '_self', '');
					window.close();
				}
			}
		}, false);
		window.onbeforeunload = function () {
			return;
		}
		function pushHistory() {
			var state = {
				title: "title",
				url: ""
			};
			window.history.pushState(state, "title", "");
		}
		var formatDateTime = function (date) { //之间转换格式
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			m = m < 10 ? ('0' + m) : m;
			var d = date.getDate();
			d = d < 10 ? ('0' + d) : d;
			var h = date.getHours();
			h = h < 10 ? ('0' + h) : h;
			var minute = date.getMinutes();
			minute = minute < 10 ? ('0' + minute) : minute;
			var second = date.getSeconds();
			second = second < 10 ? ('0' + second) : second;
			return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
		};
	</script>
</head>
<body onload="signInTime()">
	//……
</body>
</html>

解决了这个问题，跟大家分享下，第一次写，如果有哪里写的不好，欢迎指出。大家共勉

Bovia-zdd

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
计算用户浏览时长（微信浏览器）

关于计算用户浏览微信浏览器时长问题观看时长微信客户端浏览器微信pc端浏览器（以 QQ浏览器为例）完整代码：最近公司提出这样的需求：希望能统计用户观看直播或录播的时间；场景：从微信打开的浏览器那就绞尽脑汁，开始干起 ╮(╯▽╰)╭观看时长这里要求没那么严格，我们需要简单记录：用户开始时间、用户离开时间。开始时间好记录，但是结束时间呢？结束情况我粗略分了以下几类：1.微信客户端浏览器：...
复制链接

扫一扫

专栏目录