保留对历史对象的引用。IE

import { createBrowserHistory } from 'history';

var history = createBrowserHistory();

ReactDOM.render((
    <Router history={history}>
        [...]

然后添加一个监听器来记录每次浏览量。（这假设您已经window.ga以通常的方式设置了对象。）

history.listen((location) => {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
});

鉴于 google 分析已加载并使用跟踪 ID 进行初始化。

这是使用<Route>组件跟踪页面浏览量的react-router 版本 4 的解决方案。

<Route path="/" render={({location}) => {
  if (typeof window.ga === 'function') {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
  }
  return null;
}} />

您只需在<Router>( 但不是作为 a 的直接子级<Switch>)内渲染此组件。

发生的情况是，每当 location 属性更改时，它都会导致重新渲染该组件（实际上不渲染任何内容），从而触发页面浏览。

由于react-router v5.1.0使用useLocation.

usePageTracking.js

import { useEffect} from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

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

  useEffect(() => {
    ReactGA.initialize("UA-000000000-0");
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);
};

export default usePageTracking;

App.js

const App = () => {
  usePageTracking();

  return (...);
};

也可以看看：

• https://reactrouter.com/web/api/Hooks/uselocation
• https://github.com/react-ga/react-ga/issues/122

这是一个更聪明的版本：

usePageTracking.js

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

const usePageTracking = () => {
  const location = useLocation();
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    if (!window.location.href.includes("localhost")) {
      ReactGA.initialize("UA-000000000-0");
    }
    setInitialized(true);
  }, []);

  useEffect(() => {
    if (initialized) {
      ReactGA.pageview(location.pathname + location.search);
    }
  }, [initialized, location]);
};

export default usePageTracking;

我正在使用 React Router v4 和 Google Analytics Global Site Tag，这在撰写本文时似乎是推荐的。

这是我的解决方案：

从以下位置创建一个包裹在withRouter 中的组件react-router-dom：

import React from 'react';
import { withRouter } from 'react-router-dom';
import { GA_TRACKING_ID } from '../config';

class GoogleAnalytics extends React.Component {
    componentWillUpdate ({ location, history }) {
        const gtag = window.gtag;

        if (location.pathname === this.props.location.pathname) {
            // don't log identical link clicks (nav links likely)
            return;
        }

        if (history.action === 'PUSH' &&
            typeof(gtag) === 'function') {
            gtag('config', GA_TRACKING_ID, {
                'page_title': document.title,
                'page_location': window.location.href,
                'page_path': location.pathname
            });
        }
    }

    render () {
        return null;
    }
}

export default withRouter(GoogleAnalytics);

只需在您的路由器中添加该组件（我认为理想情况下在任何匹配的路由和任何 Switch 组件之后，因为分析功能不应优先于您的站点呈现）：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import IndexPage from './IndexPage';
import NotFoundPage from './NotFoundPage';
import GoogleAnalytics from './GoogleAnalytics';

const App = () => (
    <Router>
        <Switch>
            <Route exact path="/" component={IndexPage} />
            <Route component={NotFoundPage} />
        </Switch>
        <GoogleAnalytics />
    </Router>
);

就像声明的那样：

每次路由更改时，withRouter 都会使用与渲染props相同的props重新渲染其组件

因此，当路线更改时，GoogleAnalytics组件将更新，它将接收新位置作为props，并且history.action将PUSH用于新的历史项目或POP通过历史向后发送信号（我认为这不应该触发页面视图，但是您可以根据需要调整 if 语句componentWillUpdate（您甚至可以尝试componentDidUpdate使用this.props，但我不确定哪个更好））。

请注意，如果您使用的是react-router-dom软件包，则react-router-4可以这样处理：

import { Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
const initGA = (history) => {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'YOUR_IDENTIFIER_HERE', 'auto');
  ga('send', 'pageview');

  history.listen((location) => {
    console.log("tracking page view: " + location.pathname);
    ga('send', 'pageview', location.pathname);
  });
};

initGA(history);

class App extends Component { //eslint-disable-line
  render() {
    return
      (<Router history={history} >
         <Route exact path="/x" component={x} />
         <Route exact path="/y" component={y} />
       </Router>)
  }
}

请注意，这需要您安装history软件包 ( npm install history)。这已经是 react-router-dom 的依赖项，因此您不会在此处添加任何页面权重。

另请注意：不可能使用 BrowserRouter 组件并以这种方式检测您的 ga 跟踪。这是可以的，因为BrowserRouter 组件只是 Router 对象周围的一个非常薄的包装器。我们在这里使用<Router history={history}>where重新创建 BrowserRouter 功能const history = createBrowserHistory();。