React: GoogleアナリティクスでSPAをトラッキングする

通常のWEBページでGoogleアナリティクスを使用するにはヘッダーに指定のタグを埋め込むだけで良いですが、その手法では、Reactを用いたSPAのページ遷移を正しく集計できません。そこで、ちょっとした工夫が必要になります。

react-gaのインストール

yarn add react-ga

index.js

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Switch } from 'react-router-dom';
import ReactGA from 'react-ga';
import createBrowserHistory from 'history/createBrowserHistory';

ReactGA.initialize('[トラッキングコード]');
const history = createBrowserHistory();
history.listen(({ pathname }) => {
  ReactGA.set({ page: pathname });
  ReactGA.pageview(pathname);
});

render(
       <Router history={history}>
         <Switch>
           <Route .../>
           <Route .../>
         </Switch>
       </Router>,
       document.getElementById('root')
)