reactjs - 将 Google Analytics 添加到 React

Question

我正在尝试将 Google Analytics 添加到 React Web 应用程序。

我知道如何在 HTML/CSS/JS 网站中执行此操作，并且我也将其集成到 AngularJS 应用程序中。但是，我不太确定如何使用react。

对于 HTML/CSS/JS，我刚刚将其添加到每个页面。

我使用 AngularJS 所做的是将 GTM 和 GA 脚本添加到 index.html，并将 UA 标签添加到 HTML div(和按钮)以获得点击。

如何使用 React 做到这一点？

请帮忙!

Answer 1

更新:2023 年 8 月
旧包 react-ga 现已存档，因为它不支持 Google Analytics 版本 4。 有一个名为 react-ga4 的新包.
通过运行添加它:
npm 我的 react -ga4

初始化

import ReactGA from "react-ga4";

ReactGA.initialize("your GA measurement id");

报告页面浏览量:

ReactGA.send({ hitType: "pageview", page: "/my-path", title: "Custom Title" });

报告自定义事件:

ReactGA.event({
  category: "your category",
  action: "your action",
  label: "your label", // optional
  value: 99, // optional, must be a number
  nonInteraction: true, // optional, true/false
  transport: "xhr", // optional, beacon/xhr/image
});

更新:2019 年 2 月
当我看到这个问题被搜索很多时，我决定扩展我的解释。
要将 Google Analytics 添加到 React，我建议使用 React-GA。
通过运行添加:
npm install react-ga --save

初始化:
在根组件中，通过运行进行初始化:

import ReactGA from 'react-ga';
ReactGA.initialize('Your Unique ID');

报告页面浏览量:

ReactGA.pageview(window.location.pathname + window.location.search);

报告自定义事件:

ReactGA.event({
  category: 'User',
  action: 'Sent message'
});

更多说明可以在github repo中找到

<小时/>

此 IMO 的最佳实践是使用 React-ga。 看看github rep