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

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 google 分析仅在首页可用，其他页面不在统计中

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:

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

Integrate Google Analytics with reach router in React application

javascript

google-analytics

reactjs

reach-router