Next.js（App Router）にGA4（Google Analytics4）を導入する 📈

Vercelが @next/third-parties というライブラリを提供してくれているので、それを使えばGA4の導入も楽々です。

www.npmjs.com

@next/third-parties はGoogle Tag Managerにも対応しているのですが、今回はGA4を直接導入します。

ソースコード（抜粋）

src/app/layout.tsx

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

export default async function RootLayout({
  children
}: {
  children: ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        <div>{ children }</div>
      <body>
      {!!process.env.GOOGLE_ANALYTICS_ID && (
        <GoogleTagManager gtmId={process.env.GOOGLE_ANALYTICS_ID} />
      )}
    </html>
  );
}