javascript - React Router v4 谷歌分析 react-ga

Question

大家好，我一直在尝试跟随文档在我的 React 站点中使用 react-ga。我正在使用 React Router v 4。我的 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 的问题相关的代码。我只是想向您准确描述什么对我有用。