在 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：