pagehide统计H5页面的访问时长

  • 需求:统计页面的访问时长
  • 看似简单,实则磨难重重,最关键的是获取离开页面的时机,回退/前进/关闭都算离开,在离开之前要请求接口才能完成统计,此处借助pagehide方法,但它也是个坑,亲测ios13+以及其他部分机型,在pagehide方法中不支持同步/异步请求。 可以借助百度统计的方式,在离开的时候请求一张图片,图片的src就是结束统计要请求的get接口地址。
  • 思路1: 一进页面就请求接口A,传入type=1标记进入,离开时请求接口A,type=2标记离开。由接口去计算具体的访问时长
  • 思路2: 一进页面前端就保存当前系统时间,离开前再次获取系统时间,计算时间差并传给接口
    推荐思路1,一是怕前端的时间不准,二是万一pagehide有些手机不支持呢也不至于丢失该访问记录,由接口定时结束即可,vue相关代码如下:
export default {
	data () {
		return: {
			tickApiUrl: '', // 统计接口地址
			tickData: {}
		}
	},
	created () {
		this.getPageDetail()
	},
	methods: {
		getPageDetail () {
		   this.API.getPageDetail({id: 11}).then(() => {
		   		// 获取文章详情数据等
		   		// 在此处可能为tickData添加一些接口所需参数
		   		// 统计
		   		this.tickAction()
		   })
		},
		onTickStart () {
		  this.tickData.type = '1' // 类型 1:开始访问 2:结束访问
		  this.API.overTicktack(this.tickData).then(() => {}).catch(() => {
		    console.log('监听进入,统计时长接口失败')
		  })
		},
		onTickEnd () {
		   this.tickData.type = '2'
		   // bulidURL方法是将参数对象拼接在请求地址上,注意接口必须支持get请求
		   const URL = this.TOOL.bulidURL(this.tickApiUrl, this.tickData)
		   const img = new Image()
		   const rndId = '_img_' + Math.random()
		   window[rndId] = img // 全局变量引用
		   img.onload = img.onerror = function () {
		     window[rndId] = null // 删除全局变量引用
		   }
		   img.src = URL
		 },
		 tickAction () {
		 	// 访问计时开始 
			this.onTickStart()   // 根据需求自己实现该方法
			// 监听访问结束
		    window.addEventListener('pagehide', this.onTickEnd, false)
		 }

	}
}

        
展开阅读全文
©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值