logo标签列表

如何在本地测试Google Tag Manager

testinglocalhostgoogle-tag-manager
30

我已经创建了一个GTM容器，在其中添加了标签并发布。

它处于调试模式，我可以看到数据层。

但是对于标签，它说在容器中没有标签。

即使标签存在于容器规则和标签中。

所以问题是，我能否在本地机器上测试gtm帐户，即使gtm的域名url是在线的。

如果可以，为什么标签没有显示？ Google发布标签需要时间吗？

我尝试了谷歌浏览器插件，但它只显示基本信息，

我希望像当我在本地点击产品或进行购买时，它应该更新远程帐户的数据，这可能吗？

你可以在这里找到更多信息：https://dev59.com/0mQm5IYBdhLWcg3w6ShR - nyuen
谢谢，我会尝试这样做，但是我之前是使用 Vagrant Share 并使用该 URL 进行测试的。 - murtza gondal
也许使用Chrome浏览器的GTM注入器扩展程序会有用？ - user2516841
截图链接错误。 - zborovskaya
屏幕云已删除截图。 - murtza gondal
请检查您是否在使用 UBlock 来管理标签页。 - Artem Kolodko
5个回答
17

Google Tag Manager可以在本地计算机上轻松测试（无需Chrome扩展程序）, 其步骤与您在公共网站/应用程序上预览更改的方式类似：

  1. 设置您的Google Tag Manager帐户。
  2. 将<!-- Google Tag Manager -->脚本添加到您网页的<head>中。
  3. 将<!-- Google Tag Manager (noscript) -->添加到您网页的<body>中（可选）。
  4. 在Google Tag Manager中进行必要的更新 - 例如添加新标签等。
  5. 在Google Tag Manager中单击“预览”按钮。
  6. 等待Google Tag Manager显示“现在正在预览工作区”的横幅。

  7. 启动本地Web服务器以运行您的应用程序 - 此方法将根据您的本地设置而异，但您应该能够使用本地URL（如localhost:8088/）访问您的应用程序。

    注意：在浏览器中打开文件路径（例如file:///Users/your-name/Documents/）将不起作用。

  8. 在Google Tag Manager打开的相同浏览器中，打开一个新标签并转到您的本地Web服务器URL - 例如localhost:8088。
  9. Google Tag Manager的调试窗格应在浏览器窗口底部可见。
#8 对我有用，谢谢！我正在测试不同的浏览器。 - John Harding
1
自从最后一次GTM更新以来，它不再工作了。 - Marcelo Rodovalho
这太糟糕了，现在它已经无法工作了... - BvuRVKyUVlViVIc7
6
如果你正在使用广告拦截软件，请确保将其关闭。这是对我有效的解决方法。 - Dominooch
3
禁用Chrome扩展程序“uBlock Origin”对我有用。 - abettermap
5

如果有人遇到我遇到的一些问题，请注意以下内容。

使用新的Tag Assistant插件

  1. 将url设置为localhost（除非您已在本地设置https），例如：http://localhost:8080/

  2. 禁用任何广告拦截软件 - 在我们的实际网站上这没有引起问题，但在localhost上引起了问题

4

预览部分有一个轻微的更新。

  1. 确保您已经拥有GTM工作环境。
  2. 打开此网址 https://tagassistant.google.com/
  3. 点击“添加域名”，将会出现如下的屏幕截图。 enter image description here
  4. 单击“连接”按钮，GTMin调试模式下会打开。
2

在本地开发中测试它时，无需采取任何不同的操作。

只需在GTM面板中启用调试/预览模式，然后在同一浏览器中访问您的网站，页面底部将会出现一个控制台窗口，在那里您可以查看有关标签的重要信息。

还有一个名为Tag Assistant的Google Chrome扩展程序，可以用于调试加载页面的标签。

我知道这不是一个好的做法，但此链接提供了很多验证标签是否正常工作的方法。

0
如果您使用的是非标准实现（例如使用Angular服务添加<script>标签），GTM调试器可能无法正常工作。在我的情况下，当localhost:4200加载时，调试器会断开连接，应用程序会冻结，或者页面只能部分加载。
在这种情况下，请恢复到标准实现并重新连接调试器。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接