Hexo 的幾個網站流量分析工具 - umami 和 Google Analytics

搭好了網站，如何知道自己的網站被多少人訪問了呢？還是訪問者只有自己？🤣
在 WordPress 下，有不少插件可以一站式解決網站流量分析監控的問題；但是在 Hexo 或者類似的靜態博客中，就要自己折騰一下了。
本文主要介紹的是 Google Analytics 和自建的 umami 流量分析。

什麼是網站分析工具？#

網站分析工具可以可以跟踪和分析網站的流量、用戶行為等數據

對於大型網站來說，可以幫助網站管理者更好地理解用戶，並優化網站的設計和營銷策略，以提高用戶的滿意度和轉換率

而對於我們這些小站點來說，大概就是可以看看除了自己之外，還有幾個人瀏覽了自己的網站（

前置知識：使用 Hexo 注入器添加 HTML 片段#

絕大多數的網站分析工具的工作方式都是在 HTML 的 <head> 中添加一段 <script>，所以我們需要在站點的每一個頁面上都注入一段工具提供給我們的代碼，這就需要用到 Hexo 注入器。

文檔在此：注入器（Injector） | Hexo，不過我們並不需要用到所有的參數，按照下面的步驟來即可。

在 Hexo 的根目錄新建一個 scripts 文件夾（與 source 和 theme 文件夾同級）
在 scripts文件夾中新建一個 js 文件，名稱任意，可以用 analytics.js 的名字
在 js 文件中添加一行：

hexo.extend.injector.register('head_begin', '要注入的片段')

此時，你的統計代碼就已經加進了 Hexo 的所有頁面了。如果只想統計幾個頁面（不推薦這樣做），或者想要排除幾個頁面，可以去文檔裡翻翻。

在添加後，可以在瀏覽器裡 F12 找到。

Google Analytics#

Google Analytics 可以說是目前可以免費使用的功能最強大的網站分析工具了，你想要的它都有。

註冊並獲取追蹤代碼#

打開 https://analytics.google.com/，用 Google 帳號登錄。

然後按照提示，創建 Google Analytics 帳號（一個 Google 帳號可以創建 100 個 GA 帳號，用來管理不同的資源），然後在這個 GA 帳號下創建媒體資源，最後在 “開始收集數據” 頁面選擇平台 “網頁”，輸入名稱和域名以創建數據流。

在此之後，理論上會彈出一個頁面，包含了 Google 提供的代碼，如果沒有，可以按照以下路徑找到：

左下角管理 - 選擇正確的帳號和媒體資源 - 數據流 - 進入創建的數據流詳情 - 查看代碼說明 - 手動添加

查看代碼 1

查看代碼 2

添加代碼#

一般來說，主題都已經集成了 Google 代碼的功能，只要在對應的 _config.<theme name>.yaml 中添加 UA- 開頭的代碼即可。但是，Google 停止使用了 UA- 開頭的代碼，轉而使用 G- 的代碼，原 UA- 代碼從 2023 年 7 月 1 日起不再收集信息。而大多數主題還沒有適應這一變化，所以只能使用上面注入器的方法。由於行數很多，可以先定義一個字符串。

const google_ana = `
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-*******"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-*******');
</script>
`
hexo.extend.injector.register('head_begin', google_ana)

使用#

首頁看看，信息還是挺多的，不過對於小站來說，大多數數據都用不到（

umami#

umami 的自我介紹就是 Google Analytics 的替代品，功能上對標 GA，對於小站來說夠用；同時可以（並且推薦）自建，對於注重隱私的人來說更加重要。同時，界面比 Google Analytics 簡潔大氣許多。

本站的 umami 共享鏈接：umami | Yunfi's Blog，可以看看。

剛剛搭的，數據有點慘淡

搭建#

不想自建 / 沒有服務器的，也可以使用官方 demo ：Login | umami

搭建文檔：Getting started | umami

前置教程：用 Nginx Proxy Manager 可視化管理 Nginx | Yunfi's Blog，包含了安裝 Docker 和設置反代的教程。

我用的 docker-compose.yml：

version: '3'
services:
  umami:
    image: docker.umami.dev/umami-software/umami:postgresql-latest
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      APP_SECRET: replace_with_random_string
    depends_on:
      - db
    restart: always
  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: umami
    volumes:
      - ./sql/schema.postgresql.sql:/docker-entrypoint-initdb.d/schema.postgresql.sql:ro
      - ./umami-db-data:/var/lib/postgresql/data
    restart: always

默認用戶名 admin，默認密碼 umami

添加監控站點#

這個不用多說了吧，記得把代碼複製一下就行，然後和 Google Analytics 一樣操作，把代碼注入進去即可。

umami 還可以分享鏈接，讓不是管理員的人看到一個不是很詳細的統計頁面，在站點設置裡。