Lufs's Blog

Life feeds on negative entropy.

以 Google Analytics 实现的 PV 浏览量统计

Lufs's Avatar 2020-06-27 分享

分享本文
  1. 1. 开启 Google Analytics API
  2. 2. 部署到 Vercel
    1. 2.1. 修改 config.ts 的配置
    2. 2.2. 导入 Vercel
    3. 2.3. 调用 API
  3. 3. 集成到 Hexo 主题
    1. 3.1. 创建 EJS
    2. 3.2. 引入 EJS
    3. 3.3. 核心 js
    4. 3.4. 成果
  4. 4. 碎碎念
  5. 5. 参考链接/关联阅读

浏览量统计有挺多种的，不乏像不蒜子、LeanCloud 等统计方式，但始终不能如意。

例如不蒜子无法导入/修改数据，浏览量是通过 href 来统计的，对「镜像站」的不友好，以及 Safari 上的抽风…

又像 LeanCloud 的哪麻烦的设置与「缓慢」的 API…

最终都让我放弃，偶然在 PRIN BLOG 发现可以利用 Google Analytics 的数据来进行浏览量，但需要部署在 VPS 上，见作者说部署到 Serverless 平台失败，就以为无法白嫖，直到 Spencer 的这篇博文出来。二话不说，开搞 😋！

详细教程可以看这篇博文，这里就简单复述一下呢

开启 Google Analytics API

可以按照 Google 官方教程 走，也可以直接按下面的步骤来。

setup tools 并根据提示进行设置，选择一个项目（或创建新的项目，比如 ga-hit-count），之后一路继续，就可以为我们这一项目开启 Google API 咯～

Credentials

然后页面就会跳转到 Google API 的凭据设置页面，API 选择 Analytics Reporting API，调用方法选择 网页服务器，最后选择 不会使用 App Engine 或 Compute Engine 即可。

GetCredentials

最后根据提示设置基本信息，例如设置服务账号名称（随意设置），选定「角色」为 Service Account User，按继续后就将会有一个 json 文件下载下来

GoogleAPIs

json 文件长这样，需要的几个信息都在这儿了

{
  // ...
  "project_id": "gmeta-domain",
  "private_key": "-----BEGIN PRIVATE KEY-----\nxxx-----END PRIVATE KEY-----\n",
  "client_email": "blog-analytics@meta-domain.gserviceaccount.com"
  // ...
}

要让 API 访问到 Google Analytics 的数据，需要打开 Google Analytics 后台将 client_email 定义的邮箱作为新用户加入，这里有官方教程

记住，一定要保管好它们，不然丢了谁都不认你 🤪

部署到 Vercel

这里是用 Vercel 来部署 Serverless API 项目，贴个大佬项目的原地址 spencerwooo/ga-hit-count-serverless，大家 Fork 下来修改下 api/config.ts 里的配置就可以用了

修改 config.ts 的配置

/**
 * Google Analytics query configurations
 *
 * ! If you are deploying this with your own account
 * ! , then you will need to change this config file.
 * ! Don't put your privateKey inside this file directly!
 */
export default {
  viewId: "Google Analytics 视图 ID",
  auth: {
    projectId: "Project ID",
    privateKey: process.env.PRIVATE_KEY,
    clientEmail: "blog-analytics@meta-domain.gserviceaccount.com",
  },
  allFilter: ["/"],
  startDate: "2010-01-01",
};

这是配置文件的样子

这里就直接引用原文～（虽然本来就是与原文差不多的说

其中，这些内容我们都需要一一进行设置：

  • viewId：是你的 Google Analytics 视图 ID，可以在 Google Analytics 后台的 Admin » View » View Settings 中找到；
    Google Analytics 视图 ID 的设定位置
  • projectId：是刚刚凭证 JSON 文件中的 project_id，直接按照刚刚的凭证填写即可；
  • privateKey：是通过 Vercel 环境变量获取到的 API 凭证私钥，这里不要更改；
  • clientEmail：是刚刚凭证 JSON 文件中的 client_email，直接按照刚刚的凭证填写即可；
  • allFilter：是通过 Google API 查询时的前缀过滤器，比如你的网站中文章路径以 /post 开头，那么就可以设置为 ['/post']。默认为 ['/20']（因为我的文章路径是以 /2020 或 /2019 开头的）；
  • startDate：是通过 Google API 查询时设定时间段的开始时间，设定一个比较久远的时间即可，默认为 2010-01-01。
