跳至主要內容
vuepress 绑定百度统计

vuepress 绑定百度统计

程序员王天大约 4 分钟

本篇教程适用于vuepress2版本

注册百度统计
https://tongji.baidu.com/open in new window
注册成功后,打开网站列表
https://tongji.baidu.com/main/setting/10000320023/home/site/indexopen in new window
如下,新增网站配置
image.png
新增站点
image.png

获取代码 ,插入博客中,用于站点与百度统计互联
image.png
配置流程如下:
image.png

注意

注意!
在配置统计代码时,查看了多个教程,都是以代码块的方式配置,但是本地运行创建标签出错,导致统计代码运行失败

module.exports = {
    head: [
      [
        'script', {}, `
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script>        
        `
      ]
    ]
}

经过尝试后,直接使用vuepress中的head配置,来生成一个script标签,插入header中即可,不存在异步创建标签问题。

export default defineUserConfig({
  head: [
    [
      'script', {
        type:'text/javascript',
        src:'https://hm.baidu.com/hm.js?ff5e95667789a353e9be4e467e13ff3a'
      }, 
    ]
  ]
})

head配置参数
第一个参数:标签名称 -script标签
第二个参数:标签配置项- type类型为'text/javascript',src为百度统计代码访问地址
第三个三次:代码块 、可忽略

检测效果
注意,通过js方式链接百度统计,代码检查无法检查到
官方说法:

  • .如果通过js文件调用的方式安装统计代码,由于无法直接在网站页面中找到统计代码,会提示“未检测到代码”,建议您使用 百度统计助手open in new window 进行检测;

需要通过百度统计助手检测,安装地址→
安装插件后检测,此时提示站点已安装统计助手,咱们后续登录百度统计后台,就能查看博客数据啦
image.png
等待

1.4 等待

如果百度统计插件助手提示安装成功,一般需等待20分钟左右,可登录后台查看数据
注意!以js方式介入百度统计,代码安装检测无法识别
image.png没关系,百度插件助手提示接入成功就行,
如下,打开统计后台,咱们就能看到本地访问的实时记录
image.png
完成以上步骤,算是接入百度统计50%了
注意!vuepress是 以vue框架开的一个单应用程序,在切换路由时不会触发页面渲染,导致咱们访问文章页时因无法触发百度统计,当如何解决此问题呢?
通过vue的路由守卫,在路由切换时,手动上报百度统计。

在查阅文档时,我发现不少博主是用vuepress1建站,创建enhanceapp.js 来设置路由守卫,此方式在vuepress2.0无效
官网解释

#open in new window.vuepress/enhanceApp.js

重命名为 .vuepress/client.{js,ts} ,使用方法也有改动。
参考 深入 > Cookbook > 客户端配置的使用方法open in new window

亲测踩坑,勿用!VuePress 文档的基本配置中,介绍了一个应用级别的配置open in new window

由于 VuePress 是一个标准的 Vue 应用,你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置,当该文件存在的时候,会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:

代码如下:

export default ({ router }) => {
    router.beforeEach((to, from, next) => {
      if (typeof _hmt !== "undefined") {
        if (to.path) {
          _hmt.push(["_trackPageview", to.fullPath]);
        }
      }
      
      next();
    });
  };

客户端配置路由守卫

vuepres2.0版本,需要额外客户端配置,创建文件.vuepress/client.js
在客户端配置中添加路由守卫,代码如下:

import { defineClientConfig } from "@vuepress/client";
console.log('路由守卫了')
export default defineClientConfig({
  enhance({ 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();
    });
  },
});

路由守卫方法接收三个参数:

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子

提示
切换路由时会触发统计上报。以下行为时会上报统计:

  • 首次访问
  • 刷新页面
  • 切换到当前文章的其它章节
    切换锚点,URL 会变化,所以会触发路由变化事件。
    所以,当用户完整得浏览完一篇博客时,可能会触发多次上报。

总结
接入百度统计,本质是在访问站点时触发百度统计api。

读者朋友好呀,我是王天~ 😊

尝试做过很多事情,半路出道的野生程序员、前端讲师、新手作者,最终还是喜欢写代码、乐于用文字记录热衷分享~

如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇‍

如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏

微信:「wangtian3111」,加我进王天唯一的读者群。

个人博客:https://itwangtian.com