关于前端埋点的第一次尝试

1.首先是最简单的通过自定义指令的方式，来上报点击量

在自己自定义指令的文件中，不会自定义指令的同学，可以自己去vue官网看一下，我写这个之前也是现学的，之前一直不会这个东西。

算了简单的给你们写一下吧，先新建一个directives放在utlil文件夹下，在index.js中写入以下代码

export default (Vue) => {
    Vue.directive('stat', {
        bind (el, binding) {
            el.addEventListener('click', () => {
                const data = binding.value;
                console.log("data", data)
                let Params = {
                    //数据埋点参数
                    userName: data.desc
                }
                //这个是上报接口
                setPoint(Params)
            }, false);
        }
    });
 }

然后在main.js中引入，

import directives from 'utils/directives'
Vue.use(directives)

v-stat用法

 <div class="title" v-stat="{type:'logo',desc:'点击logo'}">点击上报</div>

2.路由跳转记录页面停留时长

利用beforeEach来实现

//获取开始时间
let startTime = Date.now();
//定义一个获取用户的函数
const get_userinfo = (to, from) => {
  //获取当前时间
  let currentTime = Date.now();
  let Brow_history = {
    preUrl: from.path,
    preTitle: from.meta.title,
    currentUrl: to.path,
    currentTitle: to.meta.title,
    prePage_browTime: parseInt((currentTime - startTime) / 1000) + "s",
  };
  console.log(Brow_history);
  console.log(
    "用户由 ",
    from.path,
    " 页面 跳转到 ",
    to.path,
    " 页面，在 ",
    from.path,
    " 页面停留了 ",
    currentTime - startTime,
    "毫秒。转换成秒数约为：",
    parseInt((currentTime - startTime) / 1000)
  );
  //初始化开始时间
  startTime = Date.now();
  //上报接口
  setPoint(Brow_history)
  console.log("======== 分割线 ========");
};
router.beforeEach((to, from, next) => {
  //匹配不到路由表 404
  if (to.matched.length === 0) {
    next({
      path: '/404',
    })
  } else {
  //统计方法
    get_userinfo(to, from);
    next();
  }
})

3.对于刷新和关闭页面的情况，在app.vue中监听beforeunload

created() {
    window.addEventListener('beforeunload', this.test)
  },
  mounted() {},
  methods: {
    test(e) {
      let Params = {
        //数据埋点参数
        url: e.target.URL,
        remark: parseInt(e.timeStamp / 1000)
      }
      console.log('刷新', Params.remark)
        //上报接口
      setPoint(Params)
    },
  },
  destroyed() {
    window.removeEventListener('beforeunload', this.test)
  },

第一次玩前端埋点，后续有深入研究在更新，小菜鸡一枚，写的不对的麻烦大家指正