技術

【ほぼコピペで実装】Next.jsにGoogle Analyticsを導入する方法

2021-10-18T12:30:57.177Z

Next.jsでGoogleAnalyticsを導入する方法が結構大変でしたので、ほぼコピペでGoogleAnalyticsを導入するためのブログを書いてみました。

.envファイルの作成と修正

まず、プロジェクトのルートに.envファイルを作成します。
作成したら、以下の内容を記述します。

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=googlaアナリティクスのID

googleアナリティクスのIDは以下の手順で取得できます。

設定→データストリーム→ウェブタグを選択して該当箇所をクリック

下記画像のここのIDに記載されているIDがgoogleアナリティクスのIDです。

gtag.jsの作成

libs/の直下にgtag.jsファイルを作成します。(libsディレクトリがない場合は、プロジェクトルートにlibsディレクトリを作成してください。)

export const GA_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || ''

export const existsGaId = GA_ID !== ''

export const pageview = (path) => {
  window.gtag('config', GA_ID, {
    page_path: path,
  })
}

export const event = ({action, category, label, value = ''}) => {
  if (!existsGaId) {
    return
  }
  window.gtag('event', action, {
    event_category: category,
    event_label: JSON.stringify(label),
    value,
  })
}

GoogleAnalytics.jsの作成

components/の直下にGoogleAnalytics.jsを作成し、以下の内容を記述します。(componentsディレクトリがない場合は、プロジェクトルートにcomponentsディレクトリを作成してください。)

import Script from 'next/script'
import { existsGaId, GA_ID } from '../libs/gtag'


const GoogleAnalytics = () => (
  <>
    {existsGaId && (
      <>
        <Script defer src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} strategy="afterInteractive" />
        <Script id="ga" defer strategy="afterInteractive">
          {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${GA_ID}');
          `}
        </Script>
      </>
    )}
  </>
)


export default GoogleAnalytics

usePageView.jsの作成

hooks/の直下にusePageView.jsを作成し、以下の内容を記述します。(hooksディレクトリがない場合は、プロジェクトルートにhooksディレクトリを作成してください。)

import { useEffect } from 'react'
import { useRouter } from "next/router";
import { existsGaId, pageview } from '../libs/gtag'

export default function usePageView() {
  const router = useRouter()

  useEffect(() => {
    if (!existsGaId) {
      return
    }

    const handleRouteChange = (path) => {
      pageview(path)
    }

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

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

_app.jsの修正

pagesディレクトリの_app.jsがあると思いますので、以下//追加と記載してある行を追加してください。

import React from 'react'

import usePageView from '../hooks/usePageView' // 追加
import GoogleAnalytics from '../components/GoogleAnalytics' // 追加

const App = ({ Component, pageProps }) => {
  usePageView() // 追加
  return (
    <>
      <GoogleAnalytics /> // 追加
      <Component {...pageProps} />
    </>
  )
}

export default App

以上で、Next.jsでGoogleAnalyticsを使うための設定は完了となります。
あとはビルド&デプロイして実際にアクセスし、GoogleAnalyticsを確認してみましょう！

以上です！

亀山直起

本業でFinTech企業のプロダクトマネージャ、副業でEdTech企業のフルスタックエンジニアをやっています。
趣味はWebサービス開発やお金の勉強にハマっています。最近「英単語通知」というアプリをリリースしました。
働き方、技術、金融のジャンルに興味があるので、それらに関することを書いていこうと思います。