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

ページが変わるイベントの拾え方

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

  • Hisotryリスナー案

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

// 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を設定します。

// 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フィールドを毎回変わるようにします。

// 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オプションで指定できます。
this.original.initialize('U-12345678-9', {
  debug: true   // react-gaのログ出力ON
});
  • google-analyticsログ 下記ソースコードを実行することで、実際に送信された内容がブラウザのconsoleログに出力されます。
window.ga_debug = { trace: true };

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

本当なトラッキングIDでデバッグしたい場合

sendHitTaskをnullに設定したら、統計情報を送信せずに動作確認することができます。

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

参考記事

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.