数据统计
# 20.数据统计
我们可以给博客添加统计功能，这里以百度统计和谷歌统计为例。
# 百度统计
# 添加网站
登陆百度统计后台：百度统计——一站式智能数据分析与应用平台 (opens new window)，并登录，然后进入产品：
在使用设置--网站列表中，点击新增网站：
添加网站域名、网站首页等信息：
# 引用代码
添加完后，会自动跳转到代码获取页面，我们可以看到根据我们填写的站点信息生成的监控代码，注意这段代码是有特殊标示的，你需要根据自己的站点信息生成并使用：
接下来就是引用代码了。由于 VuePress 是一个单页面应用，切换的过程并不会加载页面，也就不会触发百度统计；因此我们需要监听路由的改变，手动上传数据。而 VuePress 是基于 Vue 的，可以配置监听路由：应用级别的配置 (opens new window)
由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：
// 使用异步函数也是可以的 export default ({ Vue, // VuePress 正在使用的 Vue 构造函数 options, // 附加到根实例的一些选项 router, // 当前应用的路由实例 siteData, // 站点元数据 isServer // 当前应用配置是处于 服务端渲染 或 客户端 }) => { // ...做一些其他的应用级别的优化 }1
2
3
4
5
6
7
8
9
10
VuePress 的路由是用 Vue Router，我们可以配置一个全局前置守卫。怎么手动上传数据呢？这个我们可以查看百度统计的文档 (opens new window)，有讲到针对这种单页应用如何在 JS 中调用 PV 跟踪代码：
_hmt.push(['_trackPageview', pageURL]);
// pageURL：指定要统计PV的页面URL。此项必选。
2
3
总结，我们在 .vuepress 文件夹下新建一个 enhanceApp.js 文件，代码写入：
export default ({ router }) => {
/**
* 路由切换事件处理
*/
router.beforeEach((to, from, next) => {
//触发百度的pv统计
if (typeof _hmt != "undefined") {
if (to.path) {
_hmt.push(["_trackPageview", to.fullPath]);
}
}
// continue
next();
});
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
现在我们在本地再运行下代码，然后点击文章，包括点击文章中的锚点，在控制台查看网络请求，可以看到上报了数据：
部署后，我们也可以在百度统计后台 (opens new window)检查：
然后点击检查：
# 网站分析
一般 20 分钟后，可以查看网站分析数据：
pv 即 page view，表示页面浏览量
# 谷歌统计
谷歌统计和百度统计类似，也是差不多的步骤。登陆谷歌分析后台 (opens new window)，如果是第一次登陆，会跟着指示创建账号，所谓账号，通常是一个公司或者组织：
创建账户分 3 步：
- 账号开设
- 媒体资源设置
- 关于您的商家
注意：随着时间的推移，创建账户的步骤可能不同，仅供参考。
# 添加媒体资源
首先是账号开设，先填个账户名称然后下一步
接下来添加媒体资源，所谓媒体资源，一般就是指网站或 APP，你也可以理解为百度的站点，每个媒体资源都有一个唯一的追踪 ID，就是我们要拿到的 ga（Google Analytics 的缩写）。
在添加媒体资源的时候，一定要注意，我们需要点击 「查看高级选项」，打开创建 「Universal Analytics 媒体资源」开关，至于是勾选 「同时创建 Google Analytics 4 和 Universal Analytics」 还是「仅创建 Universal Analytics」则都可以。
第三步然后按需选择，然后创建
最后同意服务条款：
然后我们就可以看到 GA 了：
# VuePress 配置
VuePress 直接提供了 @vuepress/plugin-google-analytics 插件，使用该插件，无须我们手动监听路由改变，上节所说的三种情形下都会触发数据上报。
我们直接参照官方文档 (opens new window)：
yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics
2
注意：如果你的项目正在使用 Google analytics 插件，推荐使用 Yarn 而不是 npm 来安装所有依赖。因为在这种情形下，npm 会生成错误的依赖树。 JS 配置：
module.exports = {
plugins: [
[
'@vuepress/google-analytics',
{
'ga': '' // UA-00000000-0
}
]
]
}
2
3
4
5
6
7
8
9
10
# 删除媒体资源
如果你添加错了，可以删除：
# 谷歌还是百度？
至于使用谷歌还是百度，因人而异，在国内，谷歌因为一些原因，会导致加载速度降低，当然你也可以两者都用。
