基于uniapp做按钮埋点功能的处理

主要通过自定义指令实现,通过使用自定义指令来拦截点击事件,从而收集按钮的一些属性存起来然后到一定数量时候请求后端

<el-button id="btn" type="info" v-trackClick>测试</el-button>

// main.js
let trackData = [];

Vue.directive("trackClick", {
  bind(el, binding) {
    // 指令绑定时的逻辑
    el.addEventListener("click", () => {
      const buttonInfo = {
        buttonId: el.id,
        buttonText: el.innerText,
        timestamp: new Date(),
      };
      // 处理数据的逻辑
      // ...

      data.push(buttonInfo);
      sessionStorage.setItem("track_data", JSON.stringify(trackData));
      checkTrackData();
    });
  },
});

function checkTrackData() {
  let data = JSON.parse(sessionStorage.getItem("track_data")) || [];
  if (data.length >= 50) {
    // 发请求
    trackData = [];
    sessionStorage.setItem("track_data", trackData);
  }
}