如何使用到达路由器和谷歌分析跟踪页面浏览量？答案

【问题标题】：How to track page views in react using reach router and google analytics?如何使用到达路由器和谷歌分析跟踪页面浏览量？
【发布时间】：2018-11-07 16:41:29
【问题描述】：

我正在将主干应用程序移植到 React 应用程序。在骨干应用程序中，我有以下 sn-p

    <!-- Begin UA code -->
    <script>
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-xxx', 'auto');

    // Load plugins

    // Rewrite all GA pages with /ra_minisite prefix
    ga('require', 'cleanUrlTracker', {
      stripQuery: true,
      queryDimensionIndex: 1,
      urlFieldsFilter: function(fieldsObj, parseUrl) {
        fieldsObj.page = '/ra_minisite'+parseUrl(fieldsObj.page).pathname
        return fieldsObj;
      },
    });

    ga('require', 'eventTracker');
    ga('require', 'maxScrollTracker');

    // Customize so WS.com not tracked as outbound link
    ga('require', 'outboundLinkTracker');

    ga('require', 'socialWidgetTracker');
    ga('require', 'urlChangeTracker');

    // Commented out so we can call after all API calls are done
    // Called from metaManager
    // ga('send', 'pageview');

    </script>
    <script async src="https://www.google-analytics.com/analytics.js"></script>
    <script async src="/autotrack.js"></script>
    <!-- end UA code -->

然后在更新它调用的元标记后在每个页面上渲染

window.ga('send', 'pageview');

我假设我可以将初始化逻辑放到 index.html 中，但是将window.ga('send', 'pageview'); 挂接到到达路由器中，这样当路由更改或更新时，页面浏览量将被发送到 GA 会有什么好的、简单的方法？

【问题讨论】：

标签： reactjs google-analytics create-react-app reach-router

【解决方案1】：

您可以收听全局历史对象。在你的App.js:

import { globalHistory } from '@reach/router';

globalHistory.listen(({ location }) => {
  window.ga('send', 'pageview');
  // or use the new gtag API
  window.gtag('config', 'GA_MEASUREMENT_ID', {'page_path': location.pathname});
});

这是最简单的方法，代码量最少，并且与顶部答案中的 LocationProvider 方法不同，它不会破坏全局 navigate API。

不幸的是，globalHistory 似乎没有在任何地方记录，所以很难找到。

【讨论】：

我在 react-ga ``` globalHistory.listen(({ location }) => { ReactGA.pageview(window.location.pathname + window.location.search); }) 中使用了这个概念; ```

【解决方案2】：

您可以手动创建历史对象，您可以使用 createHistory 函数监听更改。你可以附加一个监听器并在那里发送一个pageview 事件。

示例

import { createHistory, LocationProvider } from '@reach/router';

const history = createHistory(window);

history.listen(() => {
  window.ga('send', 'pageview');
});

const App = () => (
  <LocationProvider history={history}>
    <Routes />
  </LocationProvider>
);

【讨论】：

感谢您试一试。试过你的建议。不幸的是，它似乎不起作用，url 发生了变化，但组件没有，并且“listen”钩子没有被执行。您能否用路线扩展示例？
@AndreiMotinga 您是否也将<LocationProvider history={history}> 添加到您的代码中？否则最上面的Router 将使用它自己的一个单独的history。
@AndreiMotinga Here is a very basic example.
我相信它对我不起作用，因为 LocationProvider 之间或周围有一些 div。无论如何，这似乎可行，只是它似乎破坏了navigate，或者可能是componentDidUpdate。我没有任何运气试图用一个简单的例子来重现。然而，在我的代码中，url 发生了变化，但 componentDidUpdate 没有被触发。你知道为什么会这样吗？我是否需要以某种方式向navigate 提供相同的历史记录？
只是插话，这对我来说也破坏了navigate（网址更改，但组件没有）。如果我找到解决方案，我会回来的。

【解决方案3】：

您可以从到达路由器使用位置提供程序 API：

import { Router,createHistory,LocationProvider }from "@reach/router";
import ReactGA from "react-ga";
ReactGA.initialize("UA-103xxxxx-xx");
const history= createHistory(window);
history.listen( window => {
  ReactGA.pageview(window.location.pathname+ window.location.search);
  console.log('page=>',window.location.pathname);
});

然后在路由中使用它：

<LocationProvider history={history}>
  <Router></Router>
</LocationProvider>

Here 是完整的解决方案。

【讨论】：