我一直在尝试在我的应用程序中使用 react-ga 包和 google analytics 4。测量 ID 无法使用它，而且我可以使用的 google 分析 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()”后面以处理初始化Promise中的错误。不应在页面加载开始时加载分析系统。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。我还要说，inreact-ga的问题，楼主说过除非有人创建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”加载失败
... 下面是他的代码的扩展，以使用ga4react.initialize()返回的Promise。这样，您基本上可以检测脚本是否未加载，从而推导出用户是否有阻止 GA 脚本加载的广告拦截器。在我的示例代码中，我只是忽略它并加载应用程序......在其他情况下，我想你可以调用一个模式来告诉他们禁用它（当然，这会带来额外的代码）。
通过添加
await ga4react.initialize()
到您在 src GA-4 中的 index.js 将启动并添加一个综合浏览量。也适用于 react-router，无需添加任何代码。通过 Promise (await) 你必须把它包装成一个异步函数（下面是一个闭包）。
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 就可以了。
我自己试过，效果很好！