在 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 Property（如下图所示）并使用相对标识符 UA-XXXXXXX-X：