初心者

Vercelで作ったサイトにGoogle Analyticsを設定する方法【初心者向け完全ガイド】

2026年3月22日

Shiori

はじめに

「せっかくVercelでサイトを公開したのに、誰かが見てくれているのかわからない……」

そんな気持ちになったことはありませんか？

サイトを作って公開するところまではできた。でも、アクセス状況を確認しようとGoogle Analyticsの設定に挑戦したら、見慣れない言葉ばかりで途中で諦めてしまった。これは、決して珍しい経験ではありません。

この記事では、そんな方のために Vercel環境でのGoogle Analytics設定 を、できるだけ平易な言葉でステップごとに解説します。コードの知識がほとんどなくても、この記事を読み終えるころには「自分でできた！」という感覚を持っていただけるはずです。

この記事で学べること

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

こんな悩み、ありませんか？

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

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

これらは、エンジニアでない方がGoogle Analytics設定を調べたときに、最もつまずきやすいポイントです。専門用語の説明が少なく「当然知っているもの」として話が進むドキュメントが多いことが、混乱の原因になっています。

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

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

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

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

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

ステップごとの解説

Google Analyticsとは何か

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

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

訪問者数: 何人がサイトを訪れたか
ページビュー数: 各ページが何回表示されたか
滞在時間: ユーザーがどのくらいの時間サイトに居たか
流入元: 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」 をクリックして保存します

💡 なぜ変数名に PUBLIC_ をつけるのか？ フロントエンド（ユーザーのブラウザ上で動く部分）のコードから参照できるようにするための決まりごとです。PUBLIC_ がない変数は、セキュリティの観点からブラウザ側のコードでは読み取れない仕組みになっています。Astroのは

ステップ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の環境変数として登録する
連携用コンポーネントをサイトの全ページに読み込ませる
デプロイ後はリアルタイムレポートで動作確認する

「環境変数」「コンポーネント」など、最初は難しく感じた言葉も、意味を理解すれば怖くありません。この記事が、あなたのサイト運営の第一歩になれば嬉しいです。