vue项目实现埋点操作，记录用户浏览时间

需求分析：需要记录用户浏览页面的行为。
包括：
点击时，记录当前所在页面的地址、标题、元素名称。
浏览页面，记录上个页面的地址，记录当前页的地址、标题、浏览时间。

具体实现

点击事件，我是通过Vue的自定义指令来实现。

废话不多说直接上代码：
1、首先我在我的项目中创建一个directive文件。

文件中具体代码

import Vue from "vue";
// 自定义埋点指令
Vue.directive("track", {
  //钩子函数，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  /*
   * el:指令所绑定的元素，可以用来直接操作 DOM
   * binding：一个对象，包含以下 property:
   *   name：指令名，不包括 v- 前缀。
   *   value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
   *   expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
   *   arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
   *   modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
   * vnode：Vue 编译生成的虚拟节点
   */
  bind: (el, binding, ) => {
    
    if (binding.value) {
      //这里参数是根据自己业务可以自己定义
      let params = {
        currentUrl: binding.value.currentUrl,
        actionType: binding.value.actionType,
        title: binding.value.title,
        // preUrl: binding.value.preUrl,
        frontTriggerType: binding.value.triggerType,
        // businessCode: binding.value.businessCode,
        behavior: binding.value.behavior,
        // service: "xxx",
      };
      //如果是浏览类型，直接保存
      if (binding.value.triggerType == "browse") {
        console.log("browse", params);
        //调用后台接口保存数据
        // api.eventTrack.saveEventTrack(params);
      } else if (binding.value.triggerType == "click") {
        //如果是click类型，监听click事件
        el.addEventListener(
          "click",
          () => {
            console.log("click", params);
            //调用后台接口保存数据
            // api.eventTrack.saveEventTrack(params);
          },
          false
        );
      }
    }
  },
});

2、将文件引入main.js。
3、在需要的地方调用指令。

<a-menu-item key="/info/table" v-track="{triggerType:'click', title:'首页',currentUrl: $route.path,behavior:'点击表格按钮'}"> 表格 </a-menu-item>
<a-menu-item key="/info/myEcharts" v-track="{triggerType:'click', title:'首页',currentUrl: $route.path,behavior:'点击myEcharts按钮'}"> myEcharts </a-menu-item>

可以看到输出，操作成功。

页面浏览事件

通过在router文件中，通过beforeEach钩子函数实现的，

//获取开始时间
let startTime = Date.now();
//定义一个获取用户的函数
const get_userinfo = (to, from, token) => {
//获取当前时间
  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",
  };
  if(token){
    Brow_history.user = JSON.parse(sessionStorage.getItem("user"));
  }
  console.log(Brow_history);
  console.log(
    "用户由 ",
    from.path,
    " 页面 跳转到 ",
    to.path,
    " 页面，在 ",
    from.path,
    " 页面停留了 ",
    currentTime - startTime,
    "毫秒。转换成秒数约为：",
    parseInt((currentTime - startTime) / 1000)
  );
  //初始化开始时间
  startTime = Date.now();
  console.log("======== 分割线 ========");
};

router.beforeEach((to, from, next) => {
  NProgress.start();
  if (to.meta.title) {
    //判断是否有标题
    document.title = to.meta.title;
  }
  if (to.meta.requireAuth == true) {
    const token = getToken();
    //需要登录权限进入的路由
    if (token) {
    //调用刚才定义的函数
      get_userinfo(to, from, token);
      next();
    } else {
      Message.error("未登录");
      next({ name: "login" });
    }
  } else {
    get_userinfo(to, from);
    //不需要登录权限
    next();
  }
  // next();
});

最后，看到页面输出，操作成功。