Google跟踪代码管理器控制台（GTM控制台）：完整指南

 

已更新：2020年10月20日。 

为什么不’我的标签开火了吗？我可以发送什么数据到Google Analytics（分析）？为什么没有’t this trigger work?

谈到Google跟踪代码管理器，有时我们会遇到麻烦，需要对正在发生的事情进行进一步调查。GTM流程中最重要但又经常被忽略的步骤之一是调试。它使我们能够确保测试所有可能的用户体验方案并验证数据一致性。

在本指南中，我’ll向您展示如何利用Google跟踪代码管理器预览模式（也称为 Google跟踪代码管理器 Console）并分享一些最佳做法。

 

目录

+显示目录+

• 影片教学
• What Is Google跟踪代码管理器 Console?
• 启用GTM控制台
• The layout of the Google跟踪代码管理器 Console
  • 活动时间表
    • Why are there always three 事件s on every page?
    • 还有哪些其他可能的Google跟踪代码管理器事件？
  • 标签
  • 变数
  • 资料层
  • 错误标签
• 刷新/退出
  • 刷新预览模式
  • 退出预览模式
• 调试gtag.js
• Tag Assistant Chrome扩展程序的增强功能
• If Google跟踪代码管理器 Console is not working
• 更多提示
• Google跟踪代码管理器 Console: Final Words

 

影片教学

如果你 prefer video content, I have recorded and published a tutorial on my Youtube Channel. 怎么样ever, if you are looking for a deeper dive into the topic, you should also 读这个 blog post.

 

What Is Google跟踪代码管理器 Console?

Google跟踪代码管理器控制台（也称为“预览和调试”模式）可让您浏览实施了GTM容器代码的网站，并预览触发哪些代码，将哪些数据发送到分析/营销平台等。

在Google跟踪代码管理器界面中启用预览控制台时，最终将显示三个浏览器标签（或两个标签和一个附加窗口）：

• A tab with your Google跟踪代码管理器 interface
  
  一种 。
• 的新标签 tagassistant.google.com 实际的预览控制台在哪里显示
  
  一种 。
• 您可以在其中看到网站和预览模式的新标签页（或窗口）’屏幕右下角的s徽章。
  

为什么根本需要预览模式？因为没有什么比盲目地使用GTM并尝试猜测您的设置是否有效更糟糕了。

Google跟踪代码管理器’的预览控制台可让您：

• 查看哪些标记已针对特定的网站互动触发（例如，点击链接或提交表单）
• 哪些代码没有触发
• 某些代码被触发或未触发的原因’t fire
• 页面上提供哪些类型的变量（及其值）
• 怎么样 资料层发生各种交互作用时，页面上的内容正在发生变化，等等。

就个人而言，在修改GTM设置时，我通常永远不会相信自己的直觉。我总是测试他们，即使是未成年人。因为它’最糟糕的发现（几天（或几周）后），您最近的更改破坏了分析设置。

经常测试。然后实时发布您的更改。

现在，让’我们来看一下Google跟踪代码管理器控制台的工作方式以及如何使用它。

 

Enable Google跟踪代码管理器 console

要启用Google跟踪代码管理器的调试模式，请点击 预习 GTM界面右上角的按钮（附近 提交 按钮）。

如果您偶然发现了较旧的GTM教程（于2020年10月16日之前发布），则它们会告诉您，在GTM界面中（启用GTM控制台时）必须显示橙色横幅。那不再是真的。从2020年10月16日起，橙色横幅消失了。

单击“预览”按钮后，将打开一个新的浏览器选项卡，其中包含 tagassistant.google.com。如果没有， 阅读本指南.

弹出窗口将要求您输入要测试和调试的URL。它可能是主页的地址，也可能是特定页面’s URL，然后按 开始.

应出现一个新的浏览器选项卡（或窗口），您将在其中看到您在上一个弹出窗口中输入的URL。如果该页面不起作用，请尝试再次启用预览控制台，然后在预览中禁用此复选框’s popup:

在该页面/标签的底部，您必须看到以下标志：

