代码用例

<template>
  <div :class="$options.name">
    <el-button type="primary" @click="sendBeacon"
      >navigator.sendBeacon 请求埋点接口 发送json对象数据</el-button
    >
  </div>
</template>

<script>
export default {
  created() {
    // 当网页卸载关闭的时候，记录用户行为
    window.onunload  = (event) => {
      this.sendBeacon(); //关闭浏览器选项卡进行埋点记录 
    }; 
  },
  methods: {
    sendBeacon() {
      if (!navigator.sendBeacon) return;
      let data = JSON.stringify({
        ID: "adaba34fa4004ea699fac9ab473d1bfe",//用户行为触发受体对象资源ID
        用户行为类型: "行为枚举值常量",
        停留时长: 10 * 1000,//毫秒
        操作起始时间: "2024-01-26 14:56:42",
        操作结束时间: "2024-01-26 14:56:45",
      });
      navigator.sendBeacon(
        `API接口地址路径`,
        new Blob([data], { type: "application/x-www-form-urlencoded; charset=UTF-8" })
      );
    },
  },
};
</script>