Cba分析:将GoogleAnalytics添加到React

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

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

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

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

我如何用React做到这一点

请帮忙!

114

更新: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

28

如果您不喜欢使用包,这就是它在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"
        });
23

如果不使用软件包,我会这样做:

在您的方法中(在方法中):

    {/* 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');
};
4

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

它可以很容易地与react/redux应用程序集成,并且有很好的文档。ReactGA也很好,但有了redux信标,你就不会让你的应用程序代码与谷歌分析代码混在一起,因为它通过自己的中间件工作。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(206)
华为仓颉编程语言:规范语言 vs编程语言(coq programming language)
上一篇
文本文档是什么:对文本文档进行分类的好方法是什么
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(15条)