带有React和React Router的Google Analytics分析

问题描述

我一直试图将Google Analytics（分析）集成到我的react应用程序中，并且我使用了此thread中提到的所有方法，但所有解决方案都失败了。以下是我尝试的方法以及我遇到的相应错误。希望有人能帮忙

import React,{ Fragment } from 'react';
import store from './Store';
import { Router,Route,Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import Navbar from './components/layout/Navbar';
import Login from './components/auth/Login';
import Footer from './components/layout/Footer';
import MobileMenu from './components/layout/MobileMenu';
import Tutorial from './components/layout/Tutorial';
import ReactGA from 'react-ga';
import { createbrowserHistory } from 'history';

const history = createbrowserHistory();
ReactGA.initialize('G-11111111');
history.listen((location,action) => {
  ReactGA.pageview(location.pathname + location.search);
  console.log(location.pathname);
});
const App = () => {
  return (
    <div className="App">
      <Provider store={store}>
        <MuiThemeProvider theme={theme}>
          <Router history={history}>
            <Fragment>
              <Navbar />
              <Switch>
                <Route exact path="/" component={Login} />
                <Route exact path="/tutorial" component={Tutorial} />
              </Switch>
              <MobileMenu />
              <Footer />
            </Fragment>
          </Router>
        </MuiThemeProvider>
      </Provider>
    </div>
  );
};

export default App;

第一页正常加载，但是如果我单击交换机上的任何链接，则会得到空白页和以下警告

react_devtools_backend.js:2450 [react-ga] path is required in .pageview()

我尝试了钩子的第二种方法，我得到了同样的错误

import React,{ Fragment,useEffect } from 'react';
import store from './Store';
import { Router,Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import Navbar from './components/layout/Navbar';
import Login from './components/auth/Login';
import Footer from './components/layout/Footer';
import MobileMenu from './components/layout/MobileMenu';
import Tutorial from './components/layout/Tutorial';
import ReactGA from 'react-ga';
import { createbrowserHistory } from 'history';


const history = createbrowserHistory();
ReactGA.initialize('G-11111111');

history.listen((location,action) => {
  ReactGA.pageview(location.pathname + location.search);
});

const App = () => {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search);
  },[]);

  return (
    <div className="App">
      <Provider store={store}>
        <MuiThemeProvider theme={theme}>
          <Router history={history}>
            <Fragment>
              <Navbar />
              <Switch>
                <Route exact path="/" component={Login} />
                <Route exact path="/tutorial" component={Tutorial} />
              </Switch>
              <MobileMenu />
              <Footer />
            </Fragment>
          </Router>
        </MuiThemeProvider>
      </Provider>
    </div>
  );
};

export default App;

我尝试使用useLocation（）且没有历史记录的第三种方式

import React,useEffect } from 'react';
import store from './Store';
import {
  browserRouter as Router,Switch,useLocation
} from 'react-router-dom';
import { Provider } from 'react-redux';
import Navbar from './components/layout/Navbar';
import Login from './components/auth/Login';
import Footer from './components/layout/Footer';
import MobileMenu from './components/layout/MobileMenu';
import Tutorial from './components/layout/Tutorial';
import ReactGA from 'react-ga';
import { createbrowserHistory } from 'history';



const history = createbrowserHistory();
ReactGA.initialize('G-11111111');


const App = () => {
  const location = useLocation();

  // Fired on every route change
  useEffect(() => {
    ReactGA.pageview(location.pathname + location.search);
  },[location]);


  return (
    <div className="App">
      <Provider store={store}>
        <MuiThemeProvider theme={theme}>
          <Router history={history}>
            <Fragment>
              <Navbar />
              <Switch>
                <Route exact path="/" component={Login} />
                <Route exact path="/tutorial" component={Tutorial} />
              </Switch>
              <MobileMenu />
              <Footer />
            </Fragment>
          </Router>
        </MuiThemeProvider>
      </Provider>
    </div>
  );
};

export default App;

我收到以下错误

TypeError: Cannot read property 'location' of undefined

解决方法

最有可能取决于您是否使用Google Analytics（分析）4属性ID（G-XXXXXXXX），而有问题的React Analytics软件包适用于Universal Analytics。建议您创建一个Universal Analytics属性（如下图所示），并使用相对标识符UA-XXXXXXX-X：