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

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

サンプルコードも用意しました。

現在の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の特徴についてはこちらを、GoogleAnalyticsの形式における、それぞれの違いやポイントなどはこちらなどを参考にしてください。

（以下、抜粋）

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

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

実装手順

00. 概要

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

01. GoogleAnalyticsの設定

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

1-1 設定よりアカウントの作成をクリック

1-2 手順2のところで詳細オプションを表示を押す

1-3 ユニバーサルアナリティクスプロパティの作成をオンにする

1-4 両方作成するを選択

公式のヘルプページ

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どちらのアカウントでも計測できていることを確認できました。

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

サンプルコード

参考

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