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

## はじめに

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

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

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

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

なお、本記事は、[next.js/examples/with-google-analytics](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics)を参考にして作成しました。

## Google Analyticsの導入

### Google Analytics IDの取得

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

① [Google Analytics](https://analytics.google.com/)のサイトにアクセスし、`管理`ボタンをクリックして下さい。

![ 2021-06-17 12.04.31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/deabbb37-fbd2-b3b1-9c73-0733483d850a.jpeg)

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

![ 2021-06-17 12.04.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/2f0c6692-9c68-8c80-b3dc-cafa586eb6b7.jpeg)

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

![ 2021-06-17 12.05.20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/bb77b531-5692-af13-2cfc-235d4d86572a.jpeg)

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

![ 2021-06-17 12.06.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/e3142d70-0901-c1b2-7ebd-380d8a7c942b.jpeg)

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

![ 2021-06-17 12.07.26.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/bc981f29-5d62-3c45-c01b-3bb335baa9ed.jpeg)


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

![ 2021-06-17 12.08.20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/f8cbab9f-c529-109e-3685-99265a8f8deb.jpeg)


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

![ 2021-06-17 12.10.35.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/900da0d6-5ffc-5ed0-6d51-fb3d4b904cd5.jpeg)

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

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

### Next.jsの設定

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

#### .env.localの作成

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

```text:.env.local
NEXT_PUBLIC_GA_ID=【あなたのGA_IDを入力】
```

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

#### gtag.jsの作成

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

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

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

```javascript: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に渡せないため、以下の様に変更を加えます。

```javascript
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`を作成し、以下の様に記述して下さい。

```javascript: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管理画面でリアルタイムのユーザ数がカウントされていればページビューの取得は成功です。

![ 2021-06-17 10.58.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/80b9901c-d0bb-a738-388d-3beb26b4b136.png)

### イベント情報の取得

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

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

```javascript: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に送信され、クリックイベントとしてカウントされていることが確認できると思います。

![ 2021-06-17 11.23.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/2bdd804c-7fba-0926-89d8-704233667a11.png)


## おわりに

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

## 参考

- [next.js/examples/with-google-analytics](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics)
- [custom Document](https://nextjs.org/docs/advanced-features/custom-document)