Next.js + Vercel サイトに GTM で GA4 設定

投稿日: 2025-05-25

カテゴリ: tech

全体の流れ

手順	内容
1	GA4 アカウントの作成と計測ID取得
2	GTM アカウントの作成
3	GTM に「Google タグ（旧GA4設定タグ）」を追加
4	Next.js に GTM を埋め込む（next/script使用）
5	動作確認

1. GA4 アカウント作成

Google アナリティクスにアクセス
アカウントを作成
プロパティを作成
- プロパティ名：yosuke.ai
- タイムゾーン：日本
- 通貨：JPY
ビジネス情報はスキップ可
「ウェブストリーム」を作成
- URL：https://yosuke.ai
- ストリーム名：Main
表示された「測定ID（G-XXXXXXXXXX）」を控えておく

2. GTM（Google タグマネージャー）アカウント作成

Google Tag Manager にアクセス
アカウント作成
- アカウント名：yosuke.ai
- コンテナ名：yosuke.ai
- 対象：ウェブ
作成後、GTM ID（例：GTM-XXXXXXX）が表示されるのでメモ

3. GTM に Google タグを追加

GTM のダッシュボードで「タグ > 新規」をクリック
タグの種類 → Google タグ（Google Tag）を選択
- 旧GA4設定タグ
「Google タグ ID」欄に GA4 の測定ID（G-XXXXXXXXXX）を入力
トリガー：All Pages を選択
タグ名例：Google Tag - GA4
保存し、右上の「公開」ボタンを押して反映

4. Next.js に GTM を組み込む

1. 環境変数を追加
- .env.local に追加：

NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX

2. Vercel の Environment Variables にも設定

3. app/layout.tsx に以下を追記
- ローカル開発環境では読み込ませないように

import "./globals.css";
import Script from "next/script";

const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
const isProd = process.env.NODE_ENV === "production";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <head>
        {GTM_ID && (
          <Script
            id="gtm-script"
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
              __html: `
                (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                })(window,document,'script','dataLayer','${GTM_ID}');
              `,
            }}
          />
        )}
      </head>
      <body>
        {GTM_ID && (
          <noscript>
            <iframe
              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
              height="0"
              width="0"
              style={{ display: "none", visibility: "hidden" }}
            ></iframe>
          </noscript>
        )}
        {children}
      </body>
    </html>
  );
}

5. 動作確認

1. Tag Assistant で確認
- Tag Assistant にアクセス
- サイトURLを入力 → GTMタグとGA4タグの動作を確認

2. GA4 の「リアルタイム」ビューでアクセス確認

計測できてそう。

ページ速度への配慮ポイント

配慮	実装内容
遅延読み込み	next/script + afterInteractive戦略で非同期読み込み
環境変数管理	NEXT_PUBLIC_GTM_ID を使い、開発環境では読み込まないよう制御可能
タグ統一管理	GAタグはGTM内で集中管理、コードに直接埋め込まない