JS 监听用户页面访问&页面关闭并进行数据上报操作
JS 监听用户页面访问&页面关闭操作并进行数据上报
前言
最近在做安全方面的项目,有个需求是在用户访问页面和关闭页面的时候,发送对应的数据。
刚拿到需求的时候,觉得没啥东西,init
的时候发送一次,页面 unload
的时候发送一次就行了,很简单,后面开发了一下,又根据当前项目,发现没这么简单
一、需求背景
1、项目需求
用户在页面访问时发送数据到后台,页面关闭时也发送数据到后台。
2、需求解析
很简单的一句话
但是我们前面说了,没有这么简单,那是因为我们的项目比较复杂
项目是一个庞大的项目,内部有好多子系统,子系统是通过 iframe 内嵌的
点击
nav
模块进入到子系统,当前页面的hash
不会改变,只会改变location.pathname
和document.title
,但是这两个改变有没有事件监听到点击进入子系统时,也需要对之前的模块进行关闭上报和当前模块的访问上报
iframe
内嵌的项目不需要单独上报,在top
层进行上报即可iframe
内嵌的项目单独通过URL
访问,则和当前项目一样,需要访问上报和关闭上报
3、需求概括
经过分析,整体需求分为如下几个点:
第一次进入页面时触发页面访问
刷新当前页面时触发页面访问
新 tab 进入页面时触发页面访问
当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问
关闭页面时触发页面关闭
二、技术要点
主要包含以下几点:
cookie
存储sessionStorage
存储addEventListener
事件监听navigator.sendBeacon
数据发送
1、Cookie 存储
使用 cookie
主要是因为项目的 domain
都一样,存储不同页面的 title
、href
、referrer
等数据
2、SessionStorage 存储
这个主要是对在当前 tab
页下的跳转进行判断,用来区分是否首次进入当前 tab
3、addEventListener 事件监听
事件监听,注意是用来监听 unload
事件。
4、navigator.sendBeacon 数据发送
这个我们后面在水一篇文章,单独讲讲,本期只讲用法
navigator.sendBeacon()
方法可用于通过 HTTP
POST
将少量数据异步传输到 Web
服务器。
4.1. 语法
navigator.sendBeacon(url);
navigator.sendBeacon(url, data);
4.2. 参数
4.2.1. url
url
参数表明 data
将要被发送到的网络地址。
4.2.2. data 可选
data
参数是将要发送的 ArrayBuffer
、ArrayBufferView
、Blob
、DOMString
、FormData
或 URLSearchParams
类型的数据。
4.3. 返回值
当用户代理成功把数据加入传输队列时,sendBeacon()
方法将会返回 true
,否则返回 false
。
三、需求实现
1、实现思路
1.1. 第一次进入页面
无
session
无cookie
调用
urlDetectChange
函数触发
openPage()
进行页面访问上报设置
session
字段setTimeout
轮询,设置cookie
字段,监听URL
变化
1.2. 刷新当前页面
有
session
有cookie
触发页面访问上报
setTimeout
轮询,监听URL
变化
1.3. 点击 nav 进入其他模块
有
session
有cookie
setTimeout
轮询,当前document
中的title
和href
与cookie
中的不一致时,进行之前页面关闭上报和当前页面访问上报设置新的
cookie
值继续
setTimeout
轮询,监听URL
变化
1.4. 新 tab 进入页面
有
cookie
无session
触发页面访问上报
设置新的
cookie
继续
setTimeout
轮询,监听URL
变化
1.5. 关闭 tab
- 触发
unload
监听事件 - 进行页面关闭上报
2、页面访问->页面关闭流程图
3、页面访问&页面关闭数据上报流程图
4、数据上报
/**
* 上报接口
* @param {object} data 上报接口参数
* @returns {boolean} sendBeacon 接口返回信息
*/
export const sendBeaconMessage = (data: object): boolean =>
window.navigator.sendBeacon(
'xxx',
JSON.stringify(data)
)
5、设置 cookie 的值
// Cookies 使用 js-cookie
/**
* 设置 cookie 值
* 设置 href、pageTitle、referrer 字段
* key 为 ACCESS_CLOSE_COOKIE_NAME
* domain 为 '.xxx.com'
*/
export const setAccessPageCookie = () =>
Cookies.set(
'ACCESS_CLOSE_COOKIE_NAME',
JSON.stringify({
href: location.href,
pageTitle: document.title,
referrer: document.referrer
}),
{ domain: '.xxx.com', expires: 30 }
)
6、页面访问发送消息
/**
* 页面访问发送消息
* @param {object} data 上报接口参数
* 设置 sessionStorage 的值,
*/
export const openPageSendBeacon = async (data: object) => {
sessionStorage.setItem('ACCESS_CLOSE_SESSION_NAME', 'ISTRUE')
const sendBeaconSusscess = sendBeaconMessage(data)
// 打印 sendBeaconSusscess 的值
console.log(
'%c client:sendDataToRemote use sendBeacon access page: %o',
'color: green;',
sendBeaconSusscess
)
}
7、页面关闭发送消息
/**
* 页面关闭发送消息
* @param {object} data 上报接口参数
*/
export const closePageSendBeacon = async (data: object) => {
const sendBeaconSusscess = sendBeaconMessage(data)
// 打印 sendBeaconSusscess 的值
console.log(
'%c client:sendDataToRemote use sendBeacon close page: %o, ',
'color: red;',
sendBeaconSusscess
)
}
8、URL 改变进行监听&页面关闭监听
/**
* URL 改变事件
*/
export const urlDetectChange = () => {
const accessPageData = Cookies.get('ACCESS_CLOSE_COOKIE_NAME')
? JSON.parse(Cookies.get('ACCESS_CLOSE_COOKIE_NAME'))
: null
const sessionAccessData = sessionStorage.getItem('ACCESS_CLOSE_SESSION_NAME')
// 第一次进入页面 和 新 tab 进入页面
if (!accessPageData || !sessionAccessData) {
openPageSendBeacon({})
}
setTimeout(() => {
if (
accessPageData &&
location.href !== accessPageData.href &&
document.title !== accessPageData.pageTitle &&
sessionAccessData
) {
// 点击 nav 进入其他模块
closePageSendBeacon({})
openPageSendBeacon({})
}
setAccessPageCookie()
urlDetectChange()
}, 1000)
}
// 加这个是针对 iframe 内部的项目不进行监听,只在 top 层进行数据上报
if (window.top === window.self) {
// 页面访问上报 刷新页面
sessionStorage.getItem('ACCESS_CLOSE_SESSION_NAME') && openPageSendBeacon({})
urlDetectChange()
window.addEventListener('unload', () => closePageSendBeacon({}))
}
四、总结
- 页面访问&页面关闭数据上报能清楚的掌握用户的使用数据,对营销活动或者画像分析很有帮助
- 整体没有难点,就是不同项目不同分析
- 如果你的项目是
hash
改变,那就可以针对hash
进行监听 - 主要就是使用
navigator.sendBeacon
进行可靠的数据传输