森です。
React.js/redux アプリでの Google Analytics のイベントトラッキング用の設定を紹介します。
ライブラリ
以下のライブラリを用います。
他に開発用に Google Analytics Debugger を導入するとよいかもしれません。
実装
パターン1: 直接タグの属性として設定する
eventTracker のオプション attributePrefix を index.html で以下のように指定しています。こうすることで、接頭辞を ga- から data- に変更しています。ga- だと React.js が Warning: Unknown prop といったワーニングを出すからです。
ga(‘require’, ‘eventTracker’, {
attributePrefix: ‘data-‘,
});
もっともよくある設定の例です。
<NFloatingButton
className={className}
onClick={redirectToOrderPage}
data-on=”click”
data-event-category=”Request”
data-event-action=”Request”
data-event-label=””
>
onTouchTap をつけたタグの場合は、data-on=”click” ではなく data-on=”touchstart” と指定することで、動作します。
<NPrimaryButtonHalfWidth
styleName=”button”
onTouchTap={HogeAction}
label=”ほげほげ”
data-on=”touchstart”
data-event-category=”C1″
data-event-action=”A1″
data-event-label=”L1″
/>
touchstart に対応させるため、eventTracker のオプションを追加しています。
ga(‘require’, ‘eventTracker’, {
attributePrefix: ‘data-‘,
events: [‘click’, ‘touchstart’],
});
パターン2: アクションに対して設定する
一つの UI、たとえばボタンが、複数の用途で使われることがあります。その場合、その UI のタグに、直接 GA の属性を指定するわけにはゆきません。redux-beacon を使うことで、React.js のアクションに、GA の指定を対応づけることができます。
GA_FOO というアクションに対し、GA のカテゴリ C1、GA のアクション A1、GA のラベル L1 を対応づけてみましょう。
まずはアクションを定義します。
import * as ActionTypes from ‘./action_types’;
import { createAction } from ‘redux-actions’;export const gaFoo = createAction(ActionTypes.GA_FOO);
ミドルウェアを書きます。
あとは、他のミドルウェアと同様に、この googleAnalytics ミドルウェアを applyMiddleware() して createStore() します。
結果の閲覧
Google アナリティクス の Web サイトの以下のページから、結果を閲覧できます。
- リアルタイムデータ: リアルタイム > イベント
- 過去データ: 行動 > イベント