VercelでGoogle Analyticsを設定・検証する手順

2026年3月22日更新 2026年9月16日

パステルのリング惑星と軌道を背景に「VercelでGoogle Analyticsを設定・検証する手順」を配置した記事カバー

この記事で学べること

Google Analyticsの測定ID、Vercel環境変数、Astroコードを分けて設定する手順
Google tagをコンポーネントとして読み込み、手動送信と自動送信の重複を避ける方法
プライバシー、同意、Realtime・DebugView・Tag Assistantを含む完了確認

VercelのGoogle Analytics設定は環境変数と読込位置を分ける

Vercelで公開するAstroサイトのアクセス計測を安定させるには、測定ID、環境変数、コードの読込位置を別々に設定し、最後にブラウザでイベント受信を確認する必要があります。どれか1つを登録しただけでは、設定済みに見えても計測されない場合があります。完了条件には、プライバシーと同意管理の確認も含めます。

この記事では、「測定ID、環境変数、読込コード、同意確認をどの順で設定・検証すればよいか」という問いに焦点を当て、実行前の前提、作業手順、完了を確かめる方法を扱います。

最後まで読むと、「測定ID、環境変数、読込コード、同意確認をどの順で設定・検証すればよいか」という問いを、自分の状況に照らして判断するための材料を持ち帰れます。

Vercelでの設定・実装・検証を一つずつ進める

測定ID、環境変数、コード読込、同意、イベント確認を分けて進める流れです。

Vercelでサイトを公開した後、アクセス状況を確認するにはGoogle Analyticsなどの計測ツールを設定する必要があります。

この記事では、Vercel環境でのGoogle Analytics設定を3段階に分けます。Google Analytics側で測定IDを取得し、Vercelへ環境変数を登録して、Astroコンポーネントから読み込みます。

環境ごとに測定IDを切り替えやすくするため、Vercelの環境変数を使用します。ただし、環境変数の使用自体はGoogle Analyticsの必須要件ではありません。

この記事は、GA4の測定ID、Google tag（gtag.js）、Vercelの環境変数、Astroコンポーネントを組み合わせる実装例です。Google Analytics、Vercel Analytics、Google Tag Managerは別の仕組みなので、混同しないように前提を分けて説明します。

設定後は本番ページの読込とイベント受信を確認できる

Google Analyticsとは何か、なぜ必要なのか
VercelとGoogle Analyticsをつなげる具体的な手順
設定時に知っておくと役立つ用語の意味
動作確認の方法とよくあるトラブルの対処法

測定ID・環境変数・読込位置の混同で設定が止まりやすい

Vercelでサイトを公開した後、多くの方が次のような壁にぶつかります。

「環境変数」って何？どこに設定すればいいの？
コードに何かを書き加えるよう指示されたけど、どこに書けばいいかわからない
設定したつもりなのに、Google Analyticsのダッシュボードに何も表示されない

これらは、エンジニアでない方がGoogle Analytics設定を調べたときにつまずきやすいポイントです。専門用語の説明が少なく、前提知識があるものとして話が進むと、設定全体の流れを把握しにくくなります。

測定ID・環境変数・コードを分けて進める

設定は大きく 3つのフェーズ に分かれます。

Google Analytics側の準備（測定IDを取得する）
Vercel側の設定（測定IDを環境変数として登録する）
コード側の設定（サイトとGoogle Analyticsを連携するコードを追加する）

この3つが揃って、初めてこの記事の構成でアクセスデータが記録されます。測定IDをコードへ直接書く構成も技術的には可能ですが、ここでは環境ごとの管理をしやすくするため環境変数を使います。

今回はAstroで作ったサイトでの設定方法について解説します。

Google tagをサイトへ組み込む手順

Google Analyticsとは何か

Google Analytics（グーグルアナリティクス）とは、サイトやアプリの利用状況をイベントとして収集し、レポートで確認するためのGoogleの分析サービスです。[1]

具体的には、次のような情報を自動で集めてくれます。

訪問者数: 何人がサイトを訪れたか
ページビュー数: 各ページが何回表示されたか
滞在時間: ユーザーがどのくらいの時間サイトに居たか
流入元: Google検索・SNS・直接訪問など、どこからやってきたか
行動フロー: ユーザーがどのページからどのページへ移動したか

