从01开始 从01开始
首页
  • 计算机科学导论
  • 数字电路
  • 计算机组成原理

    • 计算机组成原理-北大网课
  • 操作系统
  • Linux
  • Docker
  • 计算机网络
  • 计算机常识
  • Git
  • JavaSE
  • Java高级
  • JavaEE

    • Ant
    • Maven
    • Log4j
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • Servlet
  • Spring
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC
  • SpringBoot
  • 学习网课的心得
  • 输入法
  • 节假日TodoList
  • 其他
  • 关于本站
  • 网站日记
  • 友人帐
  • 如何搭建一个博客
GitHub (opens new window)

peterjxl

人生如逆旅,我亦是行人
首页
  • 计算机科学导论
  • 数字电路
  • 计算机组成原理

    • 计算机组成原理-北大网课
  • 操作系统
  • Linux
  • Docker
  • 计算机网络
  • 计算机常识
  • Git
  • JavaSE
  • Java高级
  • JavaEE

    • Ant
    • Maven
    • Log4j
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • Servlet
  • Spring
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC
  • SpringBoot
  • 学习网课的心得
  • 输入法
  • 节假日TodoList
  • 其他
  • 关于本站
  • 网站日记
  • 友人帐
  • 如何搭建一个博客
GitHub (opens new window)
  • 从零开始搭建博客系列
  • 什么是博客
  • HelloVuePress
  • VuePress日常使用
  • 主题
  • 插件
  • 更多配置
  • 部署
  • 域名、HTTPS和备案
  • 图床
  • 搜索功能
  • 评论区
  • CDN
  • 数据统计
    • 百度统计
    • 谷歌统计
    • 谷歌还是百度?
    • 参考
  • SEO
  • 友情链接
  • 网站安全
  • 搭建博客
  • 搭建博客
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)

‍

在GitHub上编辑此页 (opens new window)
上次更新: 2023/3/19 18:04:27
CDN
SEO

← CDN SEO→

Theme by Vdoing | Copyright © 2022-2023 粤ICP备2022067627号-1 粤公网安备 44011302003646号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式