GoogleAnalyticsの導入は通常のサイトであればスクリプトを所定の位置に貼り付けて終わりですが、その方法ではReact(やVue)のようなSPAのアプリでは上手くいきません。

Reactにではその対応策としてreact-gaの利用が一般的です。ただ私も使ってみようと調べてみたのですが、最初のとっかかりが掴めず微妙に苦労しました。それでも何とか実現できたので備忘録も兼ねて記事にしてみました。

hooksを用いてそこそこ綺麗に処理を切り出せたかも？と思っています。参考にしていただければ幸いです。

といってもGoogleAnalytics関連ほぼ知識ゼロの状態からサクッと作りました。
不備等ありましたらコメントいただければ幸いです。

前提

本記事では、react-gaのpageviewに関してのみ説明します
サンプルコードではreact-routerを利用しています
GoogleAnalytics側の設定は完了しているとします。

最低限必要な処理

react-ga の公式ドキュメント(https://github.com/react-ga/react-ga) を見る限り、最低限必要な処理は以下の3行です。

import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000-01');
ReactGA.pageview(path);

つまりReactGAをimportして、initializeして、目的の箇所でpageview(path)を走らせるだけです。それだけで最低限は動いてくれます。ページの遷移を通知するだけなら、pageviewをコンポーネントのcomponentDidMountやuseEffectの中で呼び出せばOKでしょう。

サンプルコード

上記を踏まえてサンプルコードです。hooksで作成しました。やはりhooksを使うと上手く切り分けれられて良いですね。

hooks


import { useEffect } from 'react'
import ReactGA from 'react-ga';

ReactGA.initialize('UA-159393636-1');

const useGaTrackPage = (path: string) => {
  useEffect(() => {
    ReactGA.pageview(path);
  }, [path])
}

export default useGaTrackPage

説明の必要もないくらいシンプル。
ReactGAをimport & initialize(引数はGoogleAnalyticsのトラッキングID)して、useEffect内でReactGA.pageview(page);を実施しています。

useGaTrackPageは引数としてpath(測定対象のサイトURLのドメインを含まないパス)を受け取ります。
例えばhttps ://news.yahoo.co.jp/pickup/6352961が測定対象であれば、渡すのは/pickup/6352961になります。
ただreact-routerを用いる場合、利用側でその辺りを意識する必要は全くありません。この点は後ほど説明します。

コンポーネント(hooks利用側)

import React from 'react'
import useGaTrackPage from './hooks/useGaTrackPage'
import { useParams, useLocation } from 'react-router-dom'

const SomeComponent: React.FC = () => {
  const location = useLocation()
  useGaTrackPage(location.pathname)

  return (
      <NextComponent />
  )
}

export default SomeComponent

useGaTrackPageをimportして、コンポーネント内で呼び出すだけです。引数には useLocation()を利用したlocation.pathnameを渡せばOK。コンポーネントに追加するコードはわずか2行で済みます。

最後に

まとめると上のuseGaTrackPageを用意して、任意のコンポーネントで呼び出してあげればOKです。
useGaTrackPageに渡す引数も、location.pathnameと同等のものを渡せば良いので、特にreact-routerである必要もありません。実際このやり方で、到達ページを指定したコンバージョンの測定はできました。まぁまぁ使いやすいのでは？と思っていますがいかがでしょう？

この方法に不備がある場合や、もっと良いやり方をご存知の方は是非コメントください！

hooksを使って(簡単に)ReactアプリへGoogleAnalyticsを導入する方法

前提

最低限必要な処理

サンプルコード

hooks

コンポーネント(hooks利用側)

最後に