これらのデータを見ることで、「どのページが人気なのか」「どこで読者が離脱しているのか」といったことが把握でき、サイト改善に役立てられます。

Google Analyticsアカウントの準備

まず、Google Analyticsの公式サイト（https://analytics.google.com）にアクセスします。お持ちのGoogleアカウントでログインし、画面の案内に沿ってアカウントとプロパティを作成してください。

Webデータストリームを作成すると、測定ID（通常はG-から始まるコード）を確認できます。[6]

重要: この測定IDは、次のステップで必要になります。必ずメモしておいてください。

Vercelに「環境変数」を設定する

「環境変数」とは何か

環境変数とは、特定の環境（本番サイトなど）でだけ使う、環境ごとに値を分けて管理する仕組みのことです。[2]

GA4の測定IDは秘密鍵ではありません。PUBLIC_ 変数は最終的にブラウザ側で使われるため、機密情報を入れてはいけません。環境変数にする主な目的は、環境ごとの設定変更とコードとの分離です。

Vercelで環境変数名・値・適用環境を登録する

Vercelダッシュボードにログインします
設定したいプロジェクトを選択します
画面上部の 「Settings」（設定） タブをクリックします
左側のメニューから 「Environment Variables」 を選択します
以下の内容で新しい変数を追加します

項目	入力値
変数名（Key）	`PUBLIC_GA_ID`
変数値（Value）	`G-XXXXXXXXXX`（取得した測定ID）

「Save」 をクリックして保存します[2]

なぜ変数名に PUBLIC_ をつけるのか？ Astroでは、クライアント側へ公開する環境変数に PUBLIC_ プレフィックスを付けます。PUBLIC_ がない変数は、セキュリティの観点からブラウザ側のコードでは読み取れない仕組みです。[3]

連携用コードを追加する

次に、Google tag（gtag.js）を読み込む記述をサイトへ追加します。G-XXXXXXXXXX はGA4の測定IDであり、Google Tag ManagerのコンテナID GTM-XXXXXXX とは別物です。

この例の変数名はPUBLIC_GA_IDです。公開用の環境変数名はフレームワークによって異なり、Next.jsでは NEXT_PUBLIC_GA_ID のような形式を使います。[3]

Astroフレームワークを使っている場合は、以下のファイルを src/components/ フォルダ内に作成してください（ファイル名：GoogleAnalytics.astro）。

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

{gaId && (
  <>
    {/* スクリプト読み込みを高速化する設定 */}
    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
    <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin />

    {/* Google tag（gtag.js）スクリプト */}
    <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, { send_page_view: false });

      function sendPageView() {
        const pageLocation = window.location.href;
        if (window.__gaLastPageLocation === pageLocation) return;
        window.__gaLastPageLocation = pageLocation;

        gtag('event', 'page_view', {
          page_location: pageLocation,
          page_title: document.title,
          transport_type: 'beacon',
        });
      }

      if (!window.__gaListening) {
        window.__gaListening = true;
        document.addEventListener('astro:page-load', sendPageView);
      }

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', sendPageView, { once: true });
      } else {
        sendPageView();
      }
    </script>
  </>
)}

コードの役割 このコードは「環境変数から測定IDを読み取り、Google Analyticsにページビューを通知する」という役割を果たしています。

手動送信と自動送信を重ねない

この例はsend_page_view: falseで初期読み込み時の自動送信を止め、astro:page-loadに合わせてpage_viewを手動送信します。同じURLの初期イベントは__gaLastPageLocationで重複を避けます。

Google Analytics側の拡張計測で「ブラウザの履歴イベントに基づくページの変更」が有効な場合、クライアント遷移を別経路から自動計測することがあります。自動方式か手動方式のどちらかを選び、同じ遷移を二重に送らないようにします。[7]

コンポーネントをレイアウトに組み込む

作成した GoogleAnalytics.astro を、サイト全ページの <head> タグ内に読み込ませます。多くの場合、src/layouts/BaseLayout.astro などのレイアウトファイルに追記します。

---
import GoogleAnalytics from '../components/GoogleAnalytics.astro';
---

