Question

请告诉我如何在preact中加入Google Analytics？我发现有人在react做了如下操作

  componentDidMount() {
    window.ga = window.ga || function() { (ga.q = ga.q || []).push(arguments)  }; ga.l = +new Date;
    const account = this.props.account;
    // const scriptProtocol = ("https:" === document.location.protocol ? "https://ssl" : "http://www");
    const scriptSrc = `//google-analytics.com/analytics.js`;
    jQuery.getScript(scriptSrc, () => {
      // Track Route changes
      ga("create", account, "auto");
      if(this.props.history) {
        this.props.history.listen((newLocation) => {
          ga("send", "pageview", newLocation.pathname);
        });
      }
    });
  }

但问题是这个人在上面的代码中使用了jQuery undefined。请让我知道如何解决它。

Answer 1

您可以使用react-ga依赖项来实现此目的。

如该项目文档中所述：使用npm install react-ga --save将其添加为依赖项（例如，如果您使用的是npm），则只需将此代码添加到您的主要组件中即可：

import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000-01');
ReactGA.pageview(window.location.pathname + window.location.search);

react-ga还具有函数调用来完成与jQuery方法相同的功能，例如将综合浏览量和其他数据发送到Google Analytics（分析）。

Answer 2

使用jquery时请按照

进行操作

尝试安装npm install jquery

然后导入jquery如下

import jQuery from 'jquery';

添加谷歌分析的其他方法是添加以下不需要jquery的代码

 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', '***YOUR ID HERE****', 'auto');
  ga('send', 'pageview');

如何在preact中包含Google Analytics

2 个答案: