pagehide统计H5页面的访问时长

本文介绍了如何利用pagehide事件来统计H5页面的访问时长,尤其是在iOS 13+和其他特定设备上,由于pagehide不支持同步/异步请求,作者建议采用请求一张图片的方式来实现离开时的统计。文章提供了两种思路:一是通过接口A记录进入和离开的时间;二是前端直接计算时间差。推荐使用第一种思路,以确保准确性和兼容性。在Vue.js环境中,作者给出了相关的实现代码。
摘要由CSDN通过智能技术生成
  • 需求:统计页面的访问时长
  • 看似简单,实则磨难重重,最关键的是获取离开页面的时机,回退/前进/关闭都算离开,在离开之前要请求接口才能完成统计,此处借助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(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值