ReactでGoogleAnalyticsの設定【UA, GA4対応版｜プラグインなし】

GoogleAnalyticsを設定しようとした際に色々詰まったのでメモ
(師匠、ありがとうございます。)

[サンプルコード](https://github.com/mamezou/send-ga-react)も用意しました。

# 現在のGoogleAnalytics事情について
現在GoogleAnalyticsは2バージョンあり、2020年10月から新しいGA4という方式が正式リリースされています。
（ちなみにGoogleアナリティクス4プロパティという名称だそうです。）
ですが、登場してからまだ時間もそこまで経っておらず、開発においてもまだまだ旧式のUAを利用しているケースも多いかと思います。

調査したところ、ga-4-reactやreact-gaなどのプラグインがありましたが、両対応はしてないということで見送りました。

※今回実装で紹介する、新しい形式のGA4ではGoogleAnalyticsの通信が遅く、5.0 ~ 6.0sほどかかります。旧式のUAは0sとかなり速く、パフォーマンスを求める場合はUAのみ導入するのがいいのかもしれません。その場合はreact-gaで十分対応可能かと思います。

GA4の特徴については[こちら](https://ayudante.jp/column/2020-11-24/11-00/)を、GoogleAnalyticsの形式における、それぞれの違いやポイントなどは[こちら](https://www.pc-koubou.jp/magazine/45757)などを参考にしてください。

（以下、抜粋）
1. 旧GAとGA4との並行での計測が可能です。とりあえずGA4もデータ計測だけは行っておく（始めておけば、本格的にGA4へと乗り換える際に過去データがある状態で開始できて便利）
2. これから新規のWebサイトをGAで計測する場合、得られる情報量の観点から現状はGA4ではなく旧GAを利用する（かつ、必要に応じて並行計測する）

調べていると、始めはどちらも埋め込んでおき、ゆくゆく切り替えていくのが良いと書いてありました。


# 実装手順

## 00. 概要
- プラグインは未使用
- GA4とUAどちらも対応させる
- React , TypeScript , react-router-domを利用

## 01. GoogleAnalyticsの設定
アカウント取得から行います。注意しないと片方のアカウントしか取れないので、以下を参考に両方のIDを取得してください。手順写真も掲載します。


### 1-1 設定よりアカウントの作成をクリック
![Screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/6bb0c026-a18a-bb46-ed13-ea997e4d2333.png)


### 1-2 手順2のところで詳細オプションを表示を押す
![Screenshot (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/6ea5b449-6054-cae2-8a7f-74dcbd67e2d1.png)

### 1-3 ユニバーサルアナリティクスプロパティの作成をオンにする
![Screenshot (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/e4b29de6-0bdc-e227-edbd-cd47f4a7d1b3.png)


### 1-4 両方作成するを選択
![Screenshot (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/a3ada9dd-f88a-fee1-430c-d73d53d5f230.png)


[公式のヘルプページ](https://support.google.com/analytics/thread/78615205/google%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%82%B0%E3%83%AC%E3%83%BC%E3%83%89%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6?hl=ja)


## 02. useTracking.tsの作成
SPAの場合だと、ページ遷移がJavaSciptによって行われます。現在Googleのクローラーもだいぶ優秀になってきてるとのことですが、明示的にページ遷移したとGoogleAnalyticsに伝えてあげる必要があります。
まずはhooksを作りましょう。
hooks/useTracking.ts

```hooks/useTracking.ts
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

declare global {
  interface Window {
    gtag?: (key: string, trackingId: string, config: { page_path: string }) => void;
  }
}

export const useTracking = (trackingId: string | undefined = process.env.GA_MEASUREMENT_ID) => {
  const { listen } = useHistory();

  useEffect(() => {
    const unlisten = listen((location) => {
      if (!window.gtag) return;
      if (!trackingId) {
        console.log(
          'Tracking not enabled, as `trackingId` was not given and there is no `GA_MEASUREMENT_ID`.',
        );
        return;
      }
      window.gtag('config', trackingId, { page_path: location.pathname });
    });

    return unlisten;
  }, [trackingId, listen]);
};

```

## 03. ルーティング箇所でのhooksの読み込み
今回はreact-router-domを利用しているので、router.tsxにてuseTracking.tsを読み込み利用します。

```router/router.tsx
import { Route, Switch } from 'react-router-dom'
import { memo, VFC } from 'react'
import { useTracking } from '../hooks/useTracking'
import { Home } from 'components/pages/home'
import { About } from 'components/pages/about'

export const Router: VFC = memo(() => {
  useTracking('UA-********-*') -> ここを書き換える
  useTracking('G-**********') -> ここを書き換える

  return (
    <>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
      </Switch>
    </>
  )
})


```


## 04. index.htmlへの反映
public/index.htmlの内容を書き換えます。
headタグの最後あたりに以下コードを書きます。[*]の部分は取得したIDで置き換えてください。
※不要な部分もあるかもしれません。

```public/index.html

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-*********-*"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-**********');
      gtag('config', 'UA-*********-*');
    </script>
```


これでサイトにアクセスするとGA4とUAどちらのアカウントでも計測できていることを確認できました。
![ga.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/b3f92017-34b7-1b18-e9e7-36ba69acffaf.png)


当面はこちらで様子をみようと思います。

[サンプルコード](https://github.com/mamezou/send-ga-react)

## 参考
https://javascript.plainenglish.io/google-analytics-with-react-router-and-hooks-16d403ddc528
https://note.com/dd_techblog/n/n29535fd4f557