计算用户浏览时长(微信浏览器)

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

最近公司提出这样的需求:希望能统计用户观看直播或录播的时间;

场景:从微信打开的浏览器

那就绞尽脑汁,开始干起 ╮(╯▽╰)╭

观看时长

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

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

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
    原文地址: https://blog.csdn.net/qq_42506969/article/details/99678946
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