# vuepress 配置百度统计
# 添加百度统计
# 获取百度统计代码
- 登录百度统计后台
- 创建站点
- 复制统计代码
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);
})();
1
2
3
4
5
6
7
2
3
4
5
6
7
# 配置百度统计代码
修改 ./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);
})();
`
]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 切换页面时手工上报 pv 统计
目前存在一个问题，仅在访问首页或者刷新页面时，才会触发百度统计。
因为 vuepress 是基于 vue 的单页面应用，所以页面切换过程中，不会重新加载页面，故而不会触发百度统计。
解决方法: 监听路由切换事件，当切换页面时, 手动上报百度统计, 具体实现如下:
修改 .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();
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
每当切换路由就会触发统计上报。所以发生如下行为时会上报统计:
- 首次访问
- 刷新页面
- 切换到当前文章的其它章节
切换锚点，URL 会变化，所以会触发路由变化事件。
所以，当用户完整得浏览完一篇博客时，可能会触发多次上报。