小编典典

如何为React-Router设置Google Analytics(分析)?

reactjs

我正在尝试在我的React网站上设置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'));

阅读 274

收藏
2020-07-22

共1个答案

小编典典

保留对您的历史记录对象的引用。即

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');
});
2020-07-22