GTM・GA4をNext.jsの静的書き出しサイトに入れる

2026.07.31 09:00
2026.07.31 09:00
GTM・GA4をNext.jsの静的書き出しサイトに入れる

Next.jsで静的書き出ししたサイトへアクセス解析を追加しようとすると、GTMの設置だけでは終わりません。画面遷移の扱いを決めないまま進めると、ページビューを二重に数える可能性があります。

静的サイトでもGTMとGA4は導入できますが、クライアントサイド遷移をどこでページビューとして数えるかを先に決める必要があります。

GTMの設置を一つにする

コンテナIDは公開用環境変数から読み、GA4設定はGTM側で管理します。同じGA4タグをアプリにも重複設置しません。App Routerならルートレイアウトへ、利用バージョンに対応する公式コンポーネントを置きます。

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

export default function RootLayout({ children }) {
  return <html lang="ja"><body>{children}</body>
    <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID!} />
  </html>;
}

SPA遷移の責任範囲を決める

GTMで履歴変更を検知するか、アプリからvirtual_page_viewを送るか統一します。GA4の自動ページビューと独自イベントを併用すると、初回だけ二重になる場合があります。

GTMプレビュー、Network、GA4 DebugViewで初回表示と2回目以降の遷移を分けて確認します。Cookie同意の状態を反映し、URLやdataLayerへフォーム入力などの個人情報を含めないことも公開前に検査します。

今回は以上です。