【GAトラッキング】React+Reduxでページごとに統計情報を送信する

# ページが変わるイベントの拾え方
画面構成上ではそれぞれのページのURLが違いますので、URLが変わるタミングでGAトラッキングデータを送信したいです。
React+Reduxの場合、次の２つ方法でそのイベントを拾えることができますが、react-gaのホームページ載せているonUpdate案を採用することになりました。

- Hisotryリスナー案

Routerに設定されたHistoryオブジェクトにリスナーを登録することで、画面遷移が発生するたびに呼ばれます。

```js
// router.jsx (一部)

import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import store from './store/configStore';
const history = syncHistoryWithStore(browserHistory, store);

history.listen(function (location) {
  // locationが新しいものです
  // ga処理
});

render((
  <Provider store={store}>
    <Router history={history}>
      <Route component={App}>
...

```

- RouterのonUpdate案

RouterのonUpdate属性にコールバックを登録します。

下記は、SPAでURLに検索パラメータやハッシュが存在しない場合の例です。初期化時、locationにドメイン名までの固定URLを設定します。

```js
// router.jsx (一部)
import ReactGA from './ReactGA';

render((
  <Provider store={store}>
    <Router history={history} onUpdate={ReactGA.doPageTracking}>
...

// ReactGA.js
import * as OrginalReactGA from 'react-ga';

class ReactGA {

  constructor() {
    // window.ga_debug = { trace: true }; // google-analyticsのデバッグログフラグ
    this.lastestPage = null;
    this.original = OrginalReactGA;

    this.original.initialize('U-12345678-9', {
      // debug: true   // react-gaのログ出力
    });

    this.original.set({
      // sendHitTask: null,  // google-analytics送信しない設定
      location: `${window.location.protocol}//${window.location.hostname}/`
    });

    this.doPageTracking = this.doPageTracking.bind(this);
  }

  doPageTracking() {
    const page = window.location.pathname;
    if (page === this.lastestPage) {
      return;
    }
    this.lastestPage = page;

    this.original.set({
      // 独自なデータを設定
      page
    });
    this.original.pageview(page);
  }

}

export default new ReactGA();
```

locationに検索パラメータが含まれる場合、locationフィールドを毎回変わるようにします。

```js
// router.jsx (一部)
import ReactGA from './ReactGA';

render((
  <Provider store={store}>
    <Router history={history} onUpdate={ReactGA.doTracking}>
...

// ReactGA.js
import * as OrginalReactGA from 'react-ga';

class ReactGA {

  constructor() {
    // window.ga_debug = { trace: true }; // google-analyticsのデバッグログフラグ
    this.lastestUrl = null;
    this.original = OrginalReactGA;

    this.original.initialize('U-12345678-9', {
      // debug: true   // react-gaのログ出力
    });

    this.original.set({
      // sendHitTask: null,  // google-analytics送信しない設定
      // location: `${window.location.protocol}//${window.location.hostname}/`
    });

    this.doTracking = this.doTracking.bind(this);
  }

  doTracking() {
    const page = window.location.pathname;
    const url = window.location.href;
    if (url === this.lastestUrl) {
      return;
    }
    this.lastestUrl = url;

    this.original.set({
      location: url,
      page,
      // 他の独自なデータを設定
    });
    this.original.pageview(page);
  }

}

export default new ReactGA();
```

# デバッグ方法
GAトラッキングがうまく行ったかどうかをログから確認できます。
### ログ種類
- react-gaログ
初期化時にdebugオプションで指定できます。

```js
this.original.initialize('U-12345678-9', {
  debug: true   // react-gaのログ出力ON
});
```

- google-analyticsログ
下記ソースコードを実行することで、実際に送信された内容がブラウザのconsoleログに出力されます。

```js
window.ga_debug = { trace: true };
```

なお、chromeにgoogle analytics debuggerプラグインをインストールすることで、ブラウザ情報ログ出力ON/OFFをコントロールできます。ログ内容が上記と同じです。

### 本当なトラッキングIDでデバッグしたい場合
sendHitTaskをnullに設定したら、統計情報を送信せずに動作確認することができます。

```js
this.original.set({
  sendHitTask: null,
  location: `${window.location.protocol}//${window.location.hostname}/`
});
```

# 参考記事
- [Adding Google Analytics to your React Application](https://web-design-weekly.com/2016/07/08/adding-google-analytics-react-application/)
- [google analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
- [react-ga](https://github.com/react-ga/react-ga)
- [How to set up Google Analytics for React-Router?](http://stackoverflow.com/questions/34836500/how-to-set-up-google-analytics-for-react-router)