当前位置：首页 > news >正文

vue项目进行前端埋点，记录页面菜单停留时间

news 来源：原创 2024/5/21 0:57:51

主要采用代码埋点，分为以下两点：

命令式埋点
声明式埋点

一、命令式埋点

命令式埋点，顾名思义，开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页面ready时进行请求的发送。

// 页面加载时发送埋点请求
$(document).ready(function(){
   // ... 这里存在一些业务逻辑
   sendRequest(params);
});
// 按钮点击时发送埋点请求
$('button').click(function(){
   // ... 这里存在一些业务逻辑
   sendRequest(params);
});

可以很容易发现，这样的做法很有可能会将埋点代码侵入业务代码，这使整体业务代码变得繁琐，容易出错，且后续代码会愈加膨胀，难以维护。所以，我们需要让埋点的代码与具体的业务逻辑解耦，即声明式埋点，从而提高埋点的效率和代码的可维护性。

二、声明式埋点

点击埋点：自定义指令实现统计用户在应用内的每一次点击事件，如新闻的浏览次数、文件下载的次数、推荐商品的命中次数等。

在项目入口文件 main.js 中配置我们的自定义指令

Vue.directive('log', {
  bind(el, binding) {
    el.addEventListener('click', () => {
       Axios.post  //发送请求
    }, false);
  }
});

组件中配置使用v-log指令，加上详情参数就可以完成用户轨迹记录。

// caption表示埋点的模块；paras表示用户的行为
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button>

页面埋点：统计用户进入或离开页面的各种维度信息，如页面浏览次数（PV）、浏览页面人数（UV）、页面停留时间、浏览器信息等。

使用 vue-router 的 beforeEach 或者 afterEach 钩子上报数据，具体使用哪个最好是根据业务逻辑来选择。

/**页面埋点方案*/
let startTime = Date.now();
let currentTime;
router.beforeEach((to, from, next) => {
  if (to) {
    // 第一步：页面跳转后记录一下当前的时间 currentTime
    currentTime = Date.now();
    // 第二步：计算 currentTime - startTime 的 差值
    const user = JSON.parse(localStorage.getItem("sysUser"));
    const log = {
      当前用户: user.userId,
      当前页路由: from.name,
      当前页菜单名: from.name,
      目标页: to.name,
      开始时间: startTime,
      结束时间: currentTime,
      // "停留时间(ms)": currentTime - startTime,
      "停留时间(s)": parseInt((currentTime - startTime) / 1000),
    };
    console.table(log, "log");
    // 第三步：每次都要初始化一下 startTime
    startTime = Date.now();
  }
  next();
});