Google Analytics avec le routeur React and React

Question

J'ai essayé d'intégrer Google Analytics dans mon application React et j'ai utilisé toutes les méthodes mentionnées sur ce fil et toutes les solutions échouent. Voici les méthodes que j'ai essayées et l'erreur correspondante que j'obtiens. J'espère que quelqu'un peut aider

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;

La première page se charge normalement mais si je clique sur un lien de mon Switch, j'obtiens une page vierge et l'avertissement suivant

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

Deuxième méthode que j'ai essayée avec des crochets, j'obtiens la même erreur

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;

Troisième façon j'ai essayé d'utiliser useLocation () et pas d'historique

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;

J'obtiens l'erreur suivante

TypeError: Cannot read property 'location' of undefined

Answer 1

Cela dépend très probablement du fait que vous utilisez un ID de propriété Google Analytics 4 (G-XXXXXXXX), tandis que le package React Analytics en question fonctionne pour Universal Analytics. Je vous suggère de créer une propriété Universal Analytics (comme indiqué dans l'image suivante) et d'utiliser l'identifiant relatif UA-XXXXXXX-X: