H5端记录页面停留时间
开端
最近公共号内嵌的H5项目上有个需求,要记录个别页面的页面停留时间,后端已经写好接口,只要把页面的停留时间传递给后端就可以了。
思路
一开始我的思路是进入页面的时候记录一个开始时间,离开页面的时候获取一个离开时间,然后相减,把得到的停留时间通过接口传给后端
//计算停留时间
const countStandTime = () => {const startTime = localStorage.getItem('startTime'); //获取开始时间戳const lastTime = new Date().valueOf() //获取结束时间戳const standingTime = Math.floor((lastTime - startTime)/1000) //页面停留时间...调用接口
};
useEffect(() => { localStorage.setItem('startTime', new Date().valueOf()); //本地缓存开始时间return () => {countStandTime()localStorage.setItem('startTime', ''); //清空停留时间};
}, []);
问题
1.刷新页面会缺失一段时间
但是这样的话,如果页面刷新了,useEffect返回的函数并不会调用,开始时间会重置为刷新页面的时间,导致缺失一段时间,所以我在最开始判断startTime有没有值,如果有值的话就计算停留时间调用一次接口,相当于刷新之前完成了一次停留的事件,刷新之后再重新计算停留时间
//计算停留时间
const countStandTime = () => {......调用接口
};
useEffect(() => {const startTime = localStorage.getItem('startTime');startTime && countStandTime()localStorage.setItem('startTime', new Date().valueOf()); //本地缓存开始时间return () => {countStandTime()localStorage.setItem('startTime', ''); //清空停留时间};
}, []);
2.直接关闭页面,停留时间未记录
又有个问题,如果我直接关闭页面的话,这样写是不会触发调用接口的,于是我通过监听window的beforeunload事件,调用接口
//计算停留时间
const countStandTime = () => {......调用接口
};
useEffect(() => {...const listener = (ev) => {countStandTime()};window.addEventListener('beforeunload', listener); return () => {...window.removeEventListener('beforeunload', listener);};
}, []);
这样在页面关闭之前会触发beforeunload事件,调用countStandTime函数计算停留时间并发送给后端
3.微信浏览器内直接关闭页面,停留时间未记录
这样写在web端是可以的,但是我在手机上的微信中测试的时候,我发现关闭页面beforeunload函数并没有触发
在网上查了一下,要用监听pagehide事件并且将接口请求改成同步,这个我试了一下,可以触发pagehide事件,但是调用接口仍然失败
而且微信左上角关闭的按钮我也没有找到监听事件
最终方案
我和老大讨论了几种关于这种情况的解决方案,最后决定将在页面关闭事件中不再请求接口,而是本地缓存开始时间和结束时间,并且在全局的layout中判断有没有开始时间和结束时间,有的话就请求一次接口
//计算停留时间
const countStandTime = (startTime,endTime) => {const standingTime = Math.floor((endTime - startTime)/1000) //页面停留时间...调用接口
};
useEffect(() => {const listener = (ev) => {localStorage.setItem('endTime', JSON.stringify(referenceDate));};window.addEventListener('pagehide', listener); return () => {countStandTime()localStorage.setItem('startTime', ''); //清空停留时间localStorage.setItem('endTime', ''); //清空停留时间window.removeEventListener('pagehide', listener);};
}, []);
//全局layout文件
//计算停留时间
const countStandTime = (startTime,endTime) => {const standingTime = Math.floor((endTime - startTime)/1000) //页面停留时间...调用接口
};
useEffect(() => {const startTime = localStorage.getItem('startTime');const endTime = localStorage.getItem('endTime');if (startTime && endTime) {countStandTime(startTime,endTime)}}, []);
这样其实还存在一个问题,如果关闭页面以后,这一次的停留记录并不会马上记录,要等到再次进入这个项目才会调用接口记录上次直接关闭页面的停留时间。
虽然这个并不是最优方案,但是至少能解决问题。如果你有更好的方案,欢迎和我沟通。
H5端记录页面停留时间相关推荐
- php 当前页面停留时间,PHP 记录页面停留时间
PHP 记录页面停留时间 首先在要监控的页面添加JS如下 var dt1 = new Date(); window.onbeforeunload = function(){ var dt2 = new ...
- vue 商城浏览足迹_vue 移动端记录页面浏览位置的方法
记录一下本次项目我使用的方法,有更简单便捷的方法,欢迎交流 描述: 假设有a b c 页面 从a页面 到 b页面 ,b页面到c页面 b到c页面的时候需要记录当前b的浏览位置,c返回到b的时候滚动到上次 ...
- php记录页面停留时间,PHP_PHP记录页面停留时间的方法,本文实例讲述了PHP记录页面停 - phpStudy...
PHP记录页面停留时间的方法 本文实例讲述了PHP记录页面停留时间的方法.分享给大家供大家参考,具体如下: 首先在要监控的页面添加JS如下 var dt1 = new Date(); window.o ...
- 小程序记录页面停留时间
小程序记录页面停留时间 小程序记录页面停留时间的传统做法,每个页面的onshow开始计时,onhide和onUnload停止计时,但每个需要加载的页面都要调用一遍方法,比较麻烦,现可以在app.js ...
- vue项目进行前端埋点,记录页面停留时间
数据埋点在现在的项目开发中都是不较比常见的,尤其是在电商公司,数据的统计分析尤为重要,通过数据分析可以提升用户的购买体验,方便运营和产品调整销售策略等等.埋点就是网站分析的一种常用的数据采集方法. 目 ...
- vue埋点 记录页面停留时间
vue记录使用日志 页面停留时间 import API from '@/modules/system/api/api_userTime' const router = new Router({mode ...
- php统计在一个页面停留时间,php记录页面停留时间的代码
首先在要监控的页面添加js,如下. var dt1 = new Date(); window.onbeforeunload = function(){ var dt2 = new Date(); va ...
- 使用localStorage统计页面停留时间
function statisticsStay(){console.log(localStorage.getItem('testSecond'));var second = 0;//开启定时器记录页面 ...
- 移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题 单位问题 肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...
最新文章
- MySQL时间慢了八个小时
- 没有这 29 款插件的 Chrome 是没有灵魂的!
- SAP Cloud for Customer的前世今生
- 实现BUG自动检测 - ASP.NET Core依赖注入
- 管理系统中计算机应用怎么自学,有自学的没,管理系统中计算机应用上机题。...
- html5+php调用android手机图片,html5+exif.js+canvas+php实现手机上传图片,图片损坏无法打开...
- Qt工作笔记-打开指定文件夹
- Python编程教程:用tkinter写个密码器
- 0011-绝对值函数
- 电子罗盘电磁干扰_车载电子罗盘中的一种新型抗干扰设计
- Flash CS6 专业版破解教程、Flash CS6 激活序列号、破解补丁
- 微信公众号代运营的的技巧有哪些(6)
- python3 输出中文、日文等等乱码问题的解决办法
- html 英文逗号,英语写作中不可小觑的五大错误 逗号别乱用
- MySQL5.7乱码问题
- php下载文件并重命名,通过php下载文件并重命名
- 沃柑文案,水果店沃柑促销文案
- 如何认识巨杉数据库SequoiaDB整体架构?
- Mybatis中的<![CDATA[ ]]>作用
- Mar. 6, 15:00-17:00, 1493, Strichartz analysis for Schrodinger and wave equation I by Chong Chen
热门文章
- ce认证怎么申请 如何申请CE证书
- 大咖云集!人大金仓受邀参加第十三届航空航天数字化建设合作峰会
- 解决“无法定位序数***于动态链接库iertutil.dll上”的问题
- SpringBoot传输XML格式
- php设置二级域名泛解析,泛域名解析配合.htaccess实现二级域名功能
- 短线选股的四大核心要素
- 学习笔记:SDVOE,使用SDN的方式进行高清无损的音视频传输,SDN的又一应用,AV/IT融合
- Oracle RAC One node
- 免费物流轨迹查询 对接接口
- 你需要这样的一个“Ta”来“保护”你——家庭NAS存储服务器