React Router v4 Google Analytics（分析）react-ga

Question

嘿，我一直在嘗試與文檔一起使用的每個人，以便在我的React站點中使用react-ga。 我正在使用React Router v4。我在Google Analytics（分析）上不斷收到錯誤消息，指出找不到有效的跟蹤代碼，但我確實使用了我的跟蹤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();

我試圖將其清理為僅一些與您有關GA的問題相關的代碼。 我只是想給您一張對我有用的准確圖片。