事件 | 描述 |
click | 点击事件,打开页面 |
search | 搜索事件 |
download | 下载事件 |
save | 修改、保存 |
view | 查看事件、查看数据详情 |
refund | 退款事件 |
create | 新增事件 |
login | 登录事件 |
logout | 退出事件 |
export default ({ app, store }) => {let startTime = Date.now() // 刷新页面,记录时间戳let endTime = ''app.router.afterEach((to, from) => { // 后置守卫endTime = Date.now() // 准备切换页面,记录时间戳if(from.fullPath !== "/"){ // from.fullPath 页面停留时长console.log('time:', (endTime - startTime) / 1000)app.store.dispatch('submitTracker');}routerHandle(to.path, store, true, to);startTime = Date.now() // 页面加载完成,记录时间戳});window.addEventListener('beforeunload', e => { // 页面刷新 或关闭 都会执行这个事件// 打开后会弹窗阻止继续执行// e.preventDefault() // e.returnValue = ''app.store.dispatch('submitTracker');});
};
nuxt.config.js
plugins: [{src: '../m-front-common/pc/plugins/viewer'},
]
七、判断页面是刷新还是关闭
function () {let beforeUnloadTime = 0, unloadTime = 0// 窗口关闭或刷新时候的操作window.addEventListener('beforeunload', (event) => {beforeUnloadTime = new Date().getTime()});window.addEventListener('unload', (event) => {unloadTime = new Date().getTime()console.log(unloadTime - beforeUnloadTime )// 刷新时onbeforeunload与onunload的时间差一般都远大于5ms,从而区分关闭还是刷新if (unloadTime - beforeUnloadTime <= 5) {console.log('关闭')} else {console.log('刷新')}})
}
八、visibilitychange事件,浏览器tab状态
document.addEventListener('visibilitychange',function(e){console.log(document.visibilityState);let state = document.visibilityStateif(state == 'hidden'){console.log(document.visibilityState,'用户离开了');}if(state == 'visible'){console.log(document.visibilityState,'用户回来了');}
});
九、接口请求的统计
统计接口调用次数
接口是在哪个 子系统+导航菜单+业务菜单+接口 调用的(上下文)
每调用一个后端接口,伴随着调用一个“上报接口”,上报数据
if (!apiUrl.includes('config/manage/byKeys')) { // 请求成功后,判断不是业务接口,是上报接口,调用上报store.dispatch('submitTracker');
}
return Promise.resolve(response)// 经过测试,接口调用成功
// 在axios封装中的context中可以获取到store、axios等信息
// const { $axios, store: $store } = context
十、自定义指令实现埋点
如何通过Vue自定义指令实现前端埋点详析 / 张生荣
十一、navigator.sendBeacon(页面关闭也会完成请求)
浏览器引入的sendBeacon方法,sendBeacon发出的是异步请求,但是请求是作为浏览器任务执行的,与当前页面是脱钩的。因此该方法不会阻塞页面卸载流程和延迟后面页面的加载。
navigator.sendBeacon(url, data);
XHR方法需要使用AJAX 通信改成同步发送,即只有发送完成,页面才能卸载。
navigator.sendBeacon 页面关闭也会完成请求
1、部署私有化 Matomo 服务。
其中部署私有化服务只需要下载 Matomo 的程序并上传到服务端,然后打开访问地址就可以使用引导程序部署服务,包括检测服务器环境是否符合要求,填写数据库信息,创建管理账号等,具体参考官方文档。
2、在需要流量统计ide页面上引入追踪器。
vue-matomo - npm npm网站有针对nuxt项目的介绍,好评。 过程记录: 记录一、刷新页面属于当前页面吗? 个人认为属于,因为没有离开当前页面,或者为了更好的使用当前页面,至少是心理上的。 刷新页面会影响页面停留时长的统计吗?应该影响吗? 我觉得不应该影响 为了避免影响,可以把相关的时间存储起来,比如放在cookie,,对于单页面应用来说应该是可以的,,多页面应用需要区分,, 页面停留时间如果很短,比如小于1s 是否上报?个人认为上报 记录二、前端、后端配合做埋点 前端埋点系统 - 知乎记录三、用户访问轨迹,用户画像
待补充
参考链接: vue 监听网页关闭/浏览器关闭事件_vue页面关闭事件_Never Know 1 的博客-CSDN博客