【Next.js】Google Analytics(GA4)を設定

2023/02/08更新

やりたい事

Next.jsで作成したWEBサイトにGoogle Analyticsを設定したい。
WEBサイトを運用する上で、アクセス数の解析は必要不可欠な要素です。
Googleアナリティクスは万人に使用されている完全無料のアクセス解析ツールなので、必ず導入しましょう。
Next.jsに導入する方法をまとめているサイトがなかったので解説します。
npmモジュールの追加インストールは不要。

Google Analytics上での設定

まずはGoogle Analyticsのユーザー登録と初期設定を行ってください。
Analyticsサイトで左下の管理をクリックして、プロパティを作成。
プロパティ名を入力(日本語可)して、タイムゾーンを日本に設定。
データストリームはWEBを選択し、ドメインや名称を入力。
表示された測定IDをコピー(G-xxxxxxxxxx)

Next.jsでの設定

プロジェクトのルートフォルダに.env(.env.localじゃないので注意)を作成し、
下記を平文で書いて保存。

NEXT_PUBLIC_GA_ID=G-xxxxxxxx

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,
  })
}

Next.jsはデフォルトの状態では、ページが遷移した際の情報をGoogle Analyticsに渡せないため、pages/_app.tsxを下記の内容に変更する。
その際にurlの型を明示的にanyで指定する必要あり。

import type { AppProps } from 'next/app'
import '../styles/index.css'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'

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

続いてページのヘッダ情報にgoogle tag managerのスクリプトタグを追加。
pages/_document.js(もしくはpages/_document.tsx)に追加することで、追加したスクリプトタグが全ページで適応される。

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>
    )
  }
}

実際にアクセスした後に、Google Analyticsのホーム画面にウェブサイトのデータ収集は有効ですと表示されていたら成功です。

需給投資ブログ

【Next.js】Google Analytics(GA4)を設定

やりたい事

Google Analytics上での設定

Next.jsでの設定