如果你回到 tagassistant.google.com 标签，您必须看到此成功消息。

如果你 don’看不到成功消息，或者如果预览标志显示调试器未连接， 读这个.

 

The layout of the Google跟踪代码管理器 Console

Google跟踪代码管理器控制台包含六个主要部分：

1. 活动时间表。显示数据层中发生的所有事件（例如页面浏览，表单提交，点击等）。一个项目=一个事件（也称为dataLayer.push）。不要将它们误认为是Google Analytics（分析）事件。这些完全是两个不同的概念，我已经讨论过了 在另一篇博客文章中.
2. 标签. Displays which tags fired on the selected 数据层 事件 and which ones didn’t.
3. 变数显示有关所选事件中变量的详细信息，包括变量的类型，返回的数据的类型以及解析的值。
4. 资料层显示针对所选事件被推送到数据层的确切消息对象以及消息事务完成后数据层的外观。此处所有可用的数据点都可以转换为变量（然后将出现在 变数 标签）。继续阅读以了解更多信息。
5. 失误。如果在选项卡中注意到任何数字（而不是0），请单击它，然后查看原因。
6. 标头。 在这里，您可以查看GTM控制台的状态（是否已连接到新打开的网站窗口）。另外，如果您通过gtag.js实现了通用Google Analytics（分析），或者您在网站上运行Google Analytics（分析）4，则会看到一个下拉菜单，用于在

 

活动时间表

All 事件s that occur in the 数据层Â显示在Google跟踪代码管理器控制台的事件时间线的左侧。每次加载页面时，列表中必须显示三个事件–集装箱装载（以前称为 页面预览）， DOM准备就绪和 视窗已载入.

