带有 React 的 Google Analytics 4

Question

我一直在尝试在我的应用程序中使用带有 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);

Answer 1

谷歌分析有 2 个版本

1. Google Analytics 4（更新版）
2. Universal Analytics（旧版）

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 中一样。”

我建议观看以下视频：

GA4 与 Universal Analytics：https://www.youtube.com/watch?v=Y6WxUEk6clw

如何降级或保留两者：https://www.youtube.com/watch?v=jRmb0jMNUKU

Answer 2

您可能想看看这个包： https://www.npmjs.com/package/react-ga4

它提供与普通 react-ga 相同的 API。所以只要把你的包名从 react-ga 改成 react-ga4 就可以了。

自己试过了，效果很好！

Answer 3

.. 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()

感谢 cmets，我稍微更新了这篇文章。我添加了一个 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/

Answer 4

react-ga 不适用于 GA-4。我还要说，在react-ga的issues中，楼主说过除非有人创建PR，否则他不打算添加GA-4支持。该项目也没有得到很好的维护。

理论上，您可以在 GA 管理仪表板中创建一个通用属性，以便向后兼容早期的 GA 版本。此时，您可以使用react-ga，但最好的办法是使用ga-4-react：https://github.com/unrealmanu/ga-4-react

npm i ga-4-react

...

我将补充 @TG___ 的答案。他在回答中提供的代码是一个好的开始，但我会提到，如果有人有 adblocker（adblocker 会阻止分析请求端点、没有错误处理等），它通常会使应用程序崩溃。

错误：来源为“https://www.google-analytics.com/analytics.js”的加载失败

... 下面是他的代码的扩展，以使用ga4react.initialize() 返回的承诺。这样，您基本上可以检测脚本是否未加载，从而推断用户是否有阻止 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')
  );
});
})();

Answer 5

您在示例中输入的代码G-XXXXXXXXXX 指的是新的 Google Analytics 4，它与之前的系统不同，并且（还）不能与该插件一起使用。

因此，您可以按照@Shyam 的答案中提到的说明进行操作，或者（我建议您，因为 GA4 目前还不够成熟）创建一个 Universal Analytics 类型的属性并将其 ID (UA-XXXXX-X) 与你指出的插件。您可以通过点击Show advanced options 找到它（当您创建新属性时）：

Answer 6

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