ページが変わるイベントの拾え方
画面構成上ではそれぞれのページのURLが違いますので、URLが変わるタミングでGAトラッキングデータを送信したいです。
React+Reduxの場合、次の２つ方法でそのイベントを拾えることができますが、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}/`
});