Question

我正在尝试使用Google Analytics（分析）设置event tracking。我正在gatsby-plugin-google-analytics中使用Gatsby和gatsby-config.js在我的文档标题中生成此Google Analytics（分析）摘要。

// gatsby-config.js
{
  resolve: `gatsby-plugin-google-analytics`,
  options: {
     trackingId: process.env.GA_TRACKING_CODE,
     head: true
  }
}

在查看页面源代码时在文档的头部：

<link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"/><script>

  if(!(navigator.doNotTrack == "1" || window.doNotTrack == "1")) {
    (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');
  }
  if (typeof ga === "function") {
    ga('create', 'UA-XXXXXXXX-X', 'auto', {}); // tracking code commented out         
  }
  </script>

现在，根据Google Analytics docs on events，我可以利用已加载上述脚本的analytics.js脚本将自定义事件发送到GA。从理论上讲，我可以在我的一个组件上使用一个React的onClick事件来触发一个发送所需数据的函数。

例如：

export default class Header extends React.Component {

    function trackCall() {
        ga('send', 'event', 'Call Us', 'call', 'Call Us')
    }

    render() {
        <button onClick={this.trackCall) href="tel:1234567890">Call Us</button>

}

问题是该代码将给我gatsby：error 'ga' is not defined no-undef中的编译错误。 我不确定如何正确定义此定义，例如：获取对全局GA对象的引用，然后调用其方法。

我知道GA跟踪正在我的网站上运行，因为我已经对其进行了实时测试。但是，当我在控制台中扫描网络资源时，似乎找不到任何对分析脚本或资源的引用，因此，尽管它似乎正在加载，但可能是与gatsby和/或{{1 }}正在以我不知道的方式加载它。

理想情况下，我想加载GA脚本，然后能够访问其方法以触发来自组件的事件。

我知道gatsby-plugin-google-analytics，并查看了一些示例，但希望在没有其他程序包的情况下实现。

谢谢

Answer 1

遇到相同的问题，并使用以下方法找到了问题...

将以下内容放入您的gastby-config.js中，并在跟踪ID中添加Google Analytics（分析）ID

    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          "UA-XXXXXXXX-X"
        ],
        pluginConfig: {
          head: true,
        },
      },

以及要调用window.gtag的位置，将其包裹在if这样定义的地方

export default class Header extends React.Component {

    function trackCall() {
        if(window.gtag){
            window.gtag('send', 'event', 'Call Us', 'call', 'Call Us')
        }
    }

    render() {
        <button onClick={this.trackCall) href="tel:1234567890">Call Us</button>

}

处于开发模式的Gatsby将不再抱怨，并且将忽略代码。然后，如果您使用gatsby build，然后使用gatsby serve和GA Debug chrome扩展名，您会看到它将您的标记添加到了dataLayer。

结合gatsby-plugin-google-analytics在窗口中查找Google Analytics（分析）对象

1 个答案: