Next.jsにGoogle Analyticsを導入する方法

Next.jsにGoogle Analyticsを入れるのにreact-gaというのが使えるのですが、セットアップが面倒だったりします。

GAの設定はとても簡単で、下記のようにコンポーネントを書いて、設定したらできてしまします。これはGA4に対応しているので、下記のtrackingIdを変えるだけで、GA4にも対応できます。

以上が、Next.jsでGoogle analyticsを導入する方法でした。

const GoogleAnalytics = ({ trackingId }) => {
  const trackingURL = ''
  return (
    <>
      <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} />

      <script
        dangerouslySetInnerHTML={{
          __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${trackingId}');
          `,
        }}
      />
    </>
  )
}

export default function App({children}) {
  const uaTrackingId = 'UA-xxxxxxx-x'

  return (
    <>
      <Head>
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        {process.env.NODE_ENV == 'production' && <GoogleAnalytics trackingId={uaTrackingId} />}
      </Head>
      <body>
       {children}
      </body>
    </>
  )
}

参考: how-to-use-google-analytics-with-next-js-app