<html>
  <head>
    <GoogleAnalytics />
    <!-- 他のheadタグの内容 -->
  </head>
  <body>
    <!-- ページの内容 -->
  </body>
</html>

計測前にプライバシーと動作を確認する

設定を終えた後、次の点を確認してください。

プライバシーと同意管理

Google Analyticsを導入すると、閲覧者の端末・ブラウザ・アクセスに関する情報がGoogleへ送信されます。公開サイトでは、Google Analyticsの利用をプライバシーポリシーに記載します。対象地域や計測方法に応じて、Cookie同意とConsent Modeの導入要否も確認してください。[4][5]

必要な対応は、対象地域、取得する情報、利用目的、組織のプライバシー方針によって変わります。必要に応じて、Google Analytics利用規約、データ処理条件、社内の法務・プライバシー方針との整合も確認します。[4]

Realtime・DebugView・Tag Assistantで確認する

Vercelに変更をデプロイします
公開されたサイトをブラウザで開きます
Tag AssistantでGoogle tagが検出され、イベントが送信されているか確認します
DebugViewで初回読み込みとクライアント遷移ごとにpage_viewが1回ずつ記録されるか確認します
Google Analyticsの「レポート」→「リアルタイム」でアクセスを確認します[8]

Realtimeへの反映には遅れが生じることがあります。表示されない場合は待つだけでなく、Tag Assistant、DebugView、ブラウザのネットワークログ、測定ID、同意状態を順に確認します。[8]

計測されない場合はID・同意・読込状態を確認する

症状	考えられる原因	対処法
データが全く記録されない	環境変数名が違う	`PUBLIC_GA_ID` のスペルを確認
リアルタイムに自分が表示されない	広告ブロッカーが有効	ブラウザの拡張機能を一時的に無効化して確認
測定IDが読み取れない	デプロイが完了していない	Vercelのデプロイログを確認
1回の遷移で`page_view`が複数届く	自動計測と手動送信が重なっている	DebugViewで送信元を確認し、どちらか一方へ統一

設定完了をチェックリストで判定する

次の項目が揃ったら、設定作業を完了として記録します。

Vercelの対象環境にPUBLIC_GA_IDがあり、再デプロイが完了した
公開HTMLでGoogle tagが読み込まれている
初回読み込みとクライアント遷移でpage_viewが1回ずつ送られる
RealtimeまたはDebugViewで対象イベントを確認した
プライバシーポリシー、同意、社内規程の確認結果を残した

まとめ：測定ID・読込・同意確認を分けると計測を検証できる

この記事では、VercelサイトへのGoogle Analytics設定を次の流れで解説しました。

Google Analytics とは、サイトのアクセス状況を計測できるGoogleのツール
測定ID（G-XXXXXXXXXX）を取得し、本記事ではVercelの環境変数として登録する
連携用コンポーネントをサイトの全ページに読み込ませる
デプロイ後はRealtime、DebugView、Tag Assistantで、初回読み込みとクライアント遷移のpage_viewが二重送信されていないか確認する

「環境変数」「コンポーネント」などの言葉も、役割を分けて理解すると扱いやすくなります。この記事が、サイト運営の初期設定を進める参考になれば幸いです。

最初に対象環境の測定IDと環境変数が一致しているかを確認し、その後に公開ページのイベント受信へ進みます。サイト構成、同意要件、Google Analyticsの仕様が異なる環境では、この実装例をそのまま適用せず、利用中の設定と組織の方針に合わせて調整してください。

本記事は一般的な情報整理であり、法的助言ではありません。実務判断は専門家に確認してください。

参考文献

Google, Data collection, Google Analytics Help
Vercel, Environment Variables, Vercel Docs
Astro, Environment variables, Astro Docs
Google, Safeguarding your data, Google Analytics Help
Google, Set up consent mode on websites, Google Analytics Help
Google, Find your Google tag ID, Google Analytics Help
Google, Measure pageviews, Google for Developers, 2026年6月9日更新
Google, Verify and troubleshoot your Google Analytics setup, Google for Developers, 2026年6月8日更新

最新のリリースやアップデートの詳細は、公式サイト・公式ドキュメントを確認してください。