在上一篇文章中,我们讲解了许多关于 Google Tag Manager(GTM) 的内容。在那篇文章里,我们介绍了如何将 GTM 与你的网站连接、为什么要使用 GTM,以及你可以从它的功能中获得哪些好处。
此外,我们还解释了 Data Layer(数据层) 的概念,并介绍了数据层与网站之间的数据流动方式、数据层的工作机制等。如果你还不了解这些内容,可以先阅读我们之前的文章。
在今天这篇文章中,我们将更深入地讲解 GTM 的工作原理。你可能会产生这样一个问题:为什么只需要在网站中添加一小段简单的 GTM 代码,就能够如此轻松地追踪各种数据呢?另外,我们也会介绍 GTM 的触发器(Triggers)和变量(Variables).
Google Tag Manager 的工作机制

在这里,你可以看到 Google Tag Manager 提供的代码。如果我们将这一段代码添加到网站中,就可以非常轻松地追踪网站上的各种数据。
但是你知道吗?当我们把这段代码添加到网站后,后台实际上发生了什么?当我们把这段代码添加到网站的 header(头部) 部分时,Google 会从它的服务器下载额外的代码,以确保所有功能都能正常运行。
不过,在向你的网站加载这些新代码之前,Google 的服务器会先通过一个链接接收到一次请求。


在预览模式中输入你的网站后,你可以通过 检查页面(Inspect) 并在 Network(网络) 部分查找 “gtm.js” 来确认结果。你只需要搜索 “gtm.js” 即可。
在这一步中,你会注意到我们首先进行了搜索,然后从搜索结果中选择第一个。
选择第一个搜索结果后,你可以在网站的后台看到一个由 Google Tag Manager 自动运行的请求 URL。

如果你想查看这个请求 URL 的响应,可以点击 “Response(响应)” 选项。在这里,你可以看到 Google 执行的完整代码,只需向下滚动即可查看全部代码内容。
这意味着,你添加的那段代码并不是 Google Tag Manager 进行数据追踪的全部原因。实际上,每次加载你的网站时,Google Tag Manager 首先会在网站后台运行一个请求 URL。
随后,根据这个请求,Google 会返回一个包含大量代码的响应。这些代码会帮助你以非常高效的方式继续进行数据追踪。

如果你想以更方便的方式查看完整代码,只需在浏览器中打开这个链接即可。

触发器
在我们之前的文章中已经解释过,触发器(Trigger) 是一种设置,通过它我们可以在触发器部分告诉 GTM 何时执行相应的任务。
那么今天,我们将逐一详细介绍所有的触发器类型。
页面浏览

点击


在这里你可以看到这个界面。现在,我们可以使用 点击(Click) 功能。每当有人点击 “SHOP NOW” 按钮时,相应的事件就会被触发。
同时,我们也可以根据 点击的 class(类名) 来设置触发器。在接下来的内容中,我们会对所有这些设置进行更深入的讲解。

Element Visibility(元素可见性): 如果你希望在某个元素出现在页面上时触发事件,可以使用这种方法。
Form Submission(表单提交): 如果你想追踪与表单相关的事件,可以使用这个触发器。不过需要注意的是,它只适用于部分表单。
Scroll Depth(滚动深度): 如果你想追踪用户在页面上的滚动情况,比如有多少用户滚动到页面的 50% 或 100%,那么可以使用这种方法向 GTM 发送指令。
YouTube Video(YouTube 视频): 如果你的网站中嵌入了 YouTube 视频,并且想追踪有多少用户开始观看视频以及其他相关行为,也可以使用这种方法来实现。


如果你希望在这种特定的目标事件发生时让 GTM 执行相应的指令,那么你可以使用 “Custom Event(自定义事件)” 方法。
History Changes(历史记录变化): 我们会处理很多不同类型的网站。在一些网站上,当页面发生变化时,它们只是更新内容,而不会重新加载新的页面。对于这种类型的网站,如果你想创建相关的触发指令,可以使用这种方法。
JavaScript Error(JavaScript 错误): 如果你的目标是为某些特定的 JavaScript 错误 创建标签(Tag)进行追踪,那么可以使用这种方法。
Timer(计时器): 如果你想了解有多少用户在你的目标页面上停留了一段时间,可以使用这种方法。
Trigger Group(触发器组): 如果你想创建一个 触发器组合,可以使用这种方法。
我们已经介绍了所有 触发器类型。在未来的文章中,我们会更详细地讲解它们的具体使用方法。
变量
在我们之前的文章中已经解释过,变量(Variable) 就像一个用来存放数据的容器。
这意味着,如果 GTM 需要获取我们存储在某个特定位置的数据,那么这个特定的位置就被称为 变量。借助变量,我们可以根据需要收集各种不同类型的数据,并将这些数据发送到不同的平台。
在实际使用过程中,我们会遇到两种类型的变量:
-
内置变量(Built-in Variables)
-
用户自定义变量(User-defined Variables)
内置变量

这种类型的变量是由 Google Tag Manager 为你自动创建的。你只需要先启用它们,然后选择哪些变量适合你的需求即可。
例如,如果你选择 “Click Text(点击文本)” 和 “Classes(类名)”,那么当用户在你的网站上点击任何按钮时,GTM 就会收集相应的点击文本和类名数据。随后,你就可以利用这些数据来完成你的相关设置或分析工作。
用户自定义变量
并不是所有类型的数据都可以通过 内置变量(Built-in Variables) 来收集。这就是为什么 Google Tag Manager 还提供了 用户自定义变量(User-defined Variables)。
在这里,你可以根据需要创建新的变量。举个例子,如果你想从 数据层(Data Layer) 中收集某个产品的价格,那么你就可以使用这种变量类型来实现。

如果你想从网站上 动态收集数据,那么可以使用 “Custom JavaScript(自定义 JavaScript)”。
同样,在 用户自定义变量(User-defined Variables) 部分,你会看到多种不同类型的变量。目前,你只需要重点理解两种变量类型:“Custom JavaScript(自定义 JavaScript)” 和 “Data Layer Variable(数据层变量)”。
至于其他类型的变量,我们将在接下来的文章中介绍它们的使用场景,届时你会对它们有更清晰的了解。