Vercelで作ったサイトにGoogle Analyticsを設定する方法

2026年3月22日更新 2026年6月22日

Shiori

はじめに

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

この記事では、Vercel環境でのGoogle Analytics設定 を、Google Analytics側の測定ID取得、Vercelの環境変数設定、Astroコンポーネントへの組み込みという順番で整理します。

この記事で学べること

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

設定時につまずきやすい点

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

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

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

まず全体の流れをつかみましょう

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

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

この3つが揃って、初めてアクセスデータが記録されます。どれか一つが欠けていると動作しないので、順番通りに進めることが大切です。

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

ステップごとの解説

Google Analyticsとは何か

Google Analytics（グーグルアナリティクス）とは、Googleが提供するサイト分析ツールのことです。[1]

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

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

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

ステップ1: Google Analyticsアカウントの準備

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

作成が完了すると、測定ID（G-XXXXXXXXXX という形式のコード）が発行されます。

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

ステップ2: Vercelに「環境変数」を設定する

「環境変数」とは何か

環境変数とは、特定の環境（本番サイトなど）でだけ使う、秘密の値を安全に保管する仕組みのことです。

たとえるなら、「鍵のかかった引き出し」のようなものです。測定IDをコードに直接書き込む代わりに、この引き出しに入れておき、コードからそこを参照させます。こうすることで、GitHubなどに公開しているコードに測定IDが露出しないようにできます。

設定手順

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

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

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

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

ステップ3: 連携用コードを追加する

次に、サイトのコードにGoogle Analyticsと連携するための記述を追加します。変数名はPUBLIC_GA_IDですが、NEXT.JSの時の変数は、NEXT_PUBLIC_GA_IDになるので、採用したフレームワークによって変数が異なることに注意してください。

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 Manager スクリプト */}
    <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() {
        gtag('event', 'page_view', {
          page_location: window.location.href,
          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にページビューを通知する」という役割を果たしています。

ステップ4: コンポーネントをレイアウトに組み込む

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

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

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

特に注意したいポイント

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

動作確認の方法

Vercelに変更をデプロイします
公開されたサイトをブラウザで開きます
Google Analyticsの管理画面 → 「レポート」 → 「リアルタイム」を開きます
自分自身がユーザーとして表示されていれば、設定は成功です

反映まで少し時間がかかることがあります。リアルタイムで表示されない場合も、5〜10分ほど待ってから再確認してください。

よくあるトラブルと対処法

症状	考えられる原因	対処法
データが全く記録されない	環境変数名が違う	`PUBLIC_GA_ID` のスペルを確認
リアルタイムに自分が表示されない	広告ブロッカーが有効	ブラウザの拡張機能を一時的に無効化して確認
測定IDが読み取れない	デプロイが完了していない	Vercelのデプロイログを確認

始めてみましょう

Google Analyticsの設定は、一度完了するとデータが自動で蓄積されていきます。手順を3つに分けると、確認すべき場所が明確になります。

まとめ

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

Google Analytics とは、サイトのアクセス状況を計測できるGoogleのツール
測定ID（G-XXXXXXXXXX）を取得し、Vercelの環境変数として登録する
連携用コンポーネントをサイトの全ページに読み込ませる
デプロイ後はリアルタイムレポートで動作確認する

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

このページの外部仕様・背景情報は、参考文献を参照してください。[2]

参考文献

Google, Google Analytics
Vercel, Environment Variables, Vercel Docs
Astro, Environment variables, Astro Docs