Reactの外部サービス連携について(Google Analytics、Sentry、Hotjar)

Reactで外部サービスの連携で扱う方法をメモ書きしておきます。特にGoogle AnalyticsはWEBサービスを立ち上げる際に必須の設定となっています。しかし、ReactはSPAなので、普通の設定ではページごとのアクセスを記録することができません。

その他にもでSentryやHotjarなど、実際のWEBサービスで使うであろう外部サービスがたくさんあります。

今回はその中でも自分が使っている、Google Analytics、Sentry、Hotjarの設定をしていきます。

想定はcreate-react-appで作成したプロジェクトを想定しています。

Google Analytics

まずはじめにreact-gaを使ってGoogle Analyticsを設定します。ページ遷移のライブラリはreact-router-domを想定しています。
ライブラリのインストール

$ yarn add react-ga

index.tsxにreact-gaとhitory apiをインポート

import ReactGA from 'react-ga';
import { createBrowserHistory } from 'history';

プロダクション環境のみで必要なので、NODE_ENVと環境変数と比較してproduction環境なら実行。

//history apiを初期化
const history = createBrowserHistory();

const { NODE_ENV } = process.env;

if (NODE_ENV === 'production') {
    //google analyticsの初期設定
    ReactGA.initialize(process.env.GOOGLE_ANALYTICS_SECRET);

    history.listen(({ pathname }) => {
        ReactGA.set({ page: pathname });
        ReactGA.pageview(pathname);
    });
}

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

GOOGLE_ANALYTICS_SECRETは.envファイルに書き込む

.env

GOOGLE_ANALYTICS_SECRET=VALUE

Sentry

Sentryはエラートラッキングサービスです。特に、WEBサービスで障害が起こった状況や、ユーザーなどをトラッキングしてくれます。
sentry.io

$ yarn add @sentry/browser

if (NODE_ENV === 'production')内に書く。RAVEN_SECRETには、Sentryで取得したAPIキーを入れます。

//ravenの初期設定
Sentry.init({ dsn: process.env.RAVEN_SECRET });

Hotjar

www.hotjar.com

パッケージのインストール

$ yarn add  react-hotjar

if (NODE_ENV === 'production')内に書く。

hotjar.initialize('//', //);

最終的なコード