将 Google Analytics 添加到 React

Question

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

我知道如何在 HTML/CSS/JS 网站中做到这一点，并且我也将它集成到了 AngularJS 应用程序中。但是，当涉及到反应时，我不太确定如何去做。

使用 HTML/CSS/JS，我刚刚将它添加到每个页面。

我对 AngularJS 所做的是将 GTM 和 GA 脚本添加到 index.html 并将 UA 标签添加到 HTML div（和按钮）以获取点击。

我怎样才能用 React 做到这一点？

请帮忙！

原文由 Raj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新：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 代表

原文由 Matan Bobi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您不想使用包，这就是它在 React 应用程序中的工作方式。在 index.html 中添加“gtag”

 <!-- index.html -->

<script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag("js", new Date());

            gtag("config", "<GA-PROPERTYID>");
        </script>

在登录表单的提交操作中，触发事件

window.gtag("event", "login", {
            event_category: "access",
            event_label: "login"
        });

原文由 Giwan 发布，翻译遵循 CC BY-SA 4.0 许可协议