Next.jsにGoogle Analyticsを導入

ほぼ、Next.jsにGoogle Analyticsを導入する方法を参照すれば大丈夫です。

Google Analytics IDは取得済みということで、
すすめますね。

.env.localを作成

NEXT_PUBLIC_GA_ID=あなたの Google Analytics ID

プログラム上では、
process.env.NEXT_PUBLIC_GA_ID　として利用します。

gtag.jsを作成
/lib/gtag.js

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
export const pageview = (url) => {
 window.gtag('config', GA_TRACKING_ID, {
  page_path: url,
 })
}
export const event = ({ action, category, label, value }) => {
 window.gtag('event', action, {
  event_category: category,
  event_label: label,
  value: value,
 })
}

ページが遷移した際の情報（そのままだと遷移してもanalytics出来ない！）をGoogle Analyticsに知らせるため、
_app.jsを変更します。
/pages/_app.js

import '../styles/globals.css'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'

function MyApp({ Component, pageProps }) {
 const router = useRouter()
 useEffect(() => {
  const handleRouteChange = (url) => {
   gtag.pageview(url)
  }
  router.events.on('routeChangeComplete', handleRouteChange)
  return () => {
   router.events.off('routeChangeComplete', handleRouteChange)
  }
 }, [router.events])
 return <Component {...pageProps} />
}
export default MyApp

ページのヘッダ情報にgoogle tagmanagerのスクリプトタグを追加するために、
_document.jsを変更します。
/pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { GA_TRACKING_ID } from '../lib/gtag'

export default class MyDocument extends Document {
 render() {
  return (
   <Html lang="ja">
    <Head>
     {/* Global Site Tag (gtag.js) - Google Analytics */}
     <script
      async
      src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
     />
     <script
      dangerouslySetInnerHTML={{
       __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '${GA_TRACKING_ID}', {
       page_path: window.location.pathname,
      });
     `,
      }}
     />
    </Head>
    <body>
     <Main />
     <NextScript />
    </body>
   </Html>
  )
 }
}

ここまでの手順で、ページビューの取得が可能になりました。といきたいところですが、
Vercelなどで運営してる場合は、管理画面で Google analyticsID を設定してやる必要があります。
でないと、IDが「undefined」となってしまいます。

「Environment Variables」にてAdd Newしてあげます！

あとは、Google Analyticsのリアルタイムで動いてるかどうか、チェックしてください。

それと、、、ブラウザの「Brave」を使ってたり（私）つまりは、広告非表示拡張とか、オプトアウト設定？しているか、セキュリティソフトが弾いてるせいでGoogle analyticsが無効になってたりすると計測できないのでご注意を。