在 React 应用程序中将 Google Analytics 与到达路由器集成

Question

我想将 Google Analytics 集成到我的 React 应用程序中。我正在使用到达路由器，这使事情变得更加复杂。

如果我像这样使用位置提供程序，则导航 API 将不起作用。因此，如果单击任何页面，页面都不会呈现

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

import ReactGA from "react-ga";

ReactGA.initialize("G-xxxxxxx");

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>

如果我使用globalHistory谷歌分析仅在主页上可用，没有其他页面在统计中

ReactGA.initialize("G-XXXXXXXXXXX");

globalHistory.listen(({ location }) => {

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

  // or use the new gtag API

  window.gtag('config', 'G-XXXXXXXXXX', {'page_path': location.pathname});

});

有人知道如何通过第一种或第二种方式解决这个问题吗？

Answer 1

这取决于您使用的是 Google Analytics 4 媒体资源 ID (G-XXXXXXXX)，而相关的 React Analytics 包适用于 Universal Analytics。我建议您创建一个Universal Analytics媒体资源（如下图所示）并使用相对标识符UA-XXXXXXX-X：