26. Google Analyticsと連携する

2026/09/23 Cursor

ステップ1：GA4プロパティを作成

Google Analytics にログインし、ホーム画面左下の「管理（歯車マーク）」をクリック

画面左上の「＋作成」から「プロパティ」を選択

プロパティ名：サイト名

タイムゾーン：日本（レポートの集計を日本時間で行うということなので、海外向けの英語サイトであっても日本時間で問題ない）

業種：金融など

ステップ2：データストリームの設定

ウェブサイトのURL：wwwを加える必要はない？

ストリーム名：サイト名

拡張計測機能：オンのままでOK

「作成を継続（青いボタン）」をクリックすると、「Google タグの設定方法を選択」画面になる

・　gtag.js

・　Googleタグマネージャーを使用しますか

の２つが提案されるが、今回はどちらもいらない（@next/third-parties/google パッケージの <GoogleAnalytics/> コンポーネントが、内部で自動的に gtag.js を生成・読み込みして処理してくれる仕組みになっているため）ので、Xボタンを押してポップアップを閉じる

ステップ3：測定IDの取得

ポップアップを閉じると、「ウェブストリームの詳細」という画面になる

この画面の測定ID（Gから始まる文字列）をコピーする

ステップ4：Next.jsのパッケージをターミナルでインストールする

cd あなたのプロジェクトフォルダ名
npm install @next/third-parties@latest

ステップ5：src/app/layout.tsxでGoogleAnalyticsコンポーネントを読み込む（App Routerの場合）

<GoogleAnalytics>が自動的にgtag.jsを生成してくれるため、先ほどのgtag.jsやGoogleタグマネージャーをローカルファイルにコピペする必要はない

import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        {children}
      </body>
      {/* 測定IDを環境変数から読み込む */}
      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID || ''} />
    </html>
  )
}

ステップ6：環境変数として測定IDを登録する

プロジェクト直下に「.env.local」ファイルを作成し、以下を追記する

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

ステップ7：Vercelでの設定

Vercelのダッシュボードにアクセスし、対象のプロジェクトを選択する

「Settings」を開いて、、左側のメニューを開いて「Environments」を開く

その後、「Products」という項目をクリックすると、画面の一番下に「Enviroment Variables」があるので、

「Add Environment Variable（黒いボタン）」をクリックして、

Type: Config

Key: NEXT_PUBLIC_GA_ID

Value: G-XXXXXX（測定ID）

Enviroment: Production

を設定してSaveする

補足：TypeはSecretとConfigのどちらが良いのか

Config（推奨）

用途: クライアント（ブラウザ）側で使われる識別子やAPIキー、Google Analyticsの測定IDなど。
理由: NEXT_PUBLIC_GA_ID はHTMLソースコードやJSファイルに含まれてブラウザに送信されるため、隠す必要がありません（そもそも隠せません）。

Secret

用途: サーバー側（API RouteやServer Actions）だけで使い、外部に見せてはいけない秘密の情報。
例: データベース接続パスワード、Stripeの秘密鍵、OpenAIのAPIキーなど。

ステップ8：Vercelでデプロイして動作確認する

環境変数を追加した後にVercelにデプロイする

そしてサイトにアクセスする

Google Analyticsの管理画面＞リアルタイムレポートを開き、アクセス（アクティブユーザー）が1以上担っていれば連携完了

ただし、Analyticsは測定IDを発行してからデータに反映されるまで最長48時間かかる

補足：特定のボタンクリックを計測することも可能

省略

BACK