在窗口中与gatsby-plugin-google-analytics一起查找Google Analytics对象

Question

我正在尝试使用Google Analytics设置事件跟踪。我正在使用 Gatsby 和gatsby-plugin-google-analytics在我的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 关于事件的文档，我可以利用加载上述脚本的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:[phone]">Call Us</button>
}

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

我知道 GA 跟踪正在我的网站上工作，因为我已经对其进行了实时测试。但是，当我在控制台中扫描网络资源时，我似乎找不到对分析脚本或资源的任何引用，因此尽管它似乎正在加载，但也许它与 gatsby 捆绑在一起的方式和/或gatsby-plugin-google-analytics正在以我不知道的方式加载它。

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

我知道react-ga并查看了一些示例，但更愿意在没有其他包的情况下实现它。

谢谢

Answer 1

有同样的问题，并使用以下方法发现问题...

将以下内容放入您的 gastby-config 中.js并在跟踪 ID 中使用您的 Google 分析 ID

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

以及您要调用的位置window.gtag将其包装在 如果这样定义

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:[phone]">Call Us</button>
}

开发模式下的盖茨比将不再抱怨，并且会忽略代码。然后，如果您使用gatsby build然后gatsby serveGA 调试 chrome 扩展程序，您将看到它将您的标签添加到 dataLayer。