51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

vuepress配置百度统计

# vuepress 配置百度统计 {#vuepress-配置百度统计}

提示

您也可以改用其它方案,如谷歌统计cnzz 统计

# 添加百度统计 {#添加百度统计}

# 获取百度统计代码 {#获取百度统计代码}

  • 登录百度统计后台 (opens new window)

  • 创建站点

  • 复制统计代码

    var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?44212d6ce872df50b804d94b24889284"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();

# 配置百度统计代码 {#配置百度统计代码}

vi ./config.js

head: [
    // 添加百度统计
    [
      "script",
      {},
      `
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?44212d6ce872df50b804d94b24889284";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
        `
    ]
  ]

# 切换页面时手工上报 pv 统计 {#切换页面时手工上报-pv-统计}

目前存在一个问题,仅在访问首页或者刷新页面时,才会触发百度统计。
提示

因为 vuepress 是基于 vue 的单页面应用,所以页面切换过程中,不会重新加载页面,故而不会触发百度统计。

解决方法: 监听路由切换事件,当切换页面时, 手动上报百度统计, 具体实现如下:
vi .vuepress/enhanceApp.js

export default ({ router }) => {
  /**
   * 路由切换事件处理
   */
  router.beforeEach((to, from, next) => {
    console.log("切换路由", to.fullPath, from.fullPath);

    //触发百度的pv统计
    if (typeof _hmt != "undefined") {
      if (to.path) {
        _hmt.push(["_trackPageview", to.fullPath]);
        console.log("上报百度统计", to.fullPath);
      }
    }

    // continue
    next();
  });
};

提示

每当切换路由就会触发统计上报。所以发生如下行为时会上报统计:

  • 首次访问
  • 刷新页面
  • 切换到当前文章的其它章节
    切换锚点,URL 会变化,所以会触发路由变化事件。
    所以,当用户完整得浏览完一篇博客时,可能会触发多次上报。 百度统计官方 js-api 文档 (opens new window)
赞(3)
未经允许不得转载:工具盒子 » vuepress配置百度统计