JS统计页面访问时长

以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') {
             let recordPageDataChange = localStorage.getItem('recordPageData') ? JSON.parse(localStorage.getItem('recordPageData')) : null
             if (recordPageDataChange && recordPageDataChange.viewId !== recordPageData.viewId) return
             localStorage.removeItem('recordPageData')
           }
         })
       }
       // ******下次进入页面时,判断条件,发送请求,记录页面浏览数据******

       // ******对页面的不可视状态(如:关闭、隐藏等)进行监听******
       // 为IOS设备监听做兼容
       if (this.systemEnv === 'iPhone') {
         window.addEventListener('pagehide', () => {
           let recordPageData = localStorage.getItem('recordPageData') ? JSON.parse(localStorage.getItem('recordPageData')) : null

           // 判断是否存在需要处理的页面
           if (recordPageData && recordPageData.viewId) {
             let startTime = recordPageData.startTime // 本地访问页面的开始时间(时间戳)
             let endTime = new Date().getTime() // 本地访问页面的结束时间(时间戳)
             let viewTime = endTime - startTime // 页面的访问时长(时间戳)

             localStorage.setItem('recordPageData', JSON.stringify({
               viewId: recordPageData.viewId, // 访问记录id
               name: recordPageData.name, // 访问页面名称标识
               viewTime // 页面的访问时长(时间戳)
             }))
             if (this.addViewTime) {
               this.addViewTime({
                 VIEW_ID: recordPageData.viewId,
                 VIEW_DURATION: viewTime
               }).then(res => {
                 if (res.status === 'success') {
                   localStorage.removeItem('recordPageData')
                 }
               })
             }
           }
         })
       }
       // 通用监听
       let hidden
       let visibilityChange
       if (typeof document.hidden !== 'undefined') {
         hidden = 'hidden'
         visibilityChange = 'visibilitychange'
       } else if (typeof document.msHidden !== 'undefined') {
         hidden = 'msHidden'
         visibilityChange = 'msvisibilitychange'
       } else if (typeof document.webkitHidden !== 'undefined') {
         hidden = 'webkitHidden'
         visibilityChange = 'webkitvisibilitychange'
       }
       document.addEventListener(visibilityChange, () => {
         let recordPageData = localStorage.getItem('recordPageData') ? JSON.parse(localStorage.getItem('recordPageData')) : null

         // 判断是否存在需要处理的页面
         if (recordPageData && recordPageData.viewId) {
           if (document[hidden]) {
             let startTime = recordPageData.startTime // 本地访问页面的开始时间(时间戳)
             let endTime = new Date().getTime() // 本地访问页面的结束时间(时间戳)
             let viewTime = endTime - startTime // 页面的访问时长(时间戳)

             localStorage.setItem('recordPageData', JSON.stringify({
               viewId: recordPageData.viewId, // 访问记录id
               name: recordPageData.name, // 访问页面名称标识
               viewTime // 页面的访问时长(时间戳)
             }))
             if (this.addViewTime) {
               this.addViewTime({
                 VIEW_ID: recordPageData.viewId,
                 VIEW_DURATION: viewTime
               }).then(res => {
                 if (res.status === 'success') {
                   localStorage.removeItem('recordPageData')
                 }
               })
             }
           }
         }
       }, false)
       // ******对页面的不可视状态(如:关闭、隐藏等)进行监听******
     }
}

以微信环境为例,这一部分的监听,主要是处理处理以下情况:
(1)点击微信左上角自带的关闭按钮;
(2)微信程序进入后台、或是通过手势滑动关闭微信程序;
(3)超链接跳转;

不能监听的情况
(1)页面超链接跳转;

设备差别说明和处理:
(1)安卓设备可通过visibilityChange监听以上情况;
(2)IOS设备通过visibilityChange监听以上情况,会时灵时不灵的,如果有效的话,以上情况都能监听;如若失效的话,以上情况皆不能监听(个人测试如此),故为IOS设备添加pagehide监听(这个能保证监听到点击微信左上角自带的关闭按钮)
(3)安卓设备的监听中能发送请求,IOS设备不能,故为兼容,做了下次进入发送请求的处理
监听方法说明详见:https://blog.csdn.net/mx_csdn/article/details/101674708

