如何设置Google Analytics for React-Router？ [英] How to set up Google Analytics for React-Router?

问题描述

我尝试在我的反应网站上设置Google Analytics，并且遇到了一些包，但其中没有一个包含我在示例方面设置的那些包。希望有人能够阐明这一点。

我在看的包是 react-ga 。

我的 index.js 上的render方法看起来像这样。 / b>

  React.render（（
< Router history = {createBrowserHistory（））> 
<路径path =/component = {App}> 
< IndexRoute component = {Home} onLeave = {closeHeader} /> 
 < Route path =/ gallerycomponent = {Gallery} onLeave = {closeHeader} /> 
   <路径路径=/ privacy-policycomponent = {PrivacyPolicy} onLeave = {closeHeader} /> 
 < / Route> 
<路径路径=*component = {NoMatch} onLeave = {closeHeader} /> 
< / Router>），document.getElementById（'root'））; 
  

解决方案

保留对历史对象的引用。即

  var history = createBrowserHistory（）; 
 
 ReactDOM.render（（
< Router history = {history}> 
 [...] 
   window.ga ）， ）
  history.listen（function（location）{
 window.ga（'set '，'page'，location.pathname + location.search）; 
 window.ga（'send'，'pageview'，location.pathname + location.search）; 
}）; 
  
 
I'm trying set up Google Analytics on my react site, and have come across a few packages, but none of which has the kind of set up that I have in terms of examples.  Was hoping someone could shed some light on this.  

The package I'm looking at is, react-ga.

My render method on my index.js looks like this.
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'));

解决方案
Keep a reference to your history object. i.e.
var history = createBrowserHistory();

ReactDOM.render((
    <Router history={history}>
        [...]
Then add a listener to record each pageview. (This assumes you've already set up the window.ga object in the usual manner.)
history.listen(function (location) {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview', location.pathname + location.search);
});


                        
这篇关于如何设置Google Analytics for React-Router？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！