关于javascript:VuePress-博客优化之添加数据统计功能

36次阅读

共计 4023 个字符，预计需要花费 11 分钟才能阅读完成。

在《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果点击查看：TypeScript4 中文文档。明天咱们给博客增加数据统计性能。

登陆百度统计后盾：https://tongji.baidu.com/web/welcome/login

在「治理」-「网站列表」中，点击「新增网站」：

增加网站域名、网站首页等信息：

增加完后，会主动跳转到代码获取页面，咱们能够看到依据咱们填写的站点信息生成的监控代码，留神这段代码是有非凡标示的，你须要依据本人的站点信息生成并应用：

咱们在 config.js 里写入生成的代码：

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>        
        `
      ]
    ]
}

咱们本地运行，刷新页面，而后查看页面申请：

能够看到页面申请了 hm.js 和 hm.gif，表明的确发送了申请。

当初咱们部署到线上。等部署实现后，咱们还能够在统计后盾的“代码装置查看”页面自动检测或手动检测代码装置状况。

如果代码装置正确，个别 20 分钟后，能够查看网站剖析数据。

咱们通过在 head 中引入百度统计代码，如果是一般的页面，没有什么问题，但咱们用 VuePress 搭建的是一个单页利用，页面切换过程中，不会从新加载页面，天然也不会触发百度统计。所以咱们只能统计到用户拜访了页面，但具体点开了哪些文章，跳转了哪些路由并不知道。为了实现路由切换时的数据统计，咱们还须要监听路由扭转，手动上报数据，那具体咱们该怎么做呢?

首先依据 VuePress 官网的介绍：

一个 VuePress 网站是一个由 Vue、Vue Router 和 webpack 驱动的单页利用。

而在 VuePress 文档的根本配置中，介绍了一个利用级别的配置：

因为 VuePress 是一个规范的 Vue 利用，你能够通过创立一个 .vuepress/enhanceApp.js 文件来做一些利用级别的配置，当该文件存在的时候，会被导入到利用外部。enhanceApp.js 应该 export default 一个钩子函数，并承受一个蕴含了一些利用级别属性的对象作为参数。你能够应用这个钩子来装置一些附加的 Vue 插件、注册全局组件，或者减少额定的路由钩子等：

// 应用异步函数也是能够的
export default ({
  Vue, // VuePress 正在应用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 以后利用的路由实例
  siteData, // 站点元数据
  isServer // 以后利用配置是处于 服务端渲染 或 客户端
}) => {// ... 做一些其余的利用级别的优化}

在这里咱们能够看到，有提供以后利用的路由实例 router，因为 VuePress 的路由是由 Vue Router 驱动的，所以咱们查下 Vue Router 的官网介绍，能够看到一个全局前置守卫：

你能够应用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({...})

router.beforeEach((to, from, next) => {// ...})

每个守卫办法接管三个参数：

to: Route: 行将要进入的指标路由对象

from: Route: 以后导航正要来到的路由

next: Function: 肯定要调用该办法来 resolve 这个钩子。

由此得出，咱们能够在获取路由实例后，注册一个全局前置守卫来监听路由扭转。

当初咱们能监听路由扭转了，怎么手动上报数据呢？这个咱们能够查看百度统计的文档，有讲到针对这种单页利用如何在 JS 中调用 PV 跟踪代码：

_hmt.push(['_trackPageview', pageURL]); 

// pageURL：指定要统计 PV 的页面 URL。此项必选。

当初万事俱备，咱们开始写起来吧。

咱们在 .vuepress 文件夹下新建一个 enhanceApp.js 文件，代码写入：

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

当初咱们在本地再运行下代码，而后点击文章，包含点击文章中的锚点，查看申请就能够看到上报了数据。

这里咱们针对能上报数据的情景梳理一下：

页面进入和刷新
点击其余文章，路由切换
点击文章锚点，切换到其余章节（这里其实还是路由切换）

当初以上都会触发数据上报。

VuePress 间接提供了 @vuepress/plugin-google-analytics 插件，应用该插件，毋庸咱们手动监听路由扭转，上节所说的三种情景下都会触发数据上报。

咱们间接参照文档：

yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics

留神：如果你的我的项目正在应用 Google analytics 插件，举荐应用 Yarn (opens new window)而不是 npm 来装置所有依赖。因为在这种情景下，npm 会生成谬误的依赖树。

module.exports = {
  plugins: [
    [
      '@vuepress/google-analytics',
      {'ga': '' // UA-00000000-0}
    ]
  ]
}

所谓 ga，即 Google Analytics ID，咱们须要到谷歌剖析创立站点获取：

咱们登陆谷歌剖析后盾：https://analytics.google.com/

如果是第一次登陆，会跟着批示创立账号，所谓账号，通常是一个公司或者组织。

接下来增加媒体资源，所谓媒体资源，个别就是指网站或 APP，你也能够了解为百度的站点，每个媒体资源都有一个惟一的追踪 ID，就是咱们要拿到的 ga。

然而在增加媒体资源的时候，肯定要留神，咱们须要点击「查看高级选项」，关上创立「Universal Analytics 媒体资源」开关，至于是勾选「同时创立 Google Analytics 4 和 Universal Analytics」还是「仅创立 Universal Analytics」则都能够。

但只有通过 Unviersal Analytics 创立的 ga 才是咱们这次须要的 ga，它创立的格局跟所须要的 UA-00000000-0 雷同，如果是 Google Analytics 4 创立的，则是以 G 结尾的。

对于 Google Analytics（剖析）4 多说一句，Google Analytics 4 简称 GA4，也是新版 GA，2020 年 10 月份公布，依据官网文档的介绍：

Google Analytics（剖析）4（以前称为“利用 + 网站”）是一项新型媒体资源，提供的报告与您在 Universal Analytics 媒体资源中看到的报告不同。Google Analytics（剖析）4 媒体资源的劣势之一是：您能够将其用于网站、利用，或同时用于这两者。Universal Analytics 媒体资源仅反对网站。

在创立完后，咱们就能够看到生成的 ga 了：

复制 ga，咱们填入到 config.js 的代码中。

留神，谷歌剖析与百度剖析稍有不同，如果咱们在本地运行，并不会看到有数据的上报，咱们能够把代码部署到线上查看：

如果看到有如图的带 collect 的申请，就示意发送申请胜利。

依据官网的帮忙文档，咱们能够晓得:

向您的网站增加了 Analytics（剖析）代码之后，Analytics（剖析）将在数分钟（通常是 10-15 分钟）内开始向您的媒体资源发送数据。

要确认您的媒体资源是否正在接收数据，请查看“实时”报告。如果您正确设置了掂量代码，则“以后的用户数量”卡片将会每 15 秒左右刷新一次，以显示最新的用户数量。

Analytics（剖析）须要 24-48 小时来解决其余报告的数据。

至于应用谷歌还是百度，因人而异，在国内，谷歌因为一些起因，会导致加载速度升高，当然你也能够两者都用。

博客搭建系列是我至今写的惟一一个偏实战的系列教程，解说如何应用 VuePress 搭建博客，并部署到 GitHub、Gitee、集体服务器等平台。

一篇带你用 VuePress + GitHub Pages 搭建博客
一篇教你代码同步 GitHub 和 Gitee
还不会用 GitHub Actions？看看这篇
Gitee 如何主动部署 Pages？还是用 GitHub Actions!
一份前端够用的 Linux 命令
一份简略够用的 Nginx Location 配置解说
一篇教你博客如何部署到本人的服务器
VuePress 博客优化之 last updated 最初更新工夫如何设置

微信：「mqyqingfeng」，加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。

正文完

javascript

发表至： javascript

2022-01-10

0

10-个常问的-JS-面试题

关于javascript:前端工程化一开篇

关于javascript:基于原生JS封装的Modal对话框插件

LeetCode 之 JavaScript 解答第21题 —— 合并两个有序链表（Merge Two Sorted Lists）

关于c:IPTABLES的连接跟踪与NAT分析

关于javascript:VuePress-博客优化之添加数据统计功能

前言

1. 百度统计

1.1 创立站点

1.1.1 登陆站点

1.1.2 新增网站

1.1.3 填写信息

1.1.4 获取代码

1.2 引入代码

1.3 验证

1.3.1 本地验证

1.3.2 线上验证

1.4 期待

2. 单页利用的数据统计问题

2.1 问题

2.2 思路

2.3 实际

2.4 梳理

3. 谷歌统计

3.1 装置

3.2 应用

3.3 获取 ga

3.3.1 登陆后盾

3.3.2 增加媒体资源

3.4 验证

3.5 期待

4. 谷歌还是百度？

系列文章

Just My Socks（注册教程内含优惠码）

关于javascript:VuePress-博客优化之添加数据统计功能

前言

1. 百度统计

1.1 创立站点

1.1.1 登陆站点

1.1.2 新增网站

1.1.3 填写信息

1.1.4 获取代码

1.2 引入代码

1.3 验证

1.3.1 本地验证

1.3.2 线上验证

1.4 期待

2. 单页利用的数据统计问题

2.1 问题

2.2 思路

2.3 实际

2.4 梳理

3. 谷歌统计

3.1 装置

3.2 应用

3.3 获取 ga

3.3.1 登陆后盾

3.3.2 增加媒体资源

3.4 验证

3.5 期待

4. 谷歌还是百度？

系列文章

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）