Question

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

我知道如何在HTML/CSS/JS站点中实现它，我也将它集成到了AngularJS应用程序中。但是，我不太确定如何应对。

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

我对AngularJS所做的是将GTM和GA脚本添加到索引中。html并将UA标签添加到html div（和按钮）以获得点击。

我如何用React做到这一点

请帮忙！

114

28

23

4

Answer 1

更新：xx年xx月
由于我看到这个问题被搜索了很多，我决定扩展我的解释
要将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

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"
        });

Answer 3

如果不使用软件包，我会这样做：

在您的方法中（在方法中）：

    {/* Global site tag (gtag.js) - Google Analytics */}
    <script
      async
      src="s://www.googletagmanager/gtag/js?id=YOUR_TRACKING_ID"
    />
    <script>{injectGA()}</script>

在课堂外：

const injectGA = () => {
  if (typeof window == 'undefined') {
    return;
  }
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'YOUR_TRACKING_ID');
};