VercelでデプロイしたWebアプリにGoogle Analyticsを設定する完全ガイド
Vercelは高速で使いやすいデプロイメントプラットフォームとして多くの開発者に愛用されています。せっかく作成したWebアプリケーションのパフォーマンスや利用状況を把握するために、Google Analytics（GA4）の導入は必須です。
この記事では、VercelでホストしているWebアプリにGoogle Analyticsを設定する方法を、初心者でも理解できるよう詳しく解説します。
Google Analytics 4（GA4）とは
Google Analytics 4は、Googleが提供する最新のWebサイト解析ツールです。従来のUniversal Analytics（UA）に代わる新しいバージョンで、以下の特徴があります：
- イベントベースのデータモデル
- プライバシー重視の設計
- 機械学習による予測分析
- クロスプラットフォーム分析
事前準備
必要なもの
- Googleアカウント
- VercelでデプロイされたWebアプリ
- 基本的なHTML/JavaScriptの知識
サポートしているフレームワーク
この設定方法は以下のフレームワークで動作します：
- Next.js
- React
- Vue.js
- Nuxt.js
- Svelte
- 静的HTML サイト
Step 1: Google Analytics 4プロパティの作成
1.1 Google Analyticsアカウントにアクセス
- Google Analyticsにアクセス
- Googleアカウントでログイン
- 「測定を開始」をクリック
1.2 アカウントの設定
アカウント名: あなたのプロジェクト名
国/地域: 日本
データ共有設定: 必要に応じて選択
1.3 プロパティの設定
プロパティ名: あなたのWebアプリ名
レポートのタイムゾーン: 日本
通貨: 日本円（JPY）
1.4 データストリームの作成
- 「Webデータストリーム」を選択
- WebサイトのURL:
https://your-app.vercel.app - ストリーム名: アプリ名を入力
- 「ストリームを作成」をクリック
1.5 測定IDの取得
データストリーム作成後、測定ID（G-XXXXXXXXXXの形式）が表示されます。この値を控えておきましょう。
Step 2: Next.jsアプリケーションでの設定
2.1 Google Analyticsスクリプトの追加
方法1: _document.jsを使用（推奨）
pages/_document.jsファイルを作成または編集：
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="ja">
<Head>
{/* Google Analytics */}
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
方法2: カスタムフックの作成
hooks/useGoogleAnalytics.jsを作成：
import { useEffect } from 'react'
import { useRouter } from 'next/router'
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
// Google Analyticsにページビューを送信
export const pageview = (url) => {
window.gtag('config', GA_TRACKING_ID, {
page_path: url,
})
}
// Google Analyticsにイベントを送信
export const event = ({ action, category, label, value }) => {
window.gtag('event', action, {
event_category: category,
event_label: label,
value: value,
})
}
export const useGoogleAnalytics = () => {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
pageview(url)
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
}
2.2 _app.jsでの初期化
pages/_app.jsを編集：
import { useGoogleAnalytics } from '../hooks/useGoogleAnalytics'
function MyApp({ Component, pageProps }) {
useGoogleAnalytics()
return <Component {...pageProps} />
}
export default MyApp
Step 3: Reactアプリケーションでの設定
3.1 react-ga4ライブラリのインストール
npm install react-ga4
3.2 Google Analyticsの初期化
src/analytics.jsを作成：
import ReactGA from 'react-ga4'
const TRACKING_ID = process.env.REACT_APP_GA_ID
export const initGA = () => {
ReactGA.initialize(TRACKING_ID)
}
export const logPageView = () => {
ReactGA.send({ hitType: 'pageview', page: window.location.pathname })
}
export const logEvent = (category, action, label) => {
ReactGA.event({
category: category,
action: action,
label: label,
})
}
3.3 App.jsでの実装
import React, { useEffect } from 'react'
import { initGA, logPageView } from './analytics'
function App() {
useEffect(() => {
initGA()
logPageView()
}, [])
return (
<div className="App">
{/* あなたのアプリコンテンツ */}
</div>
)
}
export default App
Step 4: 環境変数の設定
4.1 .env.localファイルの作成
プロジェクトルートに.env.localファイルを作成：
# Next.js用
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
# React用
REACT_APP_GA_ID=G-XXXXXXXXXX
4.2 Vercelでの環境変数設定
- Vercelダッシュボードにアクセス
- 対象プロジェクトを選択
- 「Settings」→「Environment Variables」
- 以下を追加：
Name: NEXT_PUBLIC_GA_ID (または REACT_APP_GA_ID)
Value: G-XXXXXXXXXX
Environments: Production, Preview, Development
Step 5: Vue.js/Nuxt.jsでの設定
5.1 Nuxt.jsでのモジュール使用
npm install @nuxtjs/google-analytics
nuxt.config.jsに追加：
export default {
modules: [
'@nuxtjs/google-analytics'
],
googleAnalytics: {
id: process.env.GOOGLE_ANALYTICS_ID
},
publicRuntimeConfig: {
googleAnalytics: {
id: process.env.GOOGLE_ANALYTICS_ID
}
}
}
5.2 Vue.jsでの手動設定
main.jsに追加：
import { createApp } from 'vue'
import App from './App.vue'
// Google Analytics設定
const app = createApp(App)
if (process.env.NODE_ENV === 'production') {
// gtag.jsの読み込み
const script1 = document.createElement('script')
script1.async = true
script1.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.VUE_APP_GA_ID}`
document.head.appendChild(script1)
const script2 = document.createElement('script')
script2.innerHTML = `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.VUE_APP_GA_ID}');
`
document.head.appendChild(script2)
}
app.mount('#app')
Step 6: 動作確認とテスト
6.1 リアルタイムレポートでの確認
- Google Analyticsダッシュボードにアクセス
- 左メニューから「リアルタイム」を選択
- 自分のサイトにアクセスして、データが表示されるか確認
6.2 ブラウザ開発者ツールでの確認
- ブラウザの開発者ツールを開く
- Networkタブで
collectやgtagのリクエストを確認 - Consoleでエラーがないかチェック
6.3 Google Analytics Debuggerの使用
Chrome拡張機能「Google Analytics Debugger」をインストールして、詳細なデバッグ情報を確認できます。
Step 7: カスタムイベントの実装
7.1 ボタンクリックの追跡
// Next.js/React
import { event } from '../hooks/useGoogleAnalytics'
const handleButtonClick = () => {
event({
action: 'click',
category: 'engagement',
label: 'hero_button'
})
}
// Vue.js
const trackButtonClick = () => {
gtag('event', 'click', {
event_category: 'engagement',
event_label: 'hero_button'
})
}
7.2 フォーム送信の追跡
const handleFormSubmit = () => {
gtag('event', 'form_submit', {
event_category: 'engagement',
event_label: 'contact_form'
})
}
Step 8: プライバシーとGDPR対応
8.1 Cookieの同意管理
// Cookie同意後にGA初期化
const initializeAnalytics = () => {
if (cookieConsent) {
gtag('config', GA_TRACKING_ID, {
anonymize_ip: true,
allow_google_signals: false,
allow_ad_personalization_signals: false
})
}
}
8.2 IPアドレスの匿名化
gtag('config', GA_TRACKING_ID, {
anonymize_ip: true
})
トラブルシューティング
よくある問題と解決方法
1. データが表示されない
原因と解決策：
- 測定IDが間違っている → GA4ダッシュボードで確認
- 環境変数が設定されていない → Vercelの設定を確認
- adblockerが有効 → 開発時は無効にして確認
2. 本番環境でのみ動作しない
解決策：
- Vercelの環境変数が全環境（Production, Preview, Development）に設定されているか確認
- ビルド後に
npm run build && npm run startでローカル確認
3. SPAでページ遷移が追跡されない
解決策：
- ルーター変更イベントでの手動ページビュー送信を実装
- フレームワーク固有のGA設定を使用
パフォーマンス最適化
1. 非同期読み込み
// 遅延読み込みでパフォーマンス向上
const loadGoogleAnalytics = () => {
if (typeof window !== 'undefined') {
import('gtag').then(() => {
gtag('config', GA_TRACKING_ID)
})
}
}
2. サンプリング率の調整
gtag('config', GA_TRACKING_ID, {
sample_rate: 50 // 50%のサンプリング
})
まとめ
VercelでデプロイしたWebアプリにGoogle Analyticsを設定することで、以下のメリットが得られます：
- ユーザー行動の可視化: どのページが人気か、どこで離脱するかが分かる
- コンバージョン追跡: 目標達成率を測定できる
- パフォーマンス分析: サイトの読み込み速度やユーザビリティを改善できる
- データドリブンな改善: 実際のデータに基づいた意思決定が可能
設定は複雑に見えますが、段階的に進めることで確実に導入できます。まずは基本的な設定から始めて、徐々にカスタムイベントやコンバージョン追跡を追加していきましょう。
定期的にGA4のレポートを確認し、Webアプリの改善に活用してください。データ分析を通じて、より良いユーザーエクスペリエンスを提供できるはずです。
■プロンプトだけでオリジナルアプリを開発・公開してみた！！
■AI時代の第一歩！「AI駆動開発コース」はじめました！
テックジム東京本校で先行開始。
■テックジム東京本校
「武田塾」のプログラミング版といえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
より早く、より安く、しかも対面型のプログラミングスクールです。
＜短期講習＞5日で5万円の「Pythonミニキャンプ」開催中。
＜月1開催＞放送作家による映像ディレクター養成講座
＜オンライン無料＞ゼロから始めるPython爆速講座
