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