リアクタールータv4 Googleアナリティクスリアクションガー

Question

皆さんは、私のリアクションサイトでリアクションガードを使用するためにドキュメントをフォローしようとしています。私はReact Routerを使用しています。v 4. Googleアナリティクスで、それが見つからない、有効なトラッキングコードがないとのエラーが表示され続けますが、トラッキングIDを使用しています。たぶん、私が欠けている必要があるパズルの部分がありますか？以下は、ここに私のindex.js https://www.npmjs.com/package/react-ga

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {BrowserRouter, Switch, Route} from "react-router-dom"; 
import './index.css'; 
import Home from './containers/home.js' 

import AllExplore from './containers/allexplore.js'; 

import Explore from './containers/explore.js'; 
let ReactGA = require('react-ga'); 

ReactGA.initialize('UA-MYIDNUMBER-1'); 

function logPageView() { 
    ReactGA.set({ page: window.location.pathname + 
window.location.search }); 
ReactGA.pageview(window.location.pathname + window.location.search); 
} 

class App extends React.Component{ 
    render(){ 
     return(
<BrowserRouter onUpdate={logPageView}> 
    <Switch> 
     <Route exact path="/" component={Home}/> 
     <Route exact path="/allexplore" component={AllExplore} /> 

    </Switch> 
    </BrowserRouter> 


    ); 
    } 
} 
ReactDOM.render(<App />, document.getElementById('root')); 

Answer 1

私ReactGAセットアップされています。私は理想的だとは思っていませんが、複数のプロダクションアプリケーションで作業しています。 ReactRouter4も使用します。

GoogleAnalyticsTracking.js

import React from 'react'; 
import GoogleAnalytics from 'react-ga'; 

import settings from './../../config/settings' 

GoogleAnalytics.initialize(settings.GOOGLE_ANALYTICS_KEY /*, {debug : true}*/); 

const GoogleAnalyticsTracking = (WrappedComponent) => { 
    const trackPage = (page) => { 
     GoogleAnalytics.set({ page }); 
     GoogleAnalytics.pageview(page); 
    }; 

    const HOC = (props) => { 
     const page = props.location.pathname; 
     //Disable on dev 
     if (!settings.dev){ 
      trackPage(page); 
     } 

     return (
      <WrappedComponent {...props} /> 
     ); 
    }; 

    return HOC; 
}; 

export default GoogleAnalyticsTracking; 

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import registerServiceWorker from './registerServiceWorker'; 
import { Route } from 'react-router-dom'; 
import { createStore, applyMiddleware } from 'redux'; 
import { Provider } from 'react-redux'; 
import createHistory from 'history/createBrowserHistory'; 
import { ConnectedRouter, routerMiddleware } from 'react-router-redux'; 
import ReduxThunk from 'redux-thunk'; 

import GoogleAnalyticsTracking from './component/GoogleAnalyticsTracking' 
import App from './App'; 
import reducers from './reducers'; 

const history = createHistory() 
const store = createStore(reducers, applyMiddleware(routerMiddleware(history), ReduxThunk)) 

const element = (
    <Provider store={store}> 
     <ConnectedRouter history={history}> 
      <Route component={GoogleAnalyticsTracking(App)} /> 
     </ConnectedRouter> 
    </Provider> 
) 

ReactDOM.render(element, document.getElementById('root')); 
registerServiceWorker(); 

私はジョージア州のあなたの質問に関連するだけで、コードにいくつかを、このダウンきれいにしようとしました。私はちょうど私のために働いているものの正確な図をあなたに伝えたいと思っていました。