Google 使用 React 的分析 4

Question

我一直在尝试在我的应用程序中使用带有 google analytics 4 的 react-ga 包。测量 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);

Answer 1

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

Answer 2

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

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

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

感谢评论，我更新了这个 post 一点。我添加了一个 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/

Answer 4

react-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

...

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

ERROR: Loading failed for the with source “https://www.google-analytics.com/analytics.js”

... 下面是他的代码的扩展，以使用 ga4react.initialize() returns 的承诺。这样，您基本上可以检测脚本是否未加载，从而推断用户是否有阻止 GA 脚本加载的广告拦截器。在我的示例代码中，我只是忽略它并加载应用程序......在其他情况下，我想你可以调用一个模式来告诉他们禁用它（当然，这会附带额外的代码）。

通过添加

 await ga4react.initialize()

到您的 index.js 中的 src GA-4 将启动并添加综合浏览量。在不添加任何代码的情况下也可以与 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

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

它提供与普通 react-ga 相同的 API。所以只需将您的包名从 react-ga 更改为 react-ga4 就可以了。

亲自试过，效果很好！

Answer 6

google 分析有 2 个版本

Google 分析 4（更新后的）
Universal Analytics（旧的）

react-ga 与 Universal Analytics 配合得很好，因为它需要跟踪 ID 来初始化 React 和 google 分析之间的连接。

问题是每当用户创建新帐户时，默认情况下都会提供 GA4。但是 GA4 没有所需的跟踪 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 7

没有具体回答问题。但是，您可以创建一个 Firebase 网络应用程序来记录事件。作为将数据输入 Google Analytics 的变通方法为我工作，因为您似乎无法再为我创建 UA 标识符。

Google 使用 React 的分析 4

Google Analytics 4 with React

google-analytics

google-analytics-api

reactjs

react-ga

google-analytics-4