🚨 请注意！
这里千万千万不要直接将刚刚凭证中获取到的私钥直接粘贴进入 privateKey 一项之中，因为这样当我们将 config.ts 签入 git 之后，privateKey 将以明文形式保存，非常危险。

导入 Vercel

Vercel（这家伙又又又换名字了），用 GitHub 注册后，直接将刚刚 Fork 并修改好配置文件的项目导入即可，啥都不用管就是 Continue

导入完成后还需要设置 privateKey，在项目的 Project Settings - General - Environment Variables - Production 中添加一个

  • NAME 为 PRIVATE_KEY
  • VALUE 为 private_key
    • 这个 private_key 是上面的哪个 json 里的对应值，需要注意的是要把 \n 全部删除，换成换行（command + D 大胜利！）

的变量

最后需要重新触发一次部署，随便 commit 点东西更新一下就行啦

调用 API

Vercel 应该会给你分配一个类似于 https://xxxx.vercel.app 的域名，在根域名后面添加 /api/ga 访问，看看是否会将 Google Analytics 里面全部路径与访问量拉取并以 JSON response 给出

这个请求方法是后面带个 ?page={WEBSITE_PAGE_PATH}，其中 {WEBSITE_PAGE_PATH} 是你博文的相对路径，这样就会返回给定路径的浏览量啦 😆

例如现在的这篇博文，相对路径是 /posts/google-analytics-hit-count/，那么请求的将是

https://xxxx.vercel.app/api/ga?page=/posts/google-analytics-hit-count/

⚠️ 注意：我设置了自定义域名，访问的将是这样的（你可以点进去看看）

它就会返回数据给你，现在我这篇博文的浏览量是 0，返回的数据是下面这样的

[{"page":"/posts/google-analytics-hit-count/","hit":"0"}]

原文有的就到这儿了，有了 API 那该怎么用呢？下面便是一个简单的使用方法

集成到 Hexo 主题

这下，API 有了，请求格式也有了，那么就可以将它集成在自己的主题里啦 😆

下面将以我现在使用的 Hexo 主题 hexo-theme-suka 为例

这个简单的 js 就开源到 GitHub 上了，这里是地址 Lufsx/ga-hit-count，之后会写点 README，最近在考试，没啥时间呢（没啥时间搞这些？）

现在的这个 js 有一些问题，但还用还是能用哒 🤣（有时间再完善呢

创建 EJS

首先根据原主题的规范，在 /layout/_plugin/ 新建了个文件夹，用于存放所需要用到的 EJS 文件

接下来就是新建文件啦 🤪

先给它新建个 import_js.ejs 用来在头部引入 js 文件，传递一个已经搭建好的 API 地址的参数

下面是代码呢（菜鸡一个，如果有更好的写法，欢迎提出呀 🤣）

<script>
  window.post_views_api = "<%= theme.ga_hit_count.post_views_api %>";
</script>

<% if (theme.vendors.ga_hit_count) { %>
<script src="<%= theme.vendors.ga_hit_count %>"></script>
<% } else { %>
<script src="/js/ga-views.min.js"></script>
<% } %>

前面四行是定义了一个变量 window.post_views_api，值为主题配置文件中

ga_hit_count:
  post_views_api: # 是这里的值呀

它传递了你 API 所在的地址

后面的五行则是引入了 js 文件，顺便判断了下有无自定义 js 地址，没有就返回内置的，这个自定义地址在主题配置文件中长这样

vendors:
  ga_hit_count: # 这里就是自定义的地址呢

接着在同目录下创建个 post-counter.ejs

