将 Google 分析添加到 React

Question

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

我知道如何在 HTML/CSS/JS 站点中执行此操作，并且我也已将其集成到 AngularJS 应用程序中。但是，当涉及到反应时，我不太确定如何去做。

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

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

我如何使用 React 做到这一点？

请帮忙！

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 rep

Answer 2

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

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

Answer 3

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

在你的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>

在class之外：

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

Answer 4

我建议将 Segment script 嵌入到您的 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 个目的地）而无需编写任何额外代码来解决这个问题，我建议您检查一下.

Answer 5

如果您不想使用包，这就是它在 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 6

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

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

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

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

Answer 7

使用 dangerouslySetInnerHTML

转义分析代码

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

然后，这个 Next.js 答案 https://whosebug.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="" 与 async，但这两个在 HTML 中是等价的，因为它是布尔属性，另见：What's the proper value for a checked attribute of an HTML checkbox?

使用 dangerouslySetInnerHTML 进行转义是必要的，否则 React 会解释 script JSX 中的代码并且失败：

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 答案示例。

将 Google 分析添加到 React

Adding Google Analytics to React

google-analytics

reactjs

react-ga