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 アカウントを作成します（1 つの 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をご覧ください。

構築したばかりで、データは少ないです

構築方法#

自分で構築したくない / サーバーがない場合は、公式デモを使用することもできます：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 はリンクを共有することもできます。詳細な統計ページではないが、管理者ではない人に見せることができます。サイトの設定で設定できます。