AstroブログにGoogle Analytics 4を導入する方法 • Nainaism

ブログを書いていると、ふと思うことがあります。

"これって、どれくらいの人に読まれてるんだろう？"

記事を公開したはいいものの、アクセス数がわからない。どの記事が人気なのか、どこから来ているのか。手探り状態で書き続けるのは、なかなかもどかしいですよね。

nainaism.comでも同じ課題がありました。Astroでビルドした静的サイトをCloudflare Pagesで配信しているのですが、アクセス解析が一切入っていませんでした。そこでGoogle Analytics 4（GA4）を導入したので、その手順をまとめます。

Astro + Cloudflare Pagesの環境を前提にしていますが、Astro部分の知識は他のホスティング先でも使えるはずです。

この記事の対象読者#

Astroでブログを運営していて、GA4を導入したい人
Cloudflare Pagesにデプロイしている人
gtag.jsの組み込み方を知りたい人
環境変数で測定IDを管理したい人

まずはGA4プロパティを作成する#

コードを書く前に、Google Analytics側でプロパティを作って測定IDを取得する必要があります。

手順#

Google Analytics（https://analytics.google.com/）にアクセス
左下の歯車アイコン＞アカウントを作成（または既存アカウントを選択）
プロパティの設定画面で、ウェブサイトのURLとストリーム名を入力
ストリーム作成後に表示される測定ID（G-XXXXXXXXXX）をメモ

この測定IDが、サイトに組み込むトラッキングコードの肝になります。控えておきましょう。

⚠️

測定IDは他人に共有しないようにしましょう。.envファイルは.gitignoreに含めておき、.env.exampleにテンプレートだけ残す運用がおすすめです。

実装方法は2つ#

AstroにGA4を組み込む方法は、主に2パターンあります。

1. @astrojs/partytown を使う#

Astro公式のanalyticsインテグレーションです。サードパーティスクリプト（gtag.jsなど）をWeb Workerで実行するので、メインスレッドをブロックしません。ページ表示速度への影響が少ないのがメリットです。

2. BaseHead.astro に直接 script を書く#

AstroのBaseHead.astro（またはLayout.astro）に直接gtag.jsのscriptタグを差し込む方法です。設定ファイルの追加が不要で、シンプルに済みます。

今回nainaism.comでは2番目の方法を採用することにしました。理由は後述します。

gtag.jsを組み込む#

AstroプロジェクトにGA4のトラッキングコードを組み込みます。ポイントは2つ。測定IDをハードコードせず環境変数で管理することと、is:inlineディレクティブを使ってscriptをそのまま出力することです。

環境変数の設定#

まずは測定IDを環境変数に設定します。

PUBLIC_GA_ID=G-XXXXXXXXXX

bash

Cloudflare Pagesの場合、ダッシュボードの「Settings ＞ Environment variables」からも設定できます。ローカル開発時は.envファイルに書いておけばOKです。

BaseHead.astro（またはLayout.astro）に追記#

Astroのレイアウトファイルの<head>タグ内に以下を追記します。

---
const gaId = import.meta.env.PUBLIC_GA_ID;
---

{gaId && (
  <>
    <script
      is:inline
      async
      src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
    ></script>
    <script
      is:inline
      set:html={`
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${gaId}');
      `}
    ></script>
  </>
)}

text

いくつか補足します。

is:inline — Astroはデフォルトでscriptタグをbundle処理しますが、gtag.jsは外部スクリプトなのでis:inlineが必要です。これを忘れるとscriptが出力されません。
環境変数のガード — gaId &&で囲むことで、環境変数が未設定のときは何も出力されません。開発環境と本番で出し分けたいときに便利です。
set:html — AstroのHTMLエスケープを無効化して、生のJavaScriptをそのまま出力するディレクティブです。通常Astroはscriptタグ内を安全に処理しますが、gtag.jsのような外部スクリプトのコードをそのまま流し込みたい場合はこれが必要になります。

⚠️

Astroのscriptタグに is:inline を付け忘れると、gtag.jsが一切出力されません。トラッキングされない原因の大半はこれです。

なぜPartytownを使わなかったのか#

"Partytownのほうがパフォーマンス的に優れているのでは？"と思う人もいるかもしれません。実際、Astro公式ドキュメントでもanalyticsインテグレーションとして紹介されています。

ただ、nainaism.comのような静的ブログでは、gtag.jsの読み込み自体が非同期（async）で済むので、メインスレッドへの影響は最小限です。Partytownを導入すると依存パッケージが増え、設定ファイルの管理も発生します。小規模サイトにとってはオーバーエンジニアリングに感じました。

サイトの規模や要件によってはPartytownが正解のケースもあります。トラフィックが多いサイトや、Core Web Vitalsのスコアをシビアに追っているなら検討する価値があります。

動作確認#

コードを書いたら、実際にトラッキングされているか確認します。手順は以下の通りです。

1. プレビュービルドで確認#

npm run build
npm run preview

bash

プレビューを立ち上げてブラウザで開き、DevToolsのNetworkタブを確認します。googletagmanager.comへのリクエストが飛んでいれば、scriptの組み込みは成功です。

2. GA4リアルタイムレポートで確認#

Google Analyticsを開く
左メニューから「レポート＞リアルタイム」を選択
プレビュービルドのURLにブラウザでアクセスする
リアルタイムレポートにアクティブユーザーが表示されればOK

デプロイ後も同じように確認します。Cloudflare Pagesへのデプロイが完了したら、公開URLにアクセスしてGA4リアルタイムレポートを確認しましょう。数秒〜数十秒で反映されるはずです。

💡

プレビュービルド（localhost）からのアクセスもGA4に記録されます。開発中のデータが本番に混ざらないよう、環境変数で出し分けるのがおすすめです。

まとめ#

AstroブログへのGA4導入、やってみると意外とシンプルです。

GA4プロパティを作成して測定IDを取得
環境変数に測定IDを設定
BaseHead.astroにgtag.jsをis:inlineで組み込み
リアルタイムレポートで動作確認

この4ステップで完了します。

アクセス解析ができるようになると、記事ごとの読まれ方や流入経路が見えてきて、ブログ運営のモチベーションにもつながります。まだ導入していない方は、ぜひ試してみてください。