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的问题相关的代码。我只是想让你准确了解一下对我有用的东西。

React Router v4 Google Analytics react-ga

1 个答案: