前端里常见的埋点行为有哪些？
点击触发埋点绑定点击事件，当点击目标元素时，触发埋点上报。function clickButton(url, data) {navigator.sendBeacon(url, data)
}
页面停留时间上报埋点路由文件中，初始化一个startTime，当页面离开时通过路由守卫计算停留时间。let url = ''// 上报地址
let startTime = Date.now()
let currentTime = ''
router.beforeEach((to, from, next) => {
if (to) {
currentTime = Date.now()
stayTime = parseInt(currentTime - startTime)
navigator.sendBeacon(url, {time: stayTime})
startTime = Date.now()
}
})
错误监听埋点通过监听函数去接收错误信息。vue错误捕获app.config.errorHandler = (err) => {
navigator.sendBeacon(url, {error: error.message, text: 'vue运行异常' })
}
JS异常与静态资源加载异常window.addEventListener('error', (error) => {
if (error.message) {
navigator.sendBeacon(url, {error: error.message, text: 'js执行异常' })
} else {
navigator.sendBeacon(url, {error: error.filename, text: '资源加载异常' })
}
}, true)
请求错误捕获axios.interceptors.response.use(
(response) => {
if (response.code == 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
(error) => {
// 返回错误逻辑
navigator.sendBeacon(url, {error: error, text: '请求错误异常' })
}
);
内容可见埋点通过交叉观察器去监听当前元素是否出现在页面// 可见性发生变化后的回调
function callback(data) {
navigator.sendBeacon(url, { target: data[0].target, text: '内容可见' })
}
// 交叉观察器配置项
let options = {};
// 生成交叉观察器
const observer = new IntersectionObserver(callback);
// 获取目标节点
let target = document.getElementById("target");
// 监听目标元素
observer.observe(target);
参考资料HTTP POST: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/POST异步: https://developer.mozilla.org/zh-CN/docs/Glossary/AsynchronousXMLHttpRequest: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
页:
[1]