我一直在尝试在我的应用程序中使用带有 google analytics 4 的 react-ga 包。测量 ID 不适用于它，并且在我可以使用的谷歌分析 4 中没有跟踪代码。拜托，我需要帮助！
import ReactGA from 'react-ga';
const trackingId = 'G-XXXXXXXXXX'; // UA-XXXXXXXXX-X isn't available in GA4
ReactGA.initialize(trackingId, options);
ReactGA.pageview(page);
您在示例中输入的代码G-XXXXXXXXXX 是指新的 Google Analytics 4，它与之前的系统不同，并且（还）不能与该插件一起使用。
因此，您可以按照@Shyam 的答案中提到的说明进行操作，或者（我建议您，因为目前 GA4 太不成熟）创建一个 Universal Analytics 类型的属性并将其 ID（UA-XXXXX-X）与您指定的插件一起使用. 您可以通过单击Show advanced options（当您创建新属性时）找到它：
.. react-ga 不适用于 Google Analytics 4。
改用 ga-4-react：https ://github.com/unrealmanu/ga-4-react
npm i ga-4-react
通过添加
import GA4React from "ga-4-react";
const ga4react = new GA4React("G-XXXXXXXXXX");
ga4react.initialize().then().catch()
感谢评论，我稍微更新了这篇文章。我添加了一个 try/catch（用于防止 AddBlocker 崩溃）和一个 setTimeout。“.catch()”-Methode 应该跟在“ga4react.initialize()”之后，以处理初始化承诺中的错误。分析系统不应在页面加载开始时加载。React 应用程序大多是单页应用程序，因此此代码仅加载一次（如果需要，您可以将“4000”毫秒替换为“0”）。
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import GA4React from "ga-4-react";
ReactDOM.render(<App />, document.getElementById("root"));
try {
setTimeout(_ => {
const ga4react = new GA4React("G-XXXXXXXXXX");
ga4react.initialize().catch(err => console.error(err));
}, 4000);
} catch (err) {
console.error(err);
}
// G-XXXXXXXXXX is your MESS-ID from Google Analytics
如何在 Google Analytics 4（新）属性中找到 MESS-ID => https://analyticshelp.io/blog/google-analytics-property-tracking-id/
Google Analytics 4 与 pre ga 4 不同。react-ga 还不支持这一点。 https://github.com/react-ga/react-ga/issues/460
您可能需要手动执行此操作 https://support.google.com/analytics/answer/9325020 https://developers.google.com/analytics/devguides/collection/ga4/tag-guide
react-ga不适用于 GA-4。我还要说，在react-ga's issues 中，所有者说过除非有人创建 PR，否则他不打算添加 GA-4 支持。该项目也没有得到很好的维护。
理论上，您可以在 GA 管理仪表板中创建一个通用属性，以向后兼容早期 GA 版本。那时，您可以使用react-ga，但最好的办法是使用ga-4-react：https ://github.com/unrealmanu/ga-4-react
npm i ga-4-react
...
我将添加到@TG___ 的答案。他在回答中提供的代码是一个好的开始，但我会提到，如果有人有广告拦截器（广告拦截器阻止分析请求端点，没有错误处理等），它通常会使应用程序崩溃。
错误：源“https://www.google-analytics.com/analytics.js”的加载失败</p>
...下面是他的代码的扩展，以使用ga4react.initialize()返回的承诺。这样，您基本上可以检测脚本是否未加载，从而推断用户是否有阻止 GA 脚本加载的广告拦截器。在我的示例代码中，我只是忽略它并加载应用程序......在其他情况下，我想你可以调用一个模式来告诉他们禁用它（当然，这将带有额外的代码）。
通过添加
await ga4react.initialize()
到 src GA-4 中的 index.js 将启动并添加一个综合浏览量。也适用于 react-router，无需添加任何代码。通过 Promise（等待），您必须将其包装到异步函数中（下面作为闭包）。
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const ga4react = new GA4React("G-XXXXXXXXXX");
(async _ => {
await ga4react.initialize()
.then(res => console.log("Analytics Success."))
.catch(err => console.log("Analytics Failure."))
.finally(() => {
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
});
})();
你可能想看看这个包： https ://www.npmjs.com/package/react-ga4
它提供与普通 react-ga 相同的 API。因此，只需将您的包名称从 react-ga 更改为 react-ga4 即可。
自己试过了，效果很好！
谷歌分析有 2 个版本
react-ga 可以很好地与 Universal Analytics 配合使用，因为它需要 Tracking Id 来初始化 react 和谷歌分析之间的连接。
问题在于，每当用户创建新帐户时，默认情况下都会提供 GA4。但 GA4 没有所需的 Tracking Id。GA4 有测量 ID，但 react-ga 不想要它。所以我们需要 Tracking Id 以便在我们的 react 应用程序中设置 react-ga。
所以解决方案是，“要么从 GA4 降级到 Universal Analytics，要么创建一个包含这两者的媒体资源，就像在 GA4 和 Universal Analytics 中一样。”
我建议观看以下视频：