Next.js のサイトに Google Analytics を導入する

2025-07-30T12:05:38+0900

そういえば、Google Analytics 入れてなかったので、追加します。

Analytics 側の準備

このあと、Analytics 用のタグを埋め込んでいくのですが、それには、サイトごとの測定 ID を発行しておく必要がありますので、先にやっておきましょう。

Important

ここでは、測定ID（G-XXXXXXXXXX）の取得方法について詳しくは触れません。
が、アナリティクスの作成→アカウントで画面に従っていけば取れるはずです。

測定IDは、.env に保存しておきます。
キー名は何でもいいのですが、ブラウザから読み取れるようにしないといけないので、NEXT_PUBLIC_ というプレフィックスだけは忘れずに。
今回は NEXT_PUBLIC_GA_MEASUREMENT_ID としました。

NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

尚、.env はコミットするしないの派閥が割れるみたいですが、今回はコミットせず、CI 側の環境変数設定¹に本番用の設定は書き込む形にしました。

GA のタグを出力するためのコンポーネントを作る

コンポーネントを作って、それを layout.tsx から読み込むといういつもの流れでOKです。

src/components/GA.tsx

としました。

import Script from 'next/script'

export default function GA() {
  const measurementId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
  return (
    measurementId && (
      <>
        <Script
          strategy="afterInteractive"
          src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
        />
        <Script>
          {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

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

説明しやすいように strategy の設定も書いたままにしてますが、実際には strategy のデフォルトは afterInteractive らしいので省略しても大丈夫なはずです。

で、これを layout.tsx から読み込みます

import GA from '@/components/GA'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ja">
      <GA />
      <body>
        {children}
      </body>
    </html>
  )
}

出力テスト

ビルドしてからローカルで npm start して成果物を立ち上げてみて、ちゃんとソース内に GA 用のコードが出現してればOK。

デプロイ準備

今回、環境変数は Vercel の管理画面から設定するので、デプロイする前にそれを済ませておきます。

Vercel のプロジェクトを開いて、Settings → Environment Variables を開きます

Vercel Environment Variable form

今回は NEXT_PUBLIC_GA_MEASUREMENT_ID 1個しかないので Key と Value を入力しても良いのですが、
Vercel の環境変数設定フォームには便利な機能が用意されています。

環境変数を一括設定する方法

上記のキャプチャーの下の方に paste the .env contents above とあるように、.env の中身をすべて選択→コピー（cmd+a → cmd+c）した状態で Key の欄に貼り付けると、全部自動的に分割して適切なフィールドに入力してくれます。（Valueだとうまくいきません。必ず Key に貼り付けます）

もちろん .env ファイルをアップロードしてもOKです。

最後に「Save」を押して完了です。

（再）デプロイ

あとは、普通に先程のコードをデプロイすればOKです。
先に環境変数を設定したのは、環境変数が注入されるのはビルド時だからです。

なのでデプロイ後に環境変数の値を変更した場合は、再デプロイが必要になります。

といっても、変更すると自動的に、再デプロイするか聞いてきますので、基本的には Redeploy を押すだけでOK。

notify for redeploy

間違って Dismiss 押しちゃった場合やでてきてない場合は、プロジェクトの Deployments メニューから、Current マークがついてるデプロイの右の ... を押して、Redeploy をクリックすることでもできます。

manual redeploy menu

本番での出力テスト

デプロイが完了したら、本番サイト開いてコードが出力できてることを確認します。
問題なければ、最後に Google Analytics の管理画面からウェブサイトをテストする でテストして OK であれば設定完了です。

test on GA

あとは、データが送られてくるのを待ちましょう。

参考

https://articles.readytowork.jp/google-analytics-in-next-js-a26cc2b28db5
https://nextjs.org/docs/app/guides/scripts

Vercel なら Environment Variables
GitHub Actions だったら Actions secrets and variables などです ↩