2026年8月31日 / 最終更新日 : 2026年8月31日 fujifuji コラム

VercelでGoogle Analyticsを導入する方法｜設定手順・GA4連携・計測確認まで解説

「VercelにGoogle Analyticsを導入したい」「Vercelで公開しているWebサイトのアクセス解析をしたい」という方に向けて、VercelとGoogle Analytics 4（GA4）を連携する方法をわかりやすく解説します。

Next.jsなどで作成したWebサイトをVercelにデプロイしている場合でも、Google Analyticsを導入することで、アクセス数やユーザーの流入経路、ページごとの閲覧状況などを確認できます。

この記事では、VercelでGoogle Analyticsを利用する方法、GA4の測定IDの確認方法、Next.jsへの実装方法、計測できない場合の対処法まで紹介します。

VercelとGoogle Analyticsは連携できる？

結論からいうと、Vercelで公開しているWebサイトにGoogle Analytics 4（GA4）を導入できます。

VercelはWebサイトを公開するためのホスティング・デプロイプラットフォームであり、Google AnalyticsはWebサイトのアクセス状況を分析するためのサービスです。

そのため、基本的には以下のような関係になります。

Webサイト
   ↓
Vercel
   ↓
Webサイトを公開
   ↓
Google Analytics 4
   ↓
アクセスデータを計測・分析

VercelそのものにGoogle Analyticsの機能があるというより、Vercelで公開しているサイトにGA4を実装するという考え方が基本です。

Google Analytics 4（GA4）とは？

Google Analytics 4は、Googleが提供しているアクセス解析サービスです。

WebサイトにGA4の計測タグを設置すると、ユーザーのアクセス状況を確認できます。

主に次のようなデータを分析できます。

ユーザー数
セッション数
ページビュー
ページごとのアクセス数
ユーザーの流入元
デバイス
国や地域
ユーザーの行動
コンバージョン

SEO対策を行っているWebサイトでは、検索流入が増えているか、どのページが読まれているかを確認するためにも役立ちます。

VercelにGoogle Analyticsを導入する方法

VercelにデプロイしているサイトへGoogle Analyticsを導入する方法はいくつかあります。

代表的なのは次の方法です。

Google AnalyticsでGA4プロパティを作成
測定IDを取得
WebサイトにGoogle Analyticsのタグを設置
Vercelへデプロイ
Google Analyticsで計測を確認

Next.jsを利用している場合は、Googleが提供するgtag.jsを利用する方法や、Next.jsのScriptコンポーネントを利用する方法があります。

1. Google Analyticsにアクセスする

まずGoogle Analyticsを開きます。

Google Analytics公式サイト

Googleアカウントでログインします。

すでにGA4を利用している場合は、既存のプロパティを利用できます。

新しくWebサイトを登録する場合は、新しいプロパティを作成します。

2. GA4プロパティを作成する

Google Analyticsでプロパティを作成します。

一般的には以下のような情報を設定します。

プロパティ名
↓
ビジネス情報
↓
データストリーム
↓
Web

Webサイトを計測する場合は「ウェブ」のデータストリームを作成します。

3. 測定IDを確認する

Webデータストリームを作成すると、測定IDが発行されます。

測定IDは通常、以下のような形式です。

G-XXXXXXXXXX

このIDが、WebサイトへGoogle Analyticsを設定するときに必要になります。

例えば、以下のような値です。

G-ABC1234567

この測定IDをVercelに設定するというより、基本的にはWebサイト側のコードから参照します。

Next.jsにGoogle Analyticsを設定する方法

Vercelで公開するWebサイトにNext.jsを利用している場合、Google Analyticsを実装する方法としてnext/scriptを利用できます。

例えば、以下のようなコードを利用できます。

import Script from 'next/script'

