前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，点击查看最终效果：TypeScript4中文文档。今天我们为博客添加数据统计功能。一、百度统计1.1创建站点1.1.1登录站点登录百度统计后台：https://tongji.baidu.com/web/welcome/login1.1.2在“管理”中添加新站点-“网站列表”，点击“添加新网站”：1.1.3填写信息添加网站域名、网站首页等信息：1.1.4添加获取码后，自动跳转到代码获取页面，可以看到监控是根据我们填写的站点信息生成的代码，注意这段代码是特别标注的，需要根据自己的站点信息生成使用：1.2导入代码我们编写生成的config.js中的代码：.src="https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxxxxxx";vars=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();`]]}1.3伏安lidate1.3.1本地验证我们在本地运行，刷新页面，查看页面请求：可以看到页面请求了hm.js和hm.gif，说明确实发送了请求。1.3.2在线验证现在我们在线部署。部署完成后，我们也可以在统计后台的“代码安装检查”页面自动检测或手动检测代码安装。1.4等待如果代码安装正确，一般20分钟后，就可以查看网站分析数据了。2.单页应用的数据统计问题2.1问题我们在头部引入了百度统计代码。如果是普通页面，没有问题，但是我们使用VuePress搭建单页面应用。在页面切换过程中，不会有任何问题。重新加载页面自然不会触发百度统计。所以我们只能统计用户访问过的页面，却不知道他们点击了哪些文章，跳转到了哪些路由。为了实现路由切换时的数据统计，我们还需要监听路由变化并手动上报数据，那么应该怎么做呢？2.2思路首先，根据VuePress官网的介绍：一个VuePress网站是由Vue、VueRouter和webpack驱动的单页应用。在VuePress文档的基础配置中，引入了一个应用级的配置：由于VuePress是一个标准的Vue应用，你可以通过创建一个.vuepress/enhanceApp.js文件来做一些应用级的配置。当文件存在时，它将被导入到应用程序中。enhanceApp.js应该默认导出一个钩子函数，该函数将包含一些应用程序级属性的对象作为参数。你可以使用这个钩子来安装一些额外的Vue插件，注册全局组件，或者添加额外的路由钩子等：//也可以使用异步函数exportdefault({Vue,//VuePress正在使用的Vue构造函数选项,//附加到根实例路由器的一些选项,//当前应用程序的路由实例siteData,//站点元数据isServer//当前应用程序配置是服务器端呈现的还是客户端})=>{//...do其他一些应用层面的优化}这里可以看到有一个路由实例router提供了当前应用，因为VuePress的路由是由VueRouter驱动的，所以查看VueRouter的官网介绍，可以看到一个全局的BeforeEach：你可以使用router.beforeEach来注册一个全局的beforeEach：constrouter=newVueRouter({...})router.beforeEach((to,from,next)=>{//...})Eachguard方法接收三个参数：to:Route:目标路由对象thatisabouttoenterfrom:路由:当前导航离开的路由next:功能:必须调用此方法来解析此钩子。由此，我们可以在获取到路由实例后，注册一个全局的pre-guard来监听路由的变化。既然可以监控路由变化，那么我们如何手动上报数据呢？对此，我们可以查看百度统计的文档，里面讲了如何在JS中调用单页应用的PV跟踪代码：_hmt.push(['_trackPageview',pageURL]);//pageURL：指定要统计PV的页面URL。此项为必填项。万事俱备，我们开始写吧。2.3实践我们在.vuepress文件夹下新建一个enhanceApp.js文件，并写入代码：exportdefault({router})=>{router.beforeEach((to,from,next)=>{if(typeof_hmt!=="undefined"){if(to.path){_hmt.push(["_trackPageview",to.fullPath]);}}next();});};现在我们在本地运行代码，点击文章，包括点击文章中的锚点，查看请求，可以看到上报的数据。2.4排序这里我们来梳理一下可以上报数据的情况：页面进入刷新点击其他文章，路由切换点击文章锚点，切换到其他章节（这其实就是路由切换）现在会触发数据上报。3.谷歌统计VuePress直接提供@vuepress/plugin-google-analytics插件。有了这个插件，我们就不需要手动去监听路由的变化了。上一节提到的三种情况都会触发数据上报。我们直接参考文档：3.1安装yarnadd-D@vuepress/plugin-google-analytics#ORnpminstall-D@vuepress/plugin-google-analytics注意：如果你的项目使用的是googleanalytics插件，建议使用Yarn(opensnewwindow)而不是npm来安装所有依赖项。因为在这种情况下，npm会生成错误的依赖树。3.2使用module.exports={plugins:[['@vuepress/google-analytics',{'ga':''//UA-00000000-0}]]}3.3获取ga3.3.1登录后台so-叫做ga，也就是GoogleAnalyticsID，我们需要去GoogleAnalytics创建站点获取：我们登录GoogleAnalytics后台：https://analytics.google.com/如果是第一次登录，您将按照说明创建一个帐户。所谓的账户通常是一个公司或组织。3.3.2添加媒体资源接下来，添加媒体资源。所谓媒体资源，一般是指网站或APP。你也可以理解为百度站。每个媒体资源都有一个唯一的trackingID，这就是我们想要得到的。嘎。但是在添加媒体资源的时候一定要注意，我们需要点击“查看高级选项”，打开创建“UniversalAnalytics媒体资源”的开关。至于勾选“同时创建GoogleAnalytics4和UniversalAnalytics”还是“只创建UniversalAnalytics”即可。但是只有UnviersalAnalytics创建的ga才是我们这次需要的ga。它创建的格式与所需的UA-00000000-0相同。如果是GoogleAnalytics4创建的，则以G开头。再多说一下GoogleAnalytics4。GoogleAnalytics4，简称GA4，也是GA的新版本。它将在2020年10月发布。根据官方文件：一种新型媒体资源，提供与您在UniversalAnalytics媒体资源中看到的不同的报告。GoogleAnalytics4属性的一大优点是您可以将其用于您的网站、应用程序或两者。UniversalAnalytics媒体资源仅支持网站。创建完成后，我们可以看到生成的ga：复制ga，填入config.js的代码中。3.4验证请注意，GoogleAnalytics与BaiduAnalytics略有不同。如果我们在本地运行它，我们将看不到报告的数据。我们可以部署代码在线查看：如果看到如图所示带有collect的请求，则说明发送请求成功。3.5等待根据官方帮助文档，我们可以知道：在您的网站添加Analytics（分析）代码后，Analytics（分析）会在几分钟（通常为10-15分钟）内开始向您的财产发送数据。要确认您的媒体资源正在接收数据，请查看“实时”报告。如果您正确设置了衡量代码，“当前用户数”卡片将每15秒左右刷新一次，以显示最近的用户数。Analytics需要24-48小时来处理其他报告的数据。4.谷歌还是百度？至于用谷歌还是百度，因人而异。在中国，谷歌会因为某些原因放慢加载速度。当然，您可以同时使用两者。系列文章博客搭建系列是我目前为止唯一写的实用系列教程，讲解如何使用VuePress搭建博客并部署到GitHub、Gitee、个人服务器等平台。一会带你用VuePress+GitHubPages搭建博客一会教你如何在GitHub和Gitee之间同步代码还是不知道如何使用GitHubActions？看看这个Gitee是如何自动部署Pages的？仍然使用GitHubActions！一个足够做前端的Linux命令，一个足够简单的NginxLocation配置来讲解一篇教你如何部署博客到自己服务器的文章。VuePress博客优化：lastupdated最后更新时间如何设置微信：“mqyqingfeng”，加我到SaeYu的唯一读者群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。
