72

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

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

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

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

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

请帮忙！

4

7 回答 7

107

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

于 2018-03-14T14:08:18.607 回答
24

如果您不想使用包，这就是它在反应应用程序中的工作方式。在 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"
        });
于 2019-05-17T11:26:08.787 回答
23

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

在您的index.js（在render方法中）：

    {/* Global site tag (gtag.js) - Google Analytics */}
    <script
      async
      src="https://www.googletagmanager.com/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');
};
于 2018-07-21T03:06:45.403 回答
3

您可以查看的另一个很棒的库是redux-beacon。

它很容易与 react/redux 应用程序集成，并且有很好的文档。ReactGA 也很好，但是使用 redux-beacon，你不会用谷歌分析代码弄乱你的应用程序代码，因为它通过自己的中间件工作。

于 2018-07-04T06:46:47.360 回答
1

转义分析代码dangerouslySetInnerHTML

首先，您当然必须将标头代码共享给所有页面，例如：React js do common header

然后，这个 Next.js 答案https://stackoverflow.com/a/24588369/895245提供了一个很好的工作代码，它也应该在 Next.js 之外工作。它通过以下方式转义分析代码dangerouslySetInnerHTML：

  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-47867706-3"></script>
  <script
    dangerouslySetInnerHTML={{
      __html: `window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47867706-3', { page_path: window.location.pathname });
`,
    }}
  />

您应该UA-47867706-3用自己的代码替换的地方。

此代码正是 Google 提供的代码，但进行了以下修改：我们添加了：

{ page_path: window.location.pathname }

使其gtag('config'能够获得访问的路径，因为这是一个 JavaScript SPA。

这会在浏览器上生成所需的输出：

<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-47867706-3"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47867706-3', { page_path: window.location.pathname });
</script>

与 Google 给出的确切代码的唯一不同之处是async=""vs async，但这两者在 HTML 中是等价的，因为它是一个布尔属性，另请参阅：HTML 复选框的选中属性的正确值是什么？

转义dangerouslySetInnerHTML是必要的，因为否则 React 会解释scriptJSX 中的代码，并且会失败：

Syntax error: Unexpected token, expected "}"

  21 |           <script>
  22 |             window.dataLayer = window.dataLayer || [];
> 23 |             function gtag(){dataLayer.push(arguments);}
     |                                                      ^
  24 |             gtag('js', new Date());
  25 |
  26 |             gtag('config', 'UA-47867706-3');

我希望他们会自动script为我们逃离里面的东西。

最后要获得页面切换，您还必须使用更多代码来跟踪它，请参阅上面提到的 Next.js 答案以获取示例。

相关：将脚本标签添加到 React/JSX

在 react 17.0.2、next.js 10.2.2 上测试。

于 2021-08-26T10:16:18.047 回答
0

查看谷歌的网站https://developers.google.com/analytics/devguides/collection/analyticsjs，

您还可以使用此功能添加 Google Analytics：

const enableGA = () => {
  !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
  (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
  r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
  }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X');
  ga('send', 'pageview');
}

这样您就不需要外部库，而且设置起来非常快。

于 2020-10-08T13:47:02.020 回答
0

我建议将Segment 脚本嵌入到您的index.html中，使用window对象上可访问的分析库，并将跟踪调用添加到 React 的事件处理程序中：

export default class SignupButton extends Component {
  trackEvent() {
    window.analytics.track('User Signup');
  }

  render() {
    return (
      <button onClick={this.trackEvent}>
        Signup with Segment today!
      </button>
    );
  }
}

我是https://github.com/segmentio/analytics-react的维护者。如果您想通过使用一个单一的 API 来管理您的客户数据并能够集成到任何其他分析工具（我们支持超过 250 多个目的地）来解决这个问题，我建议您检查一下，而无需编写任何额外的代码。

于 2019-02-21T17:20:57.023 回答