前端里常见的埋点行为有哪些？

常见埋点行为

点击触发埋点

绑定点击事件，当点击目标元素时，触发埋点上报。

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);


参考资料
[1]HTTP POST: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/POST

[2]异步: https://developer.mozilla.org/zh-CN/docs/Glossary/Asynchronous

[3]XMLHttpRequest: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

谢谢分享！

建议这位朋友可以以自己的专业知识去360问答社区（http://wenda.so.com/）相关分类中去帮助他人，赢取金币，兑换实物并从中得到助人的快乐！