Google Analytics with react and react router

Question

I have been trying to integrate Google analytics in my react app and i used every way mentioned on this thread and all solutions are failing. Below are the methods i tried and the corresponding error i am getting. Hope someone can help

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;

The first page loads normally but if i click on any link from my Switch i get a blank page and the following warning

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

Second method i tried with hooks i get same error

import React, { Fragment, useEffect } 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);
});

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;

Third way i tried using useLocation() and no history

import React, { Fragment, useEffect } from 'react';
import store from './Store';
import {
  BrowserRouter as Router,
  Route,
  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;

I get the following error

TypeError: Cannot read property 'location' of undefined

Answer 1

Most likely it depends on whether you are using a Google Analytics 4 Property ID (G-XXXXXXXX), while the React Analytics package in question works for Universal Analytics. I suggest you create a Universal Analytics Property (as shown in following image) and use the relative identifier UA-XXXXXXX-X: