在 hugo 中异步加载 Google Analytics

2022/2/16 - 2023/12/8

状态：

实际上，我并没有选择 Google Analytics，而是在我的博客中加载了 Cloudflare Web Analytics。一来是因为 Cloudflare 的加载的 js 更小，二来是 Cloudflare 的面板更简洁，没有那么多我不需要的数据。

尽管和 gtag.js 或者 analytics.js 比起来，Cloudflare 引入的 js 经过 gzip 压缩之后仅有 5.51kb，但是 Cloudflare 在国内的响应速度实在不敢恭维。加载这个 js，让本就很慢的网站更是雪上加霜。

Sukka 的这篇文章「使用 Cloudflare Workers 加速 Google Analytics」早就看过，但没有细看。最近在看 Sukka 的其它文章时又看到了这篇文章。其使用的 cfga.js 不仅可以使用 jsdelivr 加速，大小也只有 1kb，便决定使用 cfga。

Cloudflare Workers async Google Analytics

GitHub：https://github.com/SukkaW/cloudflare-workers-async-google-analytics

cfga 并不收集全部数据，只收集基本数据以及加载性能。具体请参阅「使用 Cloudflare Workers 加速 Google Analytics」，这篇文章中列出了具体收集的数据。

在 Cloudflare Workers 中部署 cfga

从名字中就可以看出来，cfga 需要在 Cloudflare Workers 中部署。这一过程非常简单——打开 Cloudflare，创建一个新的 Workers，进入快速编辑，删除原有的内容，并且粘贴上这些内容，就大功告成了。如果你愿意，你也可以为它绑定一个路由。

获取 Google Analytics 的 TrackerID

为了使用 cfga，你需要的是 TrackerID。它必然以 UA 开头，例如 UA-114514-1919810。长得像 G-XXXXXX 的 ID 不是我们所需要的。如果你在 Google Analyics 中新创建了一个媒体资源，那么默认你是没有 TrackerID 的。在创建媒体资源时，点击显示高级选项，然后勾上创建 Universal Analytics 媒体资源对应的开关，这样你的网站就可以拥有 TrackerID 了。

配置 hugo

假设你的 hugo 目录是 hugo-mul，主题的名字叫 hugo-zhut。

进入 hugo-mul/themes/hugo-zhut/layouts/partials，新建文件 cfga.html，内容如下。

<script>
  window.ga_tid = {{ .Site.Params.analytics.tid }};
  window.ga_api = {{ .Site.Params.analytics.api }};
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" async></script>

这一步将 cfga 加入 hugo 中，但目前 hugo 还不知道如何使用它。接着打开 hugo-mul/themes/hugo-zhut/layouts/_default/baseof.html，找到 <body> 标记，在 <body> 之前加上以下内容。

{{ if .Site.Params.analytics.enable }}
    {{- partial "cfga.html" . -}}
{{ end }}

这样，hugo 就能够正确引入 cfga.html 了。然后我们需要配置 cfga.html。打开 hugo-mul/config.toml，在 [params] 下方（如果你不介意你的 config.toml 看起来很乱，你可以随便找一行把下面的内容塞进去）添加以下内容。

[params.analytics]
    enable = "true"
    tid = "UA-114514-1919810"
    api = "https://example.com/"

在 tid 处填入 TrackerID，在 api 处填入 Cloudflare Workers 中配置的路由。

生成

最后只需要执行 hugo --minify 即可。

参考

「使用 Cloudflare Workers 加速 Google Analytics」，作者：Sukka

「从 Google Analytics 的统计代码说起 —— 谈谈 script 标签的 async 和 defer 属性」，作者：Sukka