export default function GoogleAnalytics() {
  const GA_ID = process.env.NEXT_PUBLIC_GA_ID

  if (!GA_ID) {
    return null
  }

  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
        strategy="afterInteractive"
      />

      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', '${GA_ID}');
        `}
      </Script>
    </>
  )
}

このコンポーネントをレイアウトなどから読み込みます。

例えばApp Routerの場合は、以下のようにできます。

import GoogleAnalytics from './GoogleAnalytics'

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <GoogleAnalytics />
      </body>
    </html>
  )
}

Google Analyticsの測定IDを環境変数にする

おすすめなのが、GA4の測定IDをソースコードに直接書かず、環境変数で管理する方法です。

例えば、以下のように設定します。

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

Next.jsではクライアント側で利用する環境変数にNEXT_PUBLIC_という接頭辞を付けます。

そのため、

NEXT_PUBLIC_GA_ID

という名前にしておくと分かりやすいでしょう。

Vercelに環境変数を設定する

Vercelを利用している場合は、Vercelのプロジェクト設定から環境変数を登録できます。

Vercelのダッシュボードから対象プロジェクトを選択します。

その後、以下を開きます。

Settings
↓
Environment Variables

そこで、以下のように設定します。

Key

NEXT_PUBLIC_GA_ID

ValueにはGoogle Analyticsで取得した測定IDを入力します。

例えば、以下のように設定します。

NEXT_PUBLIC_GA_ID
G-ABC1234567

Vercelの環境変数を設定するときの注意点

Vercelでは環境変数の適用対象を設定できます。

例えば、以下のような環境があります。

Production
Preview
Development

本番サイトだけGoogle Analyticsを計測したい場合は、Production環境だけに設定するという方法もあります。

一方、プレビュー環境でも動作確認したい場合はPreviewにも設定できます。

ただし、アクセス解析のデータにテストアクセスが混ざる可能性があるため、運用方法に応じて設定しましょう。

Vercelへのデプロイ

環境変数を設定したら、サイトを再デプロイします。

GitHubとVercelを連携している場合は、コードをGitHubへpushすることで自動的にデプロイできます。

git add .
git commit -m "Add Google Analytics"
git push

Vercelでデプロイが完了したら、本番サイトへアクセスしてGoogle Analyticsが動作しているか確認します。

Google Analyticsで計測を確認する

Google Analyticsを設定しただけでは、本当に計測できているか分かりません。

そこで、実際にサイトへアクセスして確認します。

Google Analyticsの「リアルタイム」レポートを開き、自分のアクセスが表示されるか確認してください。

自分のアクセスによって現在のユーザー数などが表示されれば、計測できている可能性があります。

Google AnalyticsがVercelで計測できない場合

VercelにGA4を設定したにもかかわらずアクセスが計測されない場合は、いくつか原因が考えられます。

測定IDが間違っている

まず確認したいのが測定IDです。

正しい形式になっているか確認してください。

G-XXXXXXXXXX

測定IDをコピーするときに、余計なスペースなどが入っていないかも確認します。

Vercelの環境変数が設定されていない

コードで以下を使用している場合、Vercel側に環境変数が必要です。

process.env.NEXT_PUBLIC_GA_ID

Vercelの以下の項目を確認してください。

Settings
→ Environment Variables

環境変数を設定しただけで再デプロイしていない

これも比較的よくある原因です。

Vercelで環境変数を変更した場合、変更内容を反映させるために再デプロイが必要になるケースがあります。

設定後は、Vercelのデプロイ状況を確認しましょう。

ブラウザの開発者ツールで確認する

Google Analyticsが読み込まれているか確認する方法として、ブラウザの開発者ツールも利用できます。

ChromeなどでWebサイトを開き、以下の手順で確認します。

右クリック
↓
検証
↓
Network

Google Analytics関連のリクエストが発生しているか確認します。

また、ページのHTMLやブラウザの開発者ツールから、以下の文字列を検索して確認する方法もあります。

googletagmanager.com

Next.jsではGoogle Analyticsの設置場所に注意

Next.jsでは、従来のHTMLサイトとは構造が異なります。

特にApp Routerを利用している場合、以下のようなルートレイアウトを利用するケースが一般的です。

app/layout.js
app/layout.tsx

Google Analyticsをサイト全体で読み込む場合は、ルートレイアウトから読み込む設計が分かりやすいでしょう。

Vercel AnalyticsとGoogle Analyticsの違い

Vercelには「Vercel Analytics」という機能もあります。

ここで混同しやすいのが、Vercel AnalyticsとGoogle Analyticsは別物という点です。

項目	Vercel Analytics	Google Analytics
提供元	Vercel	Google
主な用途	Webサイトのパフォーマンス・利用状況など	アクセス解析・ユーザー行動分析
Vercelとの連携	非常に簡単	自分でGA4を実装
Google検索分析	限定的	Search Consoleなどと連携可能
ユーザー行動分析	限定的	豊富
SEO分析	補助的	GA4＋Search Consoleで分析可能

Vercelを利用しているからといって、必ずVercel Analyticsだけを使う必要はありません。

Vercel AnalyticsとGoogle Analyticsを併用することも可能です。

Vercel AnalyticsとGoogle Analyticsは併用すべき？

Webサイトを本格的に運営するのであれば、併用を検討してもよいでしょう。

例えば、以下のような使い分けができます。

Vercel
├─ Vercel Analytics
│   └─ サイトの利用状況・パフォーマンス
│
└─ Google Analytics 4
    └─ ユーザー行動・アクセス解析

さらにSEO対策を行う場合は、

Vercel Analytics
        ＋
Google Analytics
        ＋
Google Search Console

という構成も考えられます。

VercelでGoogle Analyticsを導入するメリット

SEO施策の効果を確認できる

Google Analyticsを導入すると、SEO施策を行った後にアクセス数がどう変化したかを確認できます。

SEO記事公開
↓
検索順位上昇
↓
検索流入増加
↓
ページ閲覧増加
↓
問い合わせ増加

このような流れを分析できます。

ユーザーの流入経路を確認できる

Google検索だけではなく、以下のような流入経路を分析できます。

Google
Yahoo!
SNS
他サイト
直接アクセス

これによって、SEO以外のマーケティング施策の効果も確認できます。

Vercel × Google Analytics × Search Consoleの構成

SEOを目的としてVercelサイトを運営するなら、Google AnalyticsだけでなくSearch Consoleも導入することをおすすめします。

それぞれの役割を整理すると、以下のようになります。

ツール	分かること
Vercel	デプロイ・ホスティング
Vercel Analytics	サイトの利用状況・パフォーマンス
Google Analytics	ユーザー行動・アクセス状況
Google Search Console	Google検索での表示・クリック・検索クエリ

特に、「検索されたキーワード」と「サイトに訪問した後の行動」を分けて分析できるのがポイントです。

よくある質問

VercelにGoogle Analyticsを直接設定できますか？

VercelはWebサイトをホスティングするサービスなので、基本的にはWebサイト側にGoogle Analyticsのタグを実装します。

Next.jsを利用している場合は、next/scriptなどを利用してGA4を実装できます。

Vercel AnalyticsがあればGoogle Analyticsは不要ですか？

目的によります。

Vercel Analyticsで確認できる情報と、Google Analyticsで確認できる情報には違いがあります。

ユーザー行動やマーケティング分析を重視するなら、Google Analyticsの導入を検討するとよいでしょう。

Google Analyticsは無料ですか？

一般的なWebサイトのアクセス解析で利用するGA4には無料で利用できるプランがあります。

大規模な企業サイトなどでは有料版のGoogle Analytics 360もありますが、通常のWebサイトやブログであれば無料版で十分なケースが多いでしょう。

VercelでNext.jsを使っています。Google Analyticsを導入できますか？

導入できます。

Next.jsではnext/scriptを利用してGoogle Analyticsのタグを読み込む方法が一般的です。

測定IDを環境変数として管理すると、コードと設定を分離できるため運用しやすくなります。

まとめ：VercelにGoogle Analyticsを導入してアクセス解析を始めよう

Vercelで公開しているWebサイトでも、Google Analytics 4を利用してアクセス解析ができます。

基本的な流れは以下のとおりです。

Google AnalyticsでGA4を作成
        ↓
測定IDを取得
        ↓
Next.jsにGA4タグを実装
        ↓
Vercelに環境変数を設定
        ↓
デプロイ
        ↓
Google Analyticsで計測確認

特にNext.js＋VercelでWebサイトを構築している場合は、GA4の測定IDを環境変数で管理し、next/scriptを使ってサイト全体に計測タグを設置する方法が扱いやすいでしょう。

また、SEOを重視するサイトでは、

Vercel ＋ Google Analytics ＋ Google Search Console

を組み合わせることで、サイトの公開からアクセス解析、検索流入の分析まで一通り行えるようになります。

VercelでWebサイトを運営しているなら、公開するだけで終わらせず、Google Analyticsを導入して「どのページに、どこから、どのようなユーザーが訪れているのか」を継続的に分析していくことが重要です。

プログラミング学習に関するお役立ちコンテンツ

カテゴリー: コラム