如何为 React-Router 设置 Google Analytics？

Question

我正在尝试在我的 react 站点上设置 Google Analytics，并且遇到了一些软件包，但没有一个具有我在示例方面的设置。希望有人可以对此有所了解。

我正在查看的包是react-ga。

我的index.js 上的渲染方法如下所示。

React.render((
<Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
        <IndexRoute component={Home} onLeave={closeHeader}/>
        <Route path="/about" component={About} onLeave={closeHeader}/>
        <Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
        <Route path="/contact-us" component={Contact} onLeave={closeHeader}>
            <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
        </Route>
        <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
        <Route path="/feedback" component={Feedback} onLeave={closeHeader} />
    </Route>
    <Route path="*" component={NoMatch} onLeave={closeHeader}/>
</Router>), document.getElementById('root'));

Answer 1

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

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');
});

Answer 2

由于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;

Answer 3

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

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

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

您只需在 <Router> 内渲染此组件（但不能作为 <Switch> 的直接子代）。

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

Answer 4

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

这是我的解决方案：

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

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 将在每次路由更改时重新渲染其组件 与渲染道具相同的道具

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