从 01 开始 从 01 开始
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机相关技巧
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • 最全面的 RSS 教程
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金
  • 职场规划
  • 关于离职
  • 杂谈
  • 自媒体
  • 📖 读书

    • 读书工具
    • 走进科学
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
    • 读书笔记
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档

晓林

程序猿,自由职业者,博主,英语爱好者,健身达人
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机相关技巧
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • 最全面的 RSS 教程
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金
  • 职场规划
  • 关于离职
  • 杂谈
  • 自媒体
  • 📖 读书

    • 读书工具
    • 走进科学
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
    • 读书笔记
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档
  • 从零开始搭建博客系列
  • 什么是博客
  • VuePress
  • VuePress 日常使用
  • 主题
  • 插件
  • 更多配置
  • 部署
  • 域名、HTTPS 和备案
  • 图床
  • 搜索功能
  • Meilisearch 自建实践
  • 评论区
  • Twikoo 配置表情包
  • CDN
  • 数据统计
    • 百度统计
    • 谷歌统计
    • 谷歌还是百度?
    • 参考
  • SEO
  • 友情链接
  • 网站安全

  • SSL 证书续费
  • 配置 RSS 订阅
  • 显示数学公式块
  • 添加 mermaid 支持
  • 关于邮件服务器
  • 我的写作流
  • 增加浏览器控制台输出
  • 从零开始搭建博客系列-终
  • 搭建博客
2023-02-28
目录

数据统计

# 20.数据统计

我们可以给博客添加统计功能,这里以百度统计和谷歌统计为例。

‍

# 百度统计

‍

# 添加网站

登陆百度统计后台:百度统计——一站式智能数据分析与应用平台 (opens new window),并登录,然后进入产品:

​​​​ ‍ 在使用设置--网站列表中,点击新增网站:

​​ ‍

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

​​ ‍

# 引用代码

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

​​ ‍

​​

接下来就是引用代码了。由于 VuePress 是一个单页面应用,切换的过程并不会加载页面,也就不会触发百度统计;因此我们需要监听路由的改变,手动上传数据。而 VuePress 是基于 Vue 的,可以配置监听路由:应用级别的配置 (opens new window)

由于 VuePress 是一个标准的 Vue 应用,你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置,当该文件存在的时候,会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:

// 使用异步函数也是可以的
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  // ...做一些其他的应用级别的优化
}
1
2
3
4
5
6
7
8
9
10

VuePress 的路由是用 Vue Router,我们可以配置一个全局前置守卫。怎么手动上传数据呢?这个我们可以查看百度统计的文档 (opens new window),有讲到针对这种单页应用如何在 JS 中调用 PV 跟踪代码:

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

// pageURL:指定要统计PV的页面URL。此项必选。
1
2
3

‍ 总结,我们在 .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();
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

​​

部署后,我们也可以在百度统计后台 (opens new window)检查:

​​

然后点击检查:

​​​​

# 网站分析

一般 20 分钟后,可以查看网站分析数据:

​​ ‍

pv 即 page view,表示页面浏览量 ‍

# 谷歌统计

谷歌统计和百度统计类似,也是差不多的步骤。登陆谷歌分析后台 (opens new window),如果是第一次登陆,会跟着指示创建账号,所谓账号,通常是一个公司或者组织: ‍ ​​ ‍

​​

创建账户分 3 步:

  1. 账号开设
  2. 媒体资源设置
  3. 关于您的商家

注意:随着时间的推移,创建账户的步骤可能不同,仅供参考。 ‍

# 添加媒体资源

首先是账号开设,先填个账户名称然后下一步

​​​​

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

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

​​​​

第三步然后按需选择,然后创建

​​

最后同意服务条款:

​​ ‍

然后我们就可以看到 GA 了:

​​ ‍

​​​​

# VuePress 配置

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

我们直接参照官方文档 (opens new window):

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

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

module.exports = {
  plugins: [
    [
      '@vuepress/google-analytics',
      {
        'ga': '' // UA-00000000-0
      }
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10

‍

# 删除媒体资源

如果你添加错了,可以删除:

​

​​​

# 谷歌还是百度?

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

# 参考

  • Google Analytics 分析(GA)是什么?为什么全世界都在用? - 知乎 (opens new window)
  • 如何获取 GA(Google Analytics 的简称)统计代码? - 江门市美誉网络技术有限公司 (opens new window) ‍
上次更新: 2025/5/9 14:55:39
CDN
SEO

← CDN SEO→

最近更新
01
学点统计学:轻松识破一本正经的胡说八道
06-05
02
2025 年 5 月记
05-31
03
《贫穷的本质》很棒,但可能不适合你
05-27
更多文章>
Theme by Vdoing | Copyright © 2022-2025 | 粤 ICP 备 2022067627 号 -1 | 粤公网安备 44011302003646 号 | 点击查看十年之约
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式