Vercelで作ったサイトにGoogle Analyticsを設定する方法【初心者向け完全ガイド】
はじめに
「せっかく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の環境変数として登録する - 連携用コンポーネントをサイトの全ページに読み込ませる
- デプロイ後はリアルタイムレポートで動作確認する
「環境変数」「コンポーネント」など、最初は難しく感じた言葉も、意味を理解すれば怖くありません。この記事が、あなたのサイト運営の第一歩になれば嬉しいです。