Next.js にて Google Tag Manager を導入する

最終更新日:

環境

  • Next.js v15
  • React v18
  • TypeScript v5

@next/third-parties のインストール

react 19 だとインストールが失敗する。
react 18 だと問題ないらしい。

React v18 でインストールする場合

$ npm uninstall react react-dom --save --force
$ npm install react@18 react-dom@18 --save
$ npm install @next/third-parties@latest --save

強制的にインストールする場合

$ npm install @next/third-parties@latest --save --force

サンプルコード

大事なところだけ抜粋。

.env.local

ENV=production

/src/app/layout.tsx

ほぼコピペ。
process.env.ENV が production の時だけ読み込むようにする。

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

export default function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode
}>) {
	return (
		<html lang="ja">
			{process.env.ENV == "production" && <GoogleTagManager gtmId="GTM-XXXXXXX" />}
			<body>{children}</body>
		</html>
	)
}

Google Tag Manager のテストについて

ステージング環境などで BASIC 認証をつけていたら、
うまく接続テストが通らないので、
可能であればテストする時だけ外す。