我一直在尝试在我的应用中使用react-ga包与Google Analytics 4。但是它的测量ID无法正常工作，并且在Google Analytics 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 目前还不够成熟）创建通用分析类型的属性，并使用其 ID（UA-XXXXX-X）与您指定的插件。您可以通过单击“显示高级选项”（创建新属性时）找到它：
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()”方法应该跟踪到“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/
UA-xxxxxxxxx-x），该属性将于2023年7月1日停止使用，以及谷歌分析4属性（G-xxxxxxxxxx），它是通用分析的替代品。
react-ga 曾经很受欢迎，用于 Universal Analytics，但 维护者不打算更新它（相关问题：1, 2, 3），并且存在维护问题（1）。react-ga4 和 ga-4-react 出现作为替代品，但由于这些是类似的包装器，你需要依赖于维护者来实现和支持所有功能。
gtag并将其用作window.gtag。这种方法适用于新旧标签，甚至可以通过@types/gtag.js获得TypeScript支持。该脚本可以异步加载，建议使用。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx" >
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxxxx')
</script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
请记住，Google Analytics会自动跟踪页面，但这并不适用于每种情况。例如，hash和search参数的更改不会被跟踪。这可能会导致很多混淆。例如，在使用HashRouter或锚链接时，导航将无法跟踪。为了完全控制页面视图跟踪，您可以禁用自动跟踪。详细解释请参见：《React（或其他任何内容）上 Google Analytics（UA和GA4）的最终指南》。
手动跟踪页面：https://dev59.com/E1sW5IYBdhLWcg3wi36j#63249329
您可以在cra-typescript-starter中看到此操作的示例，我还从环境变量中设置了标签。Google Analytics 4与之前的GA 4不同，react-ga尚未支持GA 4。 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 属性。然而，有一个新的库 ga-4-react 是专门为 GA 4 制作的，看起来很有前途。 - bluenote10react-ga无法与GA-4配合使用。在react-ga的问题中，所有者已经说过，除非有人创建一个PR，否则他不打算添加GA-4支持。该项目也不再得到很好的维护。
您可以在GA管理仪表板中创建一个通用属性，以实现与早期GA版本的向后兼容性。此时，您可以使用 react-ga, 但最好的选择是使用ga-4-react 代替：https://github.com/unrealmanu/ga-4-react
npm i ga-4-react
错误：加载“https://www.google-analytics.com/analytics.js”时失败。
...以下是扩展他的代码以使用ga4react.initialize()返回的promise。这样，您就可以基本上检测到脚本未加载，因此可以推断用户是否有广告拦截器阻止GA脚本的加载。在我的示例代码中，我只是忽略它并加载应用程序...在其他情况下，我想你可以调用一个模态框来告诉他们禁用它（当然，那将带来额外的代码）。
通过添加：
await ga4react.initialize()
在 src 中的 index.js 中加入以下代码，即可启动 GA-4 并添加页面浏览数据。这个方式同样适用于 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')
);
});
})();
react-ga，但不幸的是，它无法与最新版本的Google Analytics 4一起使用。它可以与旧的UA-0000-01标签一起使用，这些标签与Universal Analytics相关联，但不能与G-XXXXXX标签一起使用，该标签属于Google Analytics 4。 Universal Analytics将在不久的将来停止工作。
解决方案：
为了解决这个问题，您应该开始使用支持Google Analytics 4的react-ga4 npm包。
https://www.npmjs.com/package/react-ga4
注意： 通用分析属性将于2023年7月1日停止收集数据。建议您创建一个Google Analytics 4属性。 参考：Google Analytics支持并没有具体回答问题。但是你可以创建一个Firebase Web应用程序来记录事件。对我来说，这是解决将数据输入Google Analytics的一种变通方法，因为似乎您不能再像以前一样创建UA标识符了。
广告拦截器。请禁用您的广告拦截扩展程序。
我花了很长时间才意识到问题出在一个广告拦截 Chrome 扩展程序上，这让我感到非常痛苦。
一旦我禁用了该扩展程序，事件就开始触发了。