[解決済み] React-RouterにGoogle Analyticsを設定するには？

質問

私は私の反応サイトにGoogle Analyticsをセットアップしようとしている、といくつかのパッケージに出会ったが、どれも例の面で私が持っているようなセットアップを持っていない。 誰かがこれに光を当てることができることを期待していた。

私が見ているパッケージは react-ga .

私のレンダーメソッドは index.js のレンダリングメソッドはこのようになります。

React.render((
<Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
        <IndexRoute component={Home} onLeave={closeHeader}/>
        <Route path="/about" component={About} onLeave={closeHeader}/>
        <Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
        <Route path="/contact-us" component={Contact} onLeave={closeHeader}>
            <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
        </Route>
        <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
        <Route path="/feedback" component={Feedback} onLeave={closeHeader} />
    </Route>
    <Route path="*" component={NoMatch} onLeave={closeHeader}/>
</Router>), document.getElementById('root'));

どのように解決するのですか？

履歴オブジェクトへの参照を保持する。

import { createBrowserHistory } from 'history';

var history = createBrowserHistory();

ReactDOM.render((
    <Router history={history}>
        [...]

次に、各ページビューを記録するリスナーを追加します。(これは、あなたがすでに window.ga オブジェクトを通常の方法で設定したと仮定しています)。

history.listen((location) => {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
});