Next.js と TypeScript で、Google Analytics(GA4) を導入する

TwitterFacebookHatena

TL;DR

本記事では Next.js と TypeScript を使って Google Analytics のコンポーネントを作り、ウェブサイトに統合する方法を詳しく説明します。

開発環境 バージョン
Next.js 13.4.3
TypeScript 5.0.4
Emotion 11.11.0
React 18.2.0

Google Analytics のコンポーネント作成

まず初めに、Google Analytics のコンポーネントを作成しましょう。具体的には、Google Analytics と通信するためのカスタムフックを作成します。これは、アプリケーションのライフサイクルに応じて Google Analytics へのイベントを送信するために使用されます。

// components/GoogleAnalytics.tsx
import { useRouter } from 'next/router'
import { useEffect } from 'react'

const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID

declare global {
  interface Window {
    gtag: (...args: any[]) => void
  }
}

const GoogleAnalytics = () => {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      if (typeof window.gtag === 'function') {
        window.gtag('config', GA_MEASUREMENT_ID, {
          page_path: url,
        })
      }
    }

    router.events.on('routeChangeComplete', handleRouteChange)

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return null
}

export default GoogleAnalytics

こちらのソースコードを解説します。

このコードは、Next.js アプリケーションで Google Analytics(GA4) を利用するためのコンポーネントです。特に、SPA（シングルページアプリケーション）におけるページビューのトラッキングに対応しています。

const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID

上記のコードで、環境変数から Google Analytics(GA4) の計測 ID（GA_MEASUREMENT_ID）を取得しています。Next.js では、NEXT_PUBLIC_ で始まる環境変数はブラウザに公開されるため、このようにしてブラウザ側のスクリプトで利用することが可能です。

declare global {
  interface Window {
    gtag: (...args: any[]) => void
  }
}

Google Analytics(GA4) は、gtag.js というグローバルな関数を介して操作します。しかし、この gtag 関数はデフォルトの TypeScript の型定義には存在しないため、ここではグローバルな Window インターフェースを拡張して gtag 関数の型定義を追加しています。

const GoogleAnalytics = () => {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      if (typeof window.gtag === 'function') {
        window.gtag('config', GA_MEASUREMENT_ID, {
          page_path: url,
        })
      }
    }

    router.events.on('routeChangeComplete', handleRouteChange)

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return null
}

ここが本ソースコードの中心部分です。useEffect という React のフックを使って、ルート（ページ）が変わる度に handleRouteChange 関数を呼び出します。handleRouteChange 関数は gtag 関数を用いて Google Analytics(GA4) に新しいページビュー情報を送信します。

Next.js の useRouter フックを使って取得した router オブジェクトの events メソッドを通じて、ルートの変更イベント（具体的には routeChangeComplete イベント）を購読しています。

return の部分では、このコンポーネントがアンマウントされるとき（つまり、このコンポーネントがページから削除されるとき）に、イベントの購読を解除する関数を返しています。これは React のフックのクリーンアップ関数として機能します。

そして最後に、GoogleAnalytics コンポーネントが何も描画しないことを明示するために、return null を記述しています。

.env.local ファイルの作成

.env.local に、Google Analytics(GA4) の計測 ID（G-xxxxx） する場合は次のように記述しますが、本番では反映されません。

# google analytics
NEXT_PUBLIC_GA_MEASUREMENT_ID=ここに GA4 の ID を入力

※ だだし、これはローカル用なのでアップロードされません。Vercel にデプロイした後は、Vercel の管理画面から上述した環境変数を設定する必要があります。「=」は含めないでください。

コンポーネントでの利用

_document.tsx で、次のように設定します。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document(this: any) {
  const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
  return (
    <Html lang="ja">
      <Head>
        {/* Google Analytics 本番環境のみ動作する。ローカル環境で確認したいときは、{process~  をコメントアウトして確認する */}
        {process.env.NODE_ENV === 'production' && (
          <>
            <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`} />
            <script
              dangerouslySetInnerHTML={{
                __html: `
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', '${GA_MEASUREMENT_ID}');
                  `,
              }}
            />
          </>
        )}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

あとは _app.tsx に作成したカスタムフックを任意のコンポーネントで使用します。

import GoogleAnalytics from 'components/GoogleAnalytics'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <GoogleAnalytics />
      <Component {...pageProps} />
    </Layout>
  )
}

以上で Google Analytics のコンポーネント作成は完了しました。

Google シグナルを有効にする

Google Analytics の Universal Analytics（UA）から Google Analytics 4（GA4）への移行に伴い、Google シグナルのデータ収集を有効にする必要があります。

GA4 プロパティの作成

Google Analytics の管理画面に行き、アカウントを選択します。その後、「プロパティ」を選択し、「プロパティの作成」をクリックします。新しい GA4 プロパティを作成します。詳細な設定を選択し、プロパティを作成します。

データストリームの設定

GA4 プロパティを作成したら、データストリームを設定します。これは、ウェブサイトやアプリからのデータを収集するためのものです。データストリームを作成し、ウェブサイトの URL やアプリの情報を入力します。

トラッキングコードの設定

作成した GA4 プロパティのデータストリームから、新しい GA4 トラッキングコードを取得します。これをウェブサイトの適切な部分に追加します。これにより、新しい GA4 プロパティがデータを収集することができます。

UA と GA4 の並行運用

移行期間中は、UA のトラッキングコードを削除せずにそのままにします。これにより、UA と GA4 の両方からデータを収集することができ、比較・検証を行うことができます。

イベントと目標の設定

GA4 では、イベントとしてデータを収集し、それを基にレポートを作成します。thanks ページなど、必要に応じて、UA で設定していた目標に相当するイベントを GA4 で設定します。

レポートの作成

GA4 では、データの視覚化と分析のためにレポートを作成します。UA で利用していたレポートに相当するものを GA4 で作成します。

これで Next.js の各ページで Google Analytics の情報を収集できるようになりました。

Google Analytics を学ぶ

ここまで読んで、「もっと詳しく学びたい！」という方は、以下のリンクを参考にしてみてください。

タイトル 説明
Google Analytics 4 認定試験の全問題を解説！ Google Analytics 4 の試験問題とその解答を解説しています。
Google アナリティクス公式ガイド Google 自身が提供する公式ガイドです。基本的な使い方から高度な機能まで詳しく説明されています。
Next.js with Google Analytics Example Next.js 公式の Google Analytics 例です。ソースコードとともに説明がついています。

ここまでで、Google Analytics のコンポーネントを Next.js と TypeScript を使って作成する方法を学びました。お疲れ様でした！

Jamstack での制作を依頼する

Next.js と TypeScript で、Google Analytics(GA4) を導入する