VuePress 博客优化之添加数据统计功能

冴羽 等级 590 1 0
标签:

前言

《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果点击查看:TypeScript4 中文文档。今天我们给博客添加数据统计功能。

1. 百度统计

1.1 创建站点

1.1.1 登陆站点

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

1.1.2 新增网站

在 「管理」- 「网站列表」中,点击「新增网站」:

VuePress 博客优化之添加数据统计功能

1.1.3 填写信息

添加网站域名、网站首页等信息:

VuePress 博客优化之添加数据统计功能

1.1.4 获取代码

添加完后,会自动跳转到代码获取页面,我们可以看到根据我们填写的站点信息生成的监控代码,注意这段代码是有特殊标示的,你需要根据自己的站点信息生成并使用:

VuePress 博客优化之添加数据统计功能

1.2 引入代码

我们在 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>        
        `
      ]
    ]
}

1.3 验证

1.3.1 本地验证

我们本地运行,刷新页面,然后查看页面请求:

VuePress 博客优化之添加数据统计功能

可以看到页面请求了 hm.jshm.gif ,表明确实发送了请求。

1.3.2 线上验证

现在我们部署到线上。等部署完成后,我们还可以在统计后台的“代码安装检查”页面自动检测或手动检测代码安装情况。 VuePress 博客优化之添加数据统计功能

1.4 等待

如果代码安装正确,一般 20 分钟后,可以查看网站分析数据。

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

2.1 问题

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

2.2 思路

首先根据 VuePress 官网的介绍:

一个 VuePress 网站是一个由 VueVue Routerwebpack 驱动的单页应用。

而在 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。此项必选。

现在万事俱备,我们开始写起来吧。

2.3 实践

我们在 .vuepress 文件夹下新建一个 enhanceApp.js 文件,代码写入:

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

      next();
    });
  };

现在我们在本地再运行下代码,然后点击文章,包括点击文章中的锚点,查看请求就可以看到上报了数据。

2.4 梳理

这里我们针对能上报数据的情形梳理一下:

  1. 页面进入和刷新
  2. 点击其他文章,路由切换
  3. 点击文章锚点,切换到其他章节(这里其实还是路由切换)

现在以上都会触发数据上报。

3. 谷歌统计

VuePress 直接提供了 @vuepress/plugin-google-analytics 插件,使用该插件,无须我们手动监听路由改变,上节所说的三种情形下都会触发数据上报。

我们直接参照文档

3.1 安装

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

注意:如果你的项目正在使用 Google analytics 插件,推荐使用 Yarn (opens new window)而不是 npm 来安装所有依赖。因为在这种情形下,npm 会生成错误的依赖树。

3.2 使用

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

3.3 获取 ga

3.3.1 登陆后台

所谓 ga,即 Google Analytics ID,我们需要到谷歌分析创建站点获取:

我们登陆谷歌分析后台:https://analytics.google.com/

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

3.3.2 添加媒体资源

接下来添加媒体资源,所谓媒体资源,一般就是指网站或 APP,你也可以理解为百度的站点,每个媒体资源都有一个唯一的追踪 ID,就是我们要拿到的 ga。

但是在添加媒体资源的时候,一定要注意,我们需要点击 「查看高级选项」,打开创建 「Universal Analytics 媒体资源」开关,至于是勾选 「同时创建 Google Analytics 4 和 Universal Analytics」 还是「仅创建 Universal Analytics」则都可以。

但只有通过 Unviersal Analytics 创建的 ga 才是我们这次需要的 ga,它创建的格式跟所需要的 UA-00000000-0 相同,如果是 Google Analytics 4 创建的,则是以 G 开头的。

VuePress 博客优化之添加数据统计功能

关于 Google Analytics(分析)4 多说一句,Google Analytics 4 简称 GA4,也是新版 GA,2020年10月份发布,根据官方文档的介绍:

Google Analytics(分析)4(以前称为“应用 + 网站”)是一项新型媒体资源,提供的报告与您在 Universal Analytics 媒体资源中看到的报告不同。Google Analytics(分析)4 媒体资源的优势之一是:您可以将其用于网站、应用,或同时用于这两者。Universal Analytics 媒体资源仅支持网站。

在创建完后,我们就可以看到生成的 ga 了:

VuePress 博客优化之添加数据统计功能

复制 ga,我们填入到 config.js 的代码中。

3.4 验证

注意,谷歌分析与百度分析稍有不同,如果我们在本地运行,并不会看到有数据的上报,我们可以把代码部署到线上查看:

如果看到有如图的带collect的请求,就表示发送请求成功。

VuePress 博客优化之添加数据统计功能

3.5 等待

根据官方的帮助文档,我们可以知道:

向您的网站添加了 Analytics(分析)代码之后,Analytics(分析)将在数分钟(通常是 10-15 分钟)内开始向您的媒体资源发送数据。

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

Analytics(分析)需要 24-48 小时来处理其他报告的数据。

4. 谷歌还是百度?

至于使用谷歌还是百度,因人而异,在国内,谷歌因为一些原因,会导致加载速度降低,当然你也可以两者都用。

系列文章

博客搭建系列是我至今写的唯一一个偏实战的系列教程,讲解如何使用 VuePress 搭建博客,并部署到 GitHub、Gitee、个人服务器等平台。

  1. 一篇带你用 VuePress + GitHub Pages 搭建博客
  2. 一篇教你代码同步 GitHub 和 Gitee
  3. 还不会用 GitHub Actions ?看看这篇
  4. Gitee 如何自动部署 Pages?还是用 GitHub Actions!
  5. 一份前端够用的 Linux 命令
  6. 一份简单够用的 Nginx Location 配置讲解
  7. 一篇教你博客如何部署到自己的服务器
  8. VuePress 博客优化之 last updated 最后更新时间如何设置

微信:「mqyqingfeng」,加我进冴羽唯一的读者群。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励。

收藏
评论区

相关推荐

JavaScript 代码整洁之道
作者:alivebao(https://github.com/alivebao/cleancodejs)
MySQL之爱之初体验
写在前言:本篇博客从mysql的安装开始说起,至于什么是数据库以及数据的由来什么的,不在详谈!!! 第一:mysql安装 ========== ### linux安装:两种方式 1.apt安装  apt install mysql-server 2.源码安装 1.解压tar包 cd /software tar -x
一篇从购买服务器到部署博客代码的详细教程
前言我们在 实现了 VuePress 搭建个人博客,在 和 实现了代码自动同步和部署 Github 和 Gitee,但我最终还是决定自己建站,说干就干,那我们开始吧。 买服务器因为个人的工作经历,选择了阿里云服务器,我们直接买个云服务器 ECS,所谓 ECS 服务器,直接引用官方的介绍: 云服务器ECS(Elastic Compute Service)是一种
VuePress 博客优化之 last updated 最后更新时间如何设置
前言在 中,我们使用 VuePress 搭建了一个博客,但是浏览最终搭建的站点:,我们会发现,在每篇文章的底部,并没有像 VuePress 官方文档那样,出现最后更新的时间:这篇我们来探究下如何实现最后更新时间。 官方自带查阅 VuePress 的,我们可以知道,VuePress 自带显示最后更新时间的插件,在默认主题下,无需安装本插件,因为 VuePre
VuePress 博客优化之添加数据统计功能
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果点击查看:。今天我们给博客添加数据统计功能。 1. 百度统计 1.1 创建站点 1.1.1 登陆站点登陆百度统计后台: 1.1.2 新增网站 在 「管理」 「网站列表」中,点击「新增网站」: 1.1.3 填写信息添加网站域名、网站首页等信息: 1.1.4 获取代码添加完后,会自动跳转到代码获
VuePress 博客优化之开启 HTTPS
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。注意此时,我们的域名还是 ,众所周知,开启 HTTPS 有很多好处,比如可以实现数据加密传输等,那我们如何开启 HTTPS 配置呢? 1. 购买证书阿里云提供了免费证书可以使用,在每个自然年内,都可以通过 SSL 证书服务一次性申领 20 张免费证书。 1.1 购买证书访问,选择 「D
一篇域名从购买到备案到解析的详细教程
前言在 中,我们使用 VuePress 搭建了一个博客,在 中,我们将代码部署到服务器上,最终的效果查看:。但是在文章中,我们并没有涉及域名相关的内容,此篇专门写一篇域名的详细教程。 1. 域名购买因为使用的是阿里云服务器,所以我们直接到注册一个:选择合适的域名,加入清单,下单购买,注意,购买域名需要实名信息,一路跟着指示操作即可。购买完后,我们可以在查看到
VuePress 博客优化之开启 Gzip 压缩
前言在 中,我们使用 VuePress 搭建了一个博客,在 中,我们将代码部署到服务器上,最终的效果查看:。今天我们来学习如何开启服务器的 Gzip 压缩。 Gzip 压缩关于 Gzip 压缩,引用 MDN 的: Gzip 是一种用于文件压缩与解压缩的文件格式。它基于 Deflate 算法,可将文件压缩地更小,从而实现更快的网络传输。 Web服务器与现代浏览
从零实现一个 VuePress 插件
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。但在搭建 VuePress 博客的过程中,也并不是所有的插件都能满足需求,所以本篇我们以实现一个代码复制插件为例,教大家如何从零实现一个 VuePress 插件。 本地开发开发插件第一个要解决的问题就是如何本地开发,我们查看 VuePress 1.0 官方文档的「」章节,并没有找到解决
VuePress 博客优化之拓展 Markdown 语法
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。如果我们浏览过 TypeScript ,我们会发现一个很好用的功能,那就是很多代码块,在悬浮上去的时候都会出现一个 Try 按钮:点击就会跳转到对应的 Playground,比如图示的按钮跳转的就是,我们可以在这个 Playground 修改并验证代码效果。如果我们要实现这样的功能,该
Markdown-it 原理解析
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。在搭建博客的过程中,我们出于实际的需求,在中讲解了如何写一个 markdownit插件,本篇我们将深入markdownit的源码,讲解 markdownit的执行原理,旨在让大家对 markdownit有更加深入的理解。 介绍引用 的介绍: Markdown parser done r
markdown-it 插件如何写(一)
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。在搭建博客的过程中,我们出于实际的需求,在中讲解了如何写一个 markdownit插件,又在 中讲解了 markdownit的执行原理,本篇我们将讲解具体的实战代码,帮助大家更好的写插件。 renderermarkdownit的渲染过程分为两部分,Parse 和 Render,如果我们
markdown-it 插件如何写(二)
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。在搭建博客的过程中,我们出于实际的需求,在中讲解了如何写一个 markdownit插件,又在 中讲解了 markdownit的执行原理,本篇我们将讲解具体的实战代码,帮助大家更好的写插件。 Parsemarkdownit的渲染过程分为两部分,Parse 和 Render,如果我们要实现
markdown-it 插件如何写(三)
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。在搭建博客的过程中,我们出于实际的需求,在中讲解了如何写一个 markdownit插件,又在 中讲解了 markdownit的执行原理,本篇我们将讲解具体的实战代码,帮助大家更好的写插件。 markdownitinlinemarkdownit 的作者提供了 markdownitinin
有的时候我觉得我不会 Markdown
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。在优化博客的过程中,因为需要写 markdownit 插件,翻了下 markdown 的 ,突然发现对 Markdown 还远不够了解: 软换行(Soft line breaks)换行符不在行内代码或 HTML 标签内,前面没有两个或以上的空格,将解析为软换行(Soft line br