<!-- GA Hit Count Post Views -->
<span id="post-meta-views" hidden>
    <span class="suka-devide-dot"></span>
    <span><%- theme.ga_hit_count.before %></span>
    <span id="pv-counter">loading</span>
    <span><%- theme.ga_hit_count.after %></span>
</span>

这里是直接复制主题带的另外一个浏览量统计的（懒

定义了一个 id 为 post-meta-views 的 <span> 包裹着 pv-counter 的 <span>

引入 EJS

全局引入的 EJS 文件是这个 /layout/_partial/source/footer.ejs

简单添加几句直接带走

+    /* GA Hit Count */
+    if (theme.ga_hit_count.enable) html += partial('_plugin/hit-count/import_js');

这里判断主题文件中的 enable 值是否为 true，是则引入 _plugin/hit-count/import_js

我主题在博文页面引入统计所用的 EJS 文件是这个 /layout/_partial/post/header-info.ejs

简单添加几句再次带走 😆

+        <% if ( (theme.ga_hit_count.enable) ) { %>
+            <%- partial('_plugin/hit-count/post-counter', {}, {cache: theme.fragment_cache}) %>
+        <% } %>

这里判断主题文件中的 enable 值是否为 true，是则引入 _plugin/hit-count/post-counter

ga_hit_count:
  enable: true # 是看这里是不是 true 呢

核心 js

引入都搞好啦，那么最核心的地方就是编写 js 了（虽然没啥技术含量，还实现的不太完美）

js 文件开源在 GitHub 上，这里是地址 Lufsx/ga-hit-count

相关作用与解释直接打注释上了（懒～

(async () => {
  // 找到 id 为 pv-counter 的
  var obj = document.getElementById("pv-counter");
  // 同上
  var show = document.getElementById("post-meta-views");
  // 获取 URL
  var url = document.location.toString();
  var arrUrl = url.split("//");
  var start = arrUrl[1].indexOf("/");
  // 截取 URL 中，从第一个 / 开始的地址
  var relUrl = arrUrl[1].substring(start);
  // 如果相对地址中带有参数，那么截掉
  //例如微信打开的东西后面都会带一串炒鸡长的参数
  if (relUrl.indexOf("?") != -1) {
    relUrl = relUrl.split("?")[0];
  }
  // 从 API 获取数据
  const json = await fetch(
    `${window.post_views_api}?page=${relUrl}`
  ).then((res) => res.json());
  // 赋值 hit 为浏览量
  const hit = json[0].hit;
  // 如果 hit 不是未定义，存在 id 为 post-meta-views
  if (hit !== undefined && show !== null) {
    // 那么将 id 为 pv-counter 的内容替换为浏览量
    obj.innerHTML = `${hit}`;
    // 并将它可见
    show.hidden = false;
  }
})();

js 的效果大概就是获取浏览量，获取完成后写入，再将元素设置为可见

成果

最后，主题配置文件是这样子的

ga_hit_count:
  enable: true
  post_views_api: https://api.isteed.cc/api/ga # Example: https://domain.com/api/ga
  before: # html tag support
  after: Views # html tag support
vendors:
  ga_hit_count: # 这里就是自定义的地址呢

最终效果就如你现在浏览的这一篇博文一样呢

碎碎念

终于又重上了浏览量统计啦

这个东西的好处就是直接使用 Google Analytics 数据，一个 Google Analytics 统计代码通吃

但数据更新不太及时呢，而且原 Google Analytics 又特别阻碍页面的加载，不过还好，可以使用 SukkaW/cloudflare-workers-async-google-analytics、giuem/ga-proxy 等解决方案

什么？你问我 macOS 应用推荐第二期去哪儿了？当然是咕了 🤪

不过已经在写了（指新建文件

参考链接/关联阅读

PRIN BLOG
Spencer’s Blog

本文作者 : Lufs
本文采用 CC BY-NC-SA 4.0 许可协议。转载和引用时请注意遵守协议！
本文链接 : https://blog.isteed.cc/post/google-analytics-hit-count/

本文最后更新于 天前，文中所描述的信息可能已发生改变

本文发表于  , 最后修改于 

分享