谷歌分析Web+App事件配置：错误“gtag未定义”

Question

谷歌分析Web+App事件配置：错误“gtag未定义”

22

我正在尝试为一个网站设置Google Analytics App+Web电子商务事件配置。请参阅此文档here。

由于电子商务配置有很多定制代码，因此我无法使用通用的GA App+Web网络事件模板，所以在这种情况下我使用自定义HTML标签。

作为第一次测试，我尝试触发以下简单事件：

<script>

  gtag('event', 'blabla', {
  'test_param1': 'test_value_1'
});

</script>

然而，该事件没有正确发送到GA；相反，在控制台中返回以下错误：Uncaught ReferenceError: gtag is not defined。要重现，请参见以下页面：https://www.hema.nl/mooi-gezond/make-up/make-up-accessoires/toilettassen-1/toilettas-11830901.html。其他信息：1) GA App+Web基础初始化通过GTM进行，并使用GA App+Web配置模板标签（成功）完成。2) 我还通过GTM配置了一些其他（简单的非电子商务）GA App+Web事件，这些事件已成功发送到GA。是否有人知道出了什么问题，为什么控制台会显示错误，并且事件为什么没有被发送到GA？

- Timo Rietveld

7个回答

4

这可能有点重复了已经被接受的答案，但我想确认一下，（某些）Google文档确实建议手动添加以下代码片段到您网站的<head>部分，在现有的标签管理器容器代码片段之上：

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

如果符合以下情况，则需要进行此操作：

您正在使用Google Tag Manager部署您的分析标签，而不是“Google Tag”
您希望利用gtag()语法将事件发送到您的GA4分析属性

来源：https://developers.google.com/analytics/devguides/migration/ecommerce/gtm-ga4-to-ua#4_enable_the_gtagjs_api

- Tron08

3

在我的情况下，Uncaught ReferenceError: gtag is not defined 是由于开启了uBlock/adblock造成的。我认为如果接受的答案不起作用，值得进行测试。

- dpatryas

1

问题的原因已经找到。问题似乎是由于使用GTM App+Web基础模板标签进行App+Web基础设置时，gtag（）无法正常工作。相反，应先将事件推送到GTM数据层，然后使用GTM App+Web事件模板将事件发送到Google Analytics。

非常感谢在Merkle工作的Gino解决了这个问题！

- Timo Rietveld

25

你好Timo，你能提供一个解决方案的代码片段吗？谢谢！ - Johnny Saxon

1

如果您正在使用Google Tag Manager，则不存在gtag函数。请按照此指南创建自定义事件。

基本上，您使用的代码是：dataLayer.push({event: 'event_name'});
然后在GTM中设置一个标签为“GA4事件”。
使用您想在Google Analytics中看到的事件名称。
对于触发器，请使用自定义事件。在此处，使用您在代码中使用的名称作为事件名称event_name

- Whip

0

2022年的答案：

对于在SPA/Angular/React应用程序中同时使用GA4 gtag和GTM（Google Tag Manager）遇到困难的人，您应该执行以下操作：

不要使用内置的GTM“Google Analytics：GA4配置”标签配置
使用“自定义HTML”GTM标签，并确保使用来自您的Google Analytics的gtag JS代码，即：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

在那之后，您可以像打算的那样在代码中使用gtag，一切都应该正常工作。不需要整个Firebase或其他什么东西。可能需要执行以下操作：

gtag('config', 'GA_MEASUREMENT_ID', {
  send_page_view: false
});

禁用自动页面跟踪。

- Vladimir Tolstikov

1

这是一种不太规范的做法。为什么不使用GTM提供的正确标签呢？ - Whip

@Whip 我想我试过了，如果是这种情况，我记得在JS中无法使用gtag。 - Vladimir Tolstikov

你不需要使用 gtag。请参考我的答案 https://dev59.com/iFIH5IYBdhLWcg3wIJiB#69787902 - Whip

@Whip，仍然把它作为“gtag”使用是在互联网上许多其他示例中通常的方法。 - Vladimir Tolstikov

0

我发现这是由于我在Chrome浏览器中添加了一个广告拦截扩展程序导致的。

- 植植心

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cristiano Dalbem · Accepted Answer

简短回答

除了GTM GA App+Web标签之外，您还需要添加以下代码才能定义gtag()：

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

长答案

根据官方文档（https://developers.google.com/analytics/devguides/collection/ga4），这是你应该在你的网站中包含的代码：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'MEASUREMENT_ID');
</script>

检查了一个带有该标签的网站后，我发现GTM已经注入了第一行代码，这已足够使分析生效。但它没有添加其他行，其中一些有效地将gtag全局函数定义为向分析数据层推送内容的“语法糖”。

就我个人而言，我觉得这非常奇怪，因为使用GTM是将Google Analytics添加到网站中最正统的方式，并且这两个产品都来自同一家公司。