Google Analytics 4（GA4）の始め方とAstroへの導入手順

  • GA4
  • Google Analytics
  • Astro
  • Vercel

Web サイトを公開したあと、まず知りたくなるのは「どのくらい見られているか」「どのページが読まれているか」といった基本的なアクセス状況です。小規模なサイトや立ち上げ直後のサイトなら、最初は Google Analytics 4（GA4）を単体で入れるだけでも十分なことが多いです。

ここでは、GA4 のプロパティ作成から Astro への導入までを順に整理します。あわせて、あとから迷いやすい Google Tag Manager（GTM）を使うべき場面もまとめます。

まず何を作るのか

GA4 を使い始めるときは、ざっくり次の順で準備します。

  1. Google Analytics のアカウントを作る
  2. その中に GA4 のプロパティを作る
  3. Web データストリームを作る
  4. 発行された 測定 ID（G-XXXXXXXXXX） をサイトに埋め込む

まずはこの流れを押さえておけば十分です。

GA4 のプロパティを作る

  1. Google Analytics を開く
  2. Google アカウントでログインする
  3. 左下の 管理 を開く
  4. アカウントを作成 を選ぶ
  5. アカウント名 を入力する
  6. アカウントのデータ共有設定を確認して 次へ
  7. プロパティ名 を入力する
  8. レポートのタイムゾーン を 日本 にする
  9. 通貨 を 日本円 にする
  10. 次へ を押す
  11. 業種、ビジネス規模、利用目的を選ぶ
  12. 作成 を押して規約に同意する

ここで作る「プロパティ」は、サイトやサービス単位の計測先と考えるとわかりやすいです。

Web データストリームを作る

プロパティ作成後は、実際に Web サイトからデータを受け取るための設定を作ります。

  1. データ収集を開始 で ウェブ を選ぶ
  2. ウェブサイトの URL に本番 URL を入れる
  3. ストリーム名 を入力する
  4. ストリームを作成 を押す
  5. 表示された 測定 ID を控える

測定 ID は次のような形式です。

G-XXXXXXXXXX

この値を、あとで Astro 側の環境変数に入れます。

Astro サイトに埋め込む

Astro では、測定 ID を 環境変数に持たせて、共通の <head> コンポーネントから読み込む形にしておくと管理しやすいです。

1. .env に測定 ID を入れる

プロジェクト直下の .env に、次のように設定します。

PUBLIC_GA_ID=G-XXXXXXXXXX

Astro でブラウザ側に出す環境変数は、PUBLIC_ 接頭辞が必要です。

2. 共通 head に gtag.js を入れる

共通の head コンポーネントで、環境変数から測定 ID を読み込みます。

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

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

これを全ページで通る共通の <head> に置けば、ページ単位の入れ漏れを防ぎやすくなります。

Vercel にも環境変数を入れる

ローカルだけ .env に書いても、本番環境に同じ値が無いと計測されません。Vercel を使っているなら、管理画面でも同じ環境変数を登録します。

  1. 対象プロジェクトを開く
  2. Settings → Environment Variables
  3. PUBLIC_GA_ID を追加する
  4. 再デプロイする

これで本番サイトでも GA4 が読み込まれる状態になります。

動作確認

設定後は、次の順で確認するとわかりやすいです。

ブラウザ側の確認

  • ページを開く
  • 開発者ツールで gtag/js?id=G-... が読み込まれているか確認する
  • Elements やページソースで埋め込みスクリプトが入っているか確認する

GA4 側の確認

  • リアルタイム レポートを開く
  • 自分のアクセスが反映されるか確認する

初回は反映まで少し時間がかかることがあります。

まずはここまでで十分

初回導入では、次の状態を作れればひとまず目的を果たせます。

  • GA4 プロパティが作成済み
  • Web データストリームが作成済み
  • 測定 ID が取得済み
  • サイトの全ページで gtag.js が読み込まれている
  • リアルタイムでアクセス確認ができる

イベント計測やコンバージョン、GTM 連携は、そのあと必要になった段階で足していけば十分です。

Q&A

Q. script タグに測定 ID を直接書かず、環境変数を経由するのはなぜ？

一番の理由は、設定値と実装コードを分けて管理しやすくするためです。

GA4 の測定 ID 自体は秘密情報ではないので、直書きしても動作上は問題ありません。ただ、実務では次の理由から環境変数にしておく方が扱いやすくなります。

  • 環境ごとに差し替えやすい
    ローカル、ステージング、本番で測定 ID を変えたいときに、コードではなく設定だけを切り替えられます。

  • ハードコードを避けやすい
    測定 ID の変更時に script タグの中身を直接編集しなくて済むため、修正漏れやコミットノイズが減ります。

  • デプロイ先で管理しやすい
    Vercel などでは環境変数を管理画面で設定できるので、本番用の値をコードから切り離して運用できます。

  • 未設定時に無効化しやすい
    gaId && (...) のように書いておけば、環境変数が無い環境では GA タグ自体を出さない構成にできます。

小さなサイトで、測定 ID が 1 つ固定で変わらないなら直書きでも十分です。ただ、あとから差し替えや環境追加が起きやすいため、最初から環境変数にしておく方があとで楽なことが多いです。

Q. Google Tag Manager（GTM）はいつ必要になる？

最初の導入段階では、GA4 単体で十分なことが多いです。特に、小規模サイトで「まずページビューを見たい」という段階なら、サイトに gtag.js を直接入れるだけで足ります。

一方で、次のような状況では GTM の導入を検討する価値があります。

  • GA4 以外のタグも増えるとき
    例: 広告タグ、SNS ピクセル、ヒートマップなど

  • イベント計測が増えるとき
    例: クリック、フォーム送信、資料ダウンロード、スクロール到達

  • コードを毎回触らずに運用したいとき
    マーケ担当や運用担当が、開発者を介さずタグ管理したい場合

  • Cookie 同意や同意モードと連動したいとき
    同意状況に応じてタグの発火を切り替えたい場合

目安としては、計測が 1 つで単純なら GA4 直書き、タグ運用が増えるなら GTM と考えると判断しやすいです。