vue3使用百度统计进行埋点

vue3使用百度统计

1、注册百度统计账号https://tongji.baidu.com
2、添加网站地址

方案一 (已经能够统计出每个页面访问的次数及时长)
将生成的代码拷贝到 index.html的里面

方案二 (想要为某些事件添加埋点)
1、安装 vue-baidu-analytics 插件

npm i vue-baidu-analytics

使用教程 https://chengpeiquan.com/

2、main.js中引入

import baiduAnalytics from "vue-baidu-analytics";
const app = createApp(App); //建立一个vue3app
app.use(baiduAnalytics, {
  router: router,
  siteIdList: ['百度统计ID'], //在上面生成的script中hm.src后面的字符串
  isDebug: false,
});

3、封装一个指令 在点击的时候做埋点
创建 analytics.js 文件

import { usePush } from "vue-baidu-analytics";
export default {
  mounted(el, binding) {
    const { value } = binding;
    el.addEventListener("click", () => {
      // // 触发统计代码，使用 value 参数作为事件标签
      console.log(value);
      usePush().event(value[0], "点击", value[1]);
    });
  },
};

4、使用自定义指令
里面的参数可以自己定义，根据自己的需求来计划

5、在router文件中也可添加

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token");
  if ( !token && ) {
    next("/");
  } else {
    if (to.path) {
      window._hmt.push(["_trackPageview", "/#" + to.name]);
    }
    next();
  }
});

最后