3、由于上面的监听无法监听到超链接跳转之类的页面离开,以及页面之间的路有跳转,故对具体的页面做处理,代码如下:

mounted () {
	this.addViewRecor().then(data => {
		let recordPageData = localStorage.getItem('recordPageData') ? JSON.parse(localStorage.getItem('recordPageData')) : null
		if (data.data.data && data.data.data.VIEW_ID && recordPageData) {
          recordPageData.viewId = data.data.data.VIEW_ID // 访问记录id
          // 缓存记录
          localStorage.setItem('recordPageData', JSON.stringify(recordPageData))
        }
	})
},
methods: {
	addViewRecord () {
		// 具体的请求,为页面生成一条访问记录,并返回记录id(),就不附代码了
	},
	addViewTime () {
		// 具体的记录页面访问时长的接口,就不附代码了
	},
	// 由于超链接跳转时,ios设备无法检测到,故对超链接跳转时,对页面浏览时长做单独处理
    hyperlinkJump (cb) {
      let recordPageData = localStorage.getItem('recordPageData') ? JSON.parse(localStorage.getItem('recordPageData')) : null
      let startTime = recordPageData.startTime // 本地访问页面的开始时间(时间戳)
      let endTime = new Date().getTime() // 本地访问页面的结束时间(时间戳)
      let viewTime = endTime - startTime // 页面的访问时长(时间戳)

      // 判断是否为微信环境,并发送请求
      if (recordPageData.viewId) {
        this.addViewTime({
          VIEW_ID: recordPageData.viewId,
          VIEW_DURATION: viewTime
        }).then(res => {
          if (res.status === 'success') {
            localStorage.removeItem('recordPageData')
          } else {
            localStorage.setItem('recordPageData', JSON.stringify({
              viewId: recordPageData.viewId, // 访问记录id
              name: recordPageData.name, // 访问页面名称标识
              viewTime // 页面的访问时长(时间戳)
            }))
          }
          cb && cb()
        }).catch(() => {
          localStorage.setItem('recordPageData', JSON.stringify({
            viewId: recordPageData.viewId, // 访问记录id
            name: recordPageData.name, // 访问页面名称标识
            viewTime // 页面的访问时长(时间戳)
          }))
          cb && cb()
        })
      } else {
        cb && cb()
      }
    }
},
beforeRouteLeave (to, from, next) {
    let recordPageData = localStorage.getItem('recordPageData') ? JSON.parse(localStorage.getItem('recordPageData')) : null
    let startTime = recordPageData.startTime // 本地访问页面的开始时间(时间戳)
    let endTime = new Date().getTime() // 本地访问页面的结束时间(时间戳)
    let viewTime = endTime - startTime // 页面的访问时长(时间戳)

    // 发送请求
    if (recordPageData.viewId) {
      this.addViewTime({
        VIEW_ID: recordPageData.viewId,
        VIEW_DURATION: viewTime
      }).then(res => {
        if (res.status === 'success') {
          localStorage.removeItem('recordPageData')
        } else {
          localStorage.setItem('recordPageData', JSON.stringify({
            viewId: recordPageData.viewId, // 访问记录id
            name: recordPageData.name, // 访问页面名称标识
            viewTime // 页面的访问时长(时间戳)
          }))
        }
        next()
      }).catch(() => {
        localStorage.setItem('recordPageData', JSON.stringify({
          viewId: recordPageData.viewId, // 访问记录id
          name: recordPageData.name, // 访问页面名称标识
          viewTime // 页面的访问时长(时间戳)
        }))
        next()
      })
    } else {
      next()
    }
 }

说明:hyperlinkJump 方法是在超链接跳转前调用的,安卓能检测得到超链接跳转,但IOS不能,故做此兼容

你可能感兴趣的:(H5,vue单页面开发,浏览器,H5,页面访问时长统计)