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

はじめに

今回は、Next.jsプロジェクトにGoogle Analyticsを導入する方法を紹介します。

Next.jsのプロジェクトにGoogle Analyticsの導入するには、２つのステップが踏む必要があります。

Google Analytics IDの取得
Next.jsの設定

順に進めていきましょう。

なお、本記事は、next.js/examples/with-google-analyticsを参考にして作成しました。

Google Analyticsの導入

Google Analytics IDの取得

まず、以下の手順でGoogle Analytics ID(GA_ID)を取得します。

① Google Analyticsのサイトにアクセスし、管理ボタンをクリックして下さい。

② 次にプロパティを作成をクリックします。

③ プロパティを入力し、次へをクリックします。

④ ビジネスの概要を入力し、作成ボタンをクリックします。

⑤ 今回はNext.jsのアプリなので、Choose a platformでウェブを選択します。

⑥ ウェブストリームの設定で紐付けたいサイトのURLを入力し、ストリームを作成ボタンをクリックします。

⑦ Google Analytics ID(GA_ID)が作成されました。画面の測定IDの値がGA_IDとなります。

Google Analytics IDの値は次項で使用するので控えておいて下さい。

これでGoogle Analytics IDが用意できました。

Next.jsの設定

続いて作成したNext.jsプロジェクトに、Google Analyticsの設定を追加します。

.env.localの作成

プロジェクトのルートフォルダに.env.localファイルを作成し、以下の様に前項で入手したGoogle Analytics IDを入力します。

.env.local

NEXT_PUBLIC_GA_ID=【あなたのGA_IDを入力】

設定したNEXT_PUBLIC_GA_IDの値は、プログラム上ではprocess.env.NEXT_PUBLIC_GA_IDと指定することで取得できます。

gtag.jsの作成

libフォルダを作成し、その配下にgtag.jsファイルを作成して下さい。

$ mkdir lib
$ touch ./lib/gtag.js

作成したgtag.jsにpageviewとeventという関数を作成します。

lib/gtag.js

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

ページビューの取得

_app.jsの変更

次に_app.jsに変更を加えます。
Next.jsはデフォルトの状態では、ページが遷移した際の情報をGoogle Analyticsに渡せないため、以下の様に変更を加えます。

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

_document.jsの作成

続いてページのヘッダ情報にgoogle tagmanagerのスクリプトタグを追加します。
_document.jsに追加することで、追加したスクリプトタグが全ページで適応されます。
pagesフォルダの配下に_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>
    )
  }
}

ここまでの手順で、ページビューの取得が可能になりました。

確認のため、一度自身のGoogle Analytics管理画面を開き、サイトのページビューが取得できているか確認してみましょう。

自身のサイトにアクセス後、Google Analytics管理画面でリアルタイムのユーザ数がカウントされていればページビューの取得は成功です。

イベント情報の取得

ページビューの取得の他にも、ボタンが何回クリックされたかなど特定のイベント情報を取得したいことがあるかもしれません。
そういった場合は、コードにgtag.event()を追加し、イベント情報をGoogle analyticsに送信するようにします。

下のサンプルではボタンクリックの際に、gtag.event()でイベント情報を送信しています。

pages/contact.js


import React, {useState} from 'react'
import * as gtag from '../lib/gtag'

function Sample(props) {

  const [score, setScore] = useState(0)

  // ボタンをクリックしたとき
  const handler = () => {

    setScore(score + 1)

    // Analyticsに送信する情報
    gtag.event({
      action: 'click_answer', 
      category: 'score',
      label: score, // 
    })

    console.log("click!")
  }

  return (
    <>
      <button onClick={handler} >push 1</button>
    </>
  )
}

export default Sample

コードを加えたら、再びGoogle Analyticsの管理画面でイベントの結果を確認してみましょう。

イベントがGoogle Analyticsに送信され、クリックイベントとしてカウントされていることが確認できると思います。

おわりに

あなたのNext.jsプロジェクトにもGoogle Analyticsを導入し、サイトの改善にお役立て下さい。