如果你 see more 事件s (for example, 信息），’s fine. But it’s important that all three aforementioned 事件s appear on the list of every page.

如果你’re missing the 集装箱装载 事件，那里’可能是数据层损坏的情况。我已经发布了一个博客文章，其中解释了问题和解决方案 集装箱装载 事件 does not appear in GTM console.

另外，当您从网站上的一个页面导航到另一页面（您正在调试）时，控制台中的所有事件都将基于这些页面进行分组。

 

Why are there always three 事件s on every page?

他们的意思是什么？

集装箱装载 （又名 gtm.js）是GTM开始加载的最早时间，并且我们的跟踪脚本可以被触发。例如，’s何时触发Google Analytics（分析）页面视图跟踪标记。即使页面避风港’完成加载后，您的跟踪脚本将已经启动。以前，此事件称为 页面预览.

DOM准备就绪 事件 （又名 gtm.dom）发生在网站上’的HTML已下载，页面’呈现了文档，访问者开始看到您网站的元素。 学到更多.

Window Loaded 事件 （又名 gtm.load）仅在其他所有内容（包括Javascript）完成加载后才触发。 学到更多.

还有哪些其他可能的Google跟踪代码管理器事件？

Actually, the list of 事件s is endless.

Google跟踪代码管理器提供了内置触发器的列表，例如 页面预览 （包括上述 页面视图，DOM准备就绪且窗口已加载）， 点击 (链接点击 和 点击任何元素）， 表格提交, 计时器, 历史变化, JavaScript错误.

启用触发器后，它将开始在您的网站上查找特定的交互。例如， 表格提交 触发器正在寻找表单提交， 链接点击当访客单击任何链接时，触发器正在等待交互。

When the desired interaction occurs, that 事件 appears in the 活动时间表.

So why did I say that the list of GTM 事件s is endless? It’s是因为最后一种触发方式称为 自定义

A custom 事件 is an 事件 defined by you, your developer or a 3rd party solution that is implemented on your website.

如果你 want to learn more about custom 事件 tracking, take a look at the video below (but keep in mind that in this video, I was using the older version of the preview mode):

When you 点击 any 事件 in the timeline, you can see which tags fired and which ones didn’t. That’s where 标签 标签变得非常重要。

 

标签

此选项卡显示所有可用的标签，分为两组：在选定事件上触发的标签和未触发的标签。使此部分很棒的原因是能够找出特定标签执行或未执行的确切原因。’t fire.

Choose any 事件 in the 活动时间表 (1) and then 点击 the tag you’对（2）感兴趣。

你什么’将会看到该标签发生了什么的更详细的视图：

1. 标签的属性。
2. 标签的触发器。
3. 阻止触发器。

如果你’在几个条件下使用更复杂的触发器，您可以看到每个条件的状态（请看下面的屏幕截图）。绿色复选框表示已满足条件，否则，将出现红色X。

另外，在Google跟踪代码管理器控制台的右上角（尽管您仍单击了该代码，但可以在“Names” and “Values”。这将影响变量在标签中的显示方式。

如果你 choose 名字，您将看到他们的真实姓名，但是如果您想在特定时刻查看他们的值，请切换到 价值观.

对我来说，切换到“Values”更加方便，它使我能够快速确定向我的分析/营销工具发送了哪些价值。

另外，您可以快速验证触发器中的值是否符合您的要求。

很重要： 请勿在调试过程中调试各个标签 概要 在事件时间轴上方选择。这是不正确的方法。始终，请首先在事件流中选择事件，然后才单击标记进行调试。

 

变数

好，让’s head over to the 变数 标签。它显示有关变量的详细信息 in the selected 事件，包括变量的类型，返回的数据的类型以及解析的值。

这些变量随时为您服务。您可以 将它们插入任何标签中，然后触发 （甚至其他变量）， 无论’的Google Analytics（分析）事件标签，Mixpanel事件标签或其他任何内容。可以使用大括号{{}}将变量括起来来包含变量。看下面的例子。

Switch between GTM 事件s (in the timeline) and you’我将看到变量的值如何根据上下文而变化。

 

资料层

资料层 标签是初学者（而且经常是新手，也经常是GTM控制台中最被低估的部分）。

该选项卡显示了确切的消息对象 推送到数据层 for the selected 事件, and what the 数据层 looks like after the message transaction is complete.

换句话说，您可以查看数据层中当前可用的所有数据，以及每次Google跟踪代码管理器事件后可用的值。最好的部分是：每个数据点（推送到数据层）都可以在Google跟踪代码管理器中转换为变量。

即使您在“数据层”标签中看到了一些有用的信息，也不能在GTM中使用它们，除非为其创建变量。

（Google跟踪代码管理器调试窗格的）变量标签仅显示在Google跟踪代码管理器界面中配置的那些变量，例如页面路径，页面URL等。因此，如果您在数据层中有一些有趣的东西，’d想传递给Google Analytics（分析），您’ll need to create a 数据层变量在GTM界面中。

假设您要在有人发表评论时发送Google Analytics（分析）事件。对于每个事件，您还想推动文章作者’的全名。这样你’将看到哪些作者推动了读者的最高参与度。

在Google跟踪代码管理器帐户中，您应转到变量并使用以下设置创建一个新变量（dlv 代表 数据层变量）：

在你之后 刷新P&D模式和浏览器窗口中的网站你应该在 变量 标签，并加载每个新页面。以后，您可以添加该{{dlv–Google Analytics（分析）（或任何其他）标签中的Post Author}}变量。

在我的另一篇博客文章中， 如何使用Google跟踪代码管理器跟踪AJAX表单，我已经解释了如何深入研究数据层，提取嵌套值并将其转换为GTM变量。这项简单的技术已经有用了很多次了，我几乎无法想象没有它的工作方式。

 

错误标签

我不’t经常访问此标签（因为实际上没有太多标签会引发显示在此处的错误）。但是，如果您在标签中注意到任何数字（而不是0），请单击它，然后查看原因。如果由于错误而无法启动GTM代码模板，则会显示此标签。 这是关于它的快速指南.

 

Refresh Google跟踪代码管理器 Console

当前的流程不是很方便，但是将来会由GTM小组解决。

如果你 make some changes in the container and you want to preview them on the website, you must refresh the GTM preview console. Just reloading the website will not help.

为此，您必须转到Google跟踪代码管理器界面，然后按 预览版 再来一次。然后完成这些步骤，控制台将重新加载。

是的，这不是很方便，但是希望这会由GTM小组尽快解决。

Exit Google跟踪代码管理器 console

如果你 want to exit the GTM console, the best way is to 点击 the X icon in the 预习 mode’的徽章（显示在网站的右下角）。

如果这样做没有帮助，并且您继续在网站的每次浏览量中看到该徽章， 阅读本指南.

 

调试gtag.js

如果您的网站上运行了GTAG（较新的Google Analytics（分析）/ Google Ads跟踪代码）（或者您已经实施了Google Analytics（分析）4），则您还可以使用新的Google跟踪代码管理器控制台查看匹配（因为它们已发送）与 gtag（） 命令）。

在特定域上启用预览控制台后，您可以在下拉菜单（位于左上角）中切换到某些GTAG ID。

另外，如果您正在使用区域（’的GTM360功能），您也可以在那里找到区域容器。

如果你 switch to debugging GTAG, you might see different content of the 事件 timeline, also, some of the tabs will be gone (like 标签 and 变数). Instead you will see hits that were sent and, 资料层, and 失误.

随时单击这些命中，并查看通过gtag.js请求发送了哪些参数。

 

Tag Assistant Chrome扩展程序的增强功能

如果你 want, you can improve the Google跟踪代码管理器 console by installing a browser extension called Google Tag Assistant。如果您讨厌在新窗口中打开网站（在调试过程中）（至少在Google Chrome上会发生这种情况），则此功能特别有用。

安装扩展程序后，启用预览控制台后，您的网站将在新标签页（而不是窗口）中打开。这意味着您可以再次使用移动调试之类的功能。

另外，您将能够同时调试多个选项卡。

此外，您会注意到一些形状/表情符号出现在事件时间轴和“预览”模式下’的徽章（在您的网站上）。添加这些是为了帮助您快速区分当前正在调试的窗口。

在我的视频中（在本教程的开头），我还显示了您可以在“页面标题”中看到这些形状/表情符号。不幸的是，由于用户的多次投诉，该功能在启动后很快被删除（此功能污染了包含“页面标题”的报告）。

此外，Tag Assistant还可以帮助您调试iframe。我稍后会发布更多有关此的信息。

 

If Google跟踪代码管理器 Console is not working

如果你 are struggling with the Google跟踪代码管理器 console (e.g. it is not displayed), 阅读本故障排除指南。我会尽可能保持此博客文章的更新。

 

更多提示

以下是一些不适合本博客文章上一章的快速提示：

• 如果你 see the “Message”GTM控制台中的页面查看事件之前的事件’s事件时间表，请放心。这意味着您的开发人员，插件或特定的第三方解决方案将一些数据推送到了数据层中，但是 dataLayer.push 不包含“event”键。使用GTM调试模式探索当时推送了哪些确切数据，也许您’会发现有用的东西！
• 尽管Google跟踪代码管理器的调试模式是代码部署的重要组成部分，但它’不是您应该使用的唯一工具。这是一个清单 Google跟踪代码管理器 Chrome extensions 这将使您的工作更加轻松。
• 如果你’重新调试Google Analytics（分析）事件，请始终在GA实时报告中对其进行检查。它’最好的方式来验证错误并对错误做出反应，没有任何延迟。
• 一大堆其他 GTM调试技巧可在此处获得.

 

Google跟踪代码管理器 Console: Final Words

Google跟踪代码管理器控制台（也称为Google跟踪代码管理器调试模式，或仅 预览和调试模式）是标签部署的重要组成部分，可帮助我们确保测试所有可能的用户体验方案并验证数据一致性。

它为我们带来了更多的透明度’发生在幕后，正在获取或推送什么数据，为什么没有特定标签’t firing, etc.

但是了解这一点非常重要 这不是您应该检查/测试标签管理实现的唯一地方。有 您需要记住的更多事情.

我是否想念任何与Google跟踪代码管理器调试模式有关的内容？如果是，请在下面给我留言。