Cloudflare PagesにGoogle Analytics 4を導入する方法｜静的ブログでアクセス解析する

Cloudflare Pagesで静的ブログを公開したあと、「実際に何人来たのか」「どの記事が読まれたのか」を確認するために、Google Analytics 4（GA4）を導入しました。

この記事では、実際にこのブログへGA4を設定した流れをもとに、Cloudflare Pages + GitHub管理の静的サイトへGA4を入れる方法をまとめます。

1. GA4プロパティを作る

Google Analyticsで新しいプロパティを作成し、ブログ用のプロパティ名、タイムゾーン、通貨などを設定します。

Google公式では、ウェブサイトのGA4設定は「プロパティ作成 → データストリーム作成 → Googleタグ設置」の流れで案内されています。

2. ウェブデータストリームを作成する

データストリームでは、対象サイトのURLとストリーム名を入力します。

このブログでは最初にpages.devのURLで作成し、その後独自ドメインへ移行したタイミングでストリームURLを新ドメインへ更新しました。

3. 拡張計測はONにした

ウェブストリーム作成時に表示される「拡張計測機能」はONにしました。

Google公式でも、拡張計測を有効にするとページビューなどのイベントを追加コードなしで収集でき、必要なイベントだけ後から個別に無効化できるため、作成時は有効化を推奨しています。

ブログでは、ページビューだけでなくスクロールや外部リンククリックなども把握しやすくなります。

4. 測定IDを確認する

ウェブストリームを作成すると、G-から始まる測定IDが表示されます。

Google公式では、この測定IDがサイトとGA4のデータストリームを結びつける識別子とされています。

実際のサイトでは自分の測定IDを使用しますが、記事やサンプルでは次のような形式で扱えば十分です。

G-XXXXXXXXXX

5. 静的サイトでは全ページのheadへGoogleタグを入れる

Cloudflare Pages自体にGA4専用設定があるわけではありません。生成されるHTMLへGoogleタグを入れれば計測できます。

このブログでは、各記事へ手作業でタグを貼るのではなく、ビルドスクリプト側で測定IDを読み取り、公開ページの<head>へGoogleタグを自動挿入するようにしました。

こうしておけば、新しい記事を増やしてもGA4タグを貼り忘れません。

設定値は1か所にまとめる

測定IDはサイト設定ファイルへ置き、ビルド時に利用しています。

考え方としては次のような形です。

{
  "ga4MeasurementId": "G-XXXXXXXXXX"
}

測定IDが空ならタグを出さず、設定されている時だけ本番HTMLへ出力する構成にすると管理しやすくなります。

6. リアルタイムレポートで確認する

設定後、Cloudflare Pagesのデプロイ完了を確認し、実際にブログを開きました。

GA4のリアルタイム画面にアクティブユーザーが表示されたため、タグが正常に動いていることを確認できました。

Google公式でも、タグ設置後のデータ収集確認にはリアルタイムレポートを使えると案内しています。データ収集開始まで最大30分程度かかる場合があります。

7. リアルタイムと通常レポートには時間差がある

導入直後、リアルタイムではユーザーが見えているのに、通常レポートや外部コネクタ経由ではまだ0件という状態になりました。

これは異常ではありません。Google公式では、標準プロパティのデータ処理はリアルタイムより遅く、レポートやデータ探索では24〜48時間かかる場合があると案内しています。

今回も時間が経つと通常データが取得できるようになりました。

AdBlockを使っている場合の注意

自分のブラウザで広告・トラッキングブロッカーを使っている場合、GA4への送信が止まり、テストアクセスが見えないことがあります。

設置確認時だけ対象サイトでブロッカーを無効化し、リアルタイム画面に自分のアクセスが出るか確認すると切り分けしやすくなります。

GA4を入れた後にできること

• ユーザー数
• ページビュー
• セッション
• 読まれているページ
• 流入元
• エンゲージメント
• 拡張計測イベント

さらにこのブログでは、Windsor.aiを使ってGA4をChatGPTから読めるようにもしました。

ChatGPTからGA4のアクセス数を見る方法はこちら

まとめ

Cloudflare Pagesへ独自ドメインを設定した実例も読む

Cloudflare PagesをSearch Consoleへ登録する手順はこちら

参考情報

• Google Analytics：新しいウェブサイトのセットアップ
• Google Analytics：測定ID
• Google Analytics：データ収集の確認
• Google Analytics：データの鮮度