2019年2月16日

React StaticでGoogle Analyticsを使うには

React StaticでSPAアプリケーションを作ったときに、Google Analyticsでアクセス解析をするにはどうすればよいか、というメモです。

Reactだと react-ga というライブラリがよく使われているようです。これを使うとGoogle Analyticsへのトラッキング情報の送信が楽になるようですが、ブラウザ上でのページ遷移のタイミングは自分で検知して送信するようにコードを書かなければなりません。

React Routerを使う場合のサンプルがGitHubのdemoフォルダ内にありました。

https://github.com/react-ga/react-ga/blob/master/demo/app/withTracker.jsx

これを見ると、withTrackerというHigher Orderコンポーネントを作ってlocationの変更を検知してGAに送信するようになっています。


今回はReact Staticを使って作ったサイトだったので、ルーティングの仕組みが少し違ってこのサンプルコードをそのまま使うことが出来ず、少し手を加えたものを作って一応動くようにはなったのですが、なんとなくしっくり来ませんでした。


そこであらためてGoogle Analyticsのドキュメントを読み返してみると、下のような記述を見つけました。

https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
--
デフォルトの JavaScript トラッキング スニペットは、ユーザーが新しいページを読み込むたびに実行されるため、従来のウェブサイトでは正常に動作しますが、SPA の場合、サイトで新しいページを読み込むときに、ページ全体を読み込むのではなくコンテンツを動的に読み込むため、analytics.js スニペット コードが実行されるのは一度だけとなります。つまり、以降のページビュー(仮想ページビュー)は、新しいコンテンツが読み込まれるときに手動でトラッキングする必要があります。



--

青枠の注釈部分が特に重要です。

SPA用に、既にGoogleからurlChangeTrackerというプラグインが提供されているのです。これを使うことで、自分でページ遷移のタイミングを拾ってトラッキング情報を送信するという処理を書く必要が無くなります。

つまり、やるべきことは以下の通りになります。

1. 初回表示時にanalytics.jsを読み込んで初期化 & 初回トラッキング情報を送信。
2. urlChangeTrackerを読み込む。(以降のページ遷移は自動的に送信される。)

結局、「react-gaを使わずに最初から自分で書いた方がシンプルになるのでは?」と思ったので一から書き直しました

--

--

render()メソッド内で autotrack.custom.js というスクリプトファイルを読み込んでいますが、これは urlChangeTrackerのドキュメントにしたがって必要なプラグインだけをカスタムビルドして作成したものを public フォルダ内に配置したものです。

このGoogleAnalyticsコンポーネントをApp.js内で読み込んで下のように使うことで、React Staticで作ったサイトでGoogle Analyticsがちゃんと機能するようになりました。



最後に、GoogleAnalyticsコンポーネント内で参照している gaID というプロパティですが、これは React Static の withSiteData というHoCを使って自動的に挿入されます。実際の値の定義は下記のように static.config.js ファイル内で行っています。
--

--


0 件のコメント:

コメントを投稿