JS统计页面访问时长

最新推荐文章于 2024-10-10 14:14:15 发布

星雪之域

最新推荐文章于 2024-10-10 14:14:15 发布

阅读量5.2k

点赞数 3

分类专栏： H5 vue单页面开发浏览器文章标签： H5 页面访问时长统计

本文链接：https://blog.csdn.net/mx_csdn/article/details/102663125

版权

本文介绍了在Vue单页面项目中如何统计页面访问时长，特别是在微信环境中。通过在路由meta属性中添加标记，结合App.vue的页面隐藏/关闭监听事件，以及针对安卓和iOS设备的差异性处理，实现了全面的访问时长记录。对于超链接跳转等无法监听的情况，还提供了解决方案。

摘要由CSDN通过智能技术生成

以vue单页面项目为例

1、在路由的meta属性中，给需要记录访问时长的页面添加hasViewTime属性，以便全局处理页面，代码如下：

{
   
	path: '路由地址',
	name: '页面模块名称',
	component: '页面模块',
	meta: {
   
		hasViewTime: true/false
	}
}

2、在页面主入口文件App.vue文件中，记录访问页面的初始数据，同时初始化页面隐藏/关闭时监听事件，代码如下：

data () {
   
	return {
   
		systemEnv: '' // 移动设备类型
	}
},
watch: {
   
	$route (to, from) {
   
		// 进入页面时，记录当前访问页面的浏览数据
        if (to.meta.hasViewTime) {
   
          localStorage.setItem('recordPageData', JSON.stringify({
   
            viewId: '', // 访问记录id
            name: to.name, // 访问页面名称标识
            startTime: new Date().getTime() // 本地访问页面的开始时间（时间戳）
          }))
        }
	}
},
mounted () {
   
	let userAgent = window.navigator.userAgent
	this.systemEnv = (userAgent.indexOf('iPhone') > -1 || userAgent.indexOf('iPad') > -1) ? 'iPhone' : 'Android'
	// 页面访问时长统计
    this.viewPageTimeFun()
},
methods: {
   
	addViewTime () {
   
		// 具体的记录页面访问时长的接口，就不附代码了
	},
	// 页面访问时长统计
     viewPageTimeFun () {
   
       // ******下次进入页面时，判断条件，发送请求，记录页面浏览数据******
       let recordPageData = localStorage.getItem('recordPageData') ? JSON.parse(localStorage.getItem('recordPageData')) : null

       if (recordPageData && recordPageData.viewId && recordPageData.viewTime) {
   
         // 发送请求
         this.addViewTime({
   
           VIEW_ID: recordPageData.viewId,
           VIEW_DURATION: recordPageData.viewTime
         }).then(res => {
   
           if (res.status === 'success') {