以下是 David Attard 的客座文章。我最近才意识到 Google 标签管理器是一个东西,但我不确定它是什么,它做什么,或者为什么我可能想要使用它。谢天谢地,David 站出来解释了它,所以我们现在都可以理解它。交给你了,David!
您是否曾经在营销团队要求您在公司网站上更改 Google Analytics 或其他脚本的“紧急”请求的接收端?这些更改中又有多少次您需要在整个活动期间更改和重做脚本?
我们有一个解决方案供您使用。您紧急的更改请求即将结束。
请举手,所有曾经遇到过以下情况的人
我们即将开始一项营销活动,我们真的需要在我们的网站上使用这个新的、不同的 Google Analytics 脚本。它与公司使用的脚本不同,这样我们就可以自己跟踪网站的特定部分。
或者类似于
我们刚刚开发了一套新的登录页面,这些页面需要一个自定义脚本,以及一个 KissMetrics 脚本,并且在某些页面上我们还想添加 CrazyEgg。
甚至
我知道我们要求您添加此脚本,但我们现在处于活动中期,我们需要在营销预算用完之前紧急优化此脚本。
如果您与大多数与数字营销团队合作的 Web 开发人员一样,以上情况或类似情况可能听起来很熟悉。 Google 标签管理器 是为 Web 开发人员和营销团队创建工作系统的解决方案。用开发人员的话来说,Google 标签管理器是一个脚本,它通过友好的界面处理将其他脚本注入您的网站。
我们将展示 Google 标签管理器如何提高网站开发人员和在线营销团队的效率。
为什么需要 Google 标签管理器?
任何拥有独立营销团队的公司都知道数字营销对其成功的关键作用。调整、监控、改进、分析营销活动工具的供应并不缺乏。随着营销团队对行业中出现的保持领先地位的新工具做出反应,您将在网站上获得越来越多的变化。需要向网站添加各种脚本以整合新工具。
大多数开发变更都需要经过审批流程。您可能需要进行各种审批才能从开发过渡到暂存、再到预生产测试。这是我们可以在生产环境中使用之前。随着公司规模的扩大,所有这些活动部件往往变得越来越重,完成的时间也越来越长。但在一个快速敏捷的世界中,事情不应该需要几天才能完成。
此外,开发人员有比更新营销脚本更重要的事情要做。
Google 标签管理器允许用户通过 UI 定义和决定哪些脚本(“标签”)显示以及在什么情况下显示。这减轻了上述许多压力,因为
- 营销团队可以完全控制在不同条件下包含哪些标签。
- 开发团队无需创建自定义代码、条件、不同版本的标签来处理营销团队所需的所有不同情况。
听起来是个坏主意
允许营销团队修改您精心编码的网站可能听起来是一个非常糟糕的主意。您一定会相信这会对您的网站造成各种破坏。
损坏的脚本势必会破坏功能。我不想让任何非开发团队成员接近我们的代码。
或者我听到你说
如果他们“不小心”更改了什么,需要恢复到旧代码怎么办?我必须一遍又一遍地这样做,直到他们把它弄对为止。
那么网站的性能呢?添加太多标签会降低网站的性能,最终会让开发团队来修复。
这些都是有效的反对意见。但是,Google 标签管理器已经解决了这些问题。我们将在下面解决它们。
Google 标签管理器的工作原理
作为开发人员,您至少需要做的是注册 Google 标签管理器并将 GTM 脚本添加到您希望允许添加脚本的网站页面。我的建议是将 GTM 用作您的单一参考点。
首先,您创建一个容器。这就是包含所有标签的地方。容器可以用于网站、iOS 应用或 Android 应用。为简单起见,我们将示例限制在网站上。

创建容器后,您将获得一个需要添加到网站的脚本。这是您唯一需要添加的脚本。其余的“标签”将通过此标签添加到网站。

添加此标签后,您现在可以开始将标签添加到网站。
您可以通过 GTM 界面添加大约 20 个内置标签。如果您想添加的产品或服务未包含在内,您可以添加任何自定义标签。让我们尝试将 Google Analytics 作为我们的第一个标签。

不同服务的内置标签允许根据特定服务的需要进行自定义。

如果我们添加了不同的标签,您将看到不同的自定义选项集。任何可以在本机脚本中自定义的内容都可以在 Google 标签管理器中完成。以下是如何添加 Google Adwords 标签的示例。

配置完标签后,您将能够指定标签将在哪些情况下触发(“触发”,就像包含/使用一样)。您可以根据不同的条件或网站的不同部分触发不同的标签。例如,您可以为网站的公司页面设置一个特定标签,为销售登录页面设置不同的标签,为文档和支持页面设置不同的标签。这些甚至可以由公司内部的不同团队来处理。
您是否已经开始领会使用 Google 标签管理器的优势了?
即使您作为开发人员来处理脚本的添加,您也会意识到,您不必执行在不同情况下触发标签所需的服务器端编码。这完全可以通过 GTM 界面完成。

标签可以触发的条件数量足以处理团队可能要求的各种复杂场景。现在让我们保持简单,并在“所有页面”中触发 Google Analytics 标签。
我们现在可以将标签推送到网站了吧?您可以,但您可能首先选择设置一些安全措施。
除了直接发布之外,Google 标签管理器还允许您
- **预览和调试** - 这会检查标签和脚本,以验证脚本是否没有错误。
- **创建版本** - 由于脚本容易进行多次迭代,其中一些可能需要恢复,因此您可以创建当前标签的版本。这样,如果出现任何问题,您可以恢复到以前的工作版本。这可以避免很多头疼,网站崩溃、管理员恐慌以及许多人感到沮丧。

还有一个预览功能,允许您预览当前标签集在您当前网站上的样子。通过从您执行 Google 标签管理器更改的同一个浏览器访问将部署标签的网站,您将看到已部署脚本的外观预览。

共享预览还允许您发送一个 URL,该 URL 实际上将包含相同的预览,以便您可以与同行共享以供审批。

对更改满意后,您可以将新标签发布到实时网站。

就是这样!您的第一个标签现在将被推送到您的容器(在本例中为网站)。
Google 标签管理器的进阶用法
与每次直接修改代码相比,使用这种方法的优势应该从上面的示例中显而易见。
但让我们深入探讨一下。
在创建上面的示例时,我们简单地展示了您可以使用触发器来决定何时应该触发脚本或不触发脚本。我们的一些脚本可能需要在每个页面上显示,但可能并非所有脚本都需要。将所有脚本都放到每个页面上可能会导致性能问题。
简短说明:我们已经看到了一些大小高达 500KB 的脚本示例,这是压倒性的。我们不会说出你的名字,即使你是一家大公司,应该知道得更好。如果您从事创建脚本的行业,如果您让它们保持精简,您将为所有人提供帮助。提示:不要在脚本中包含所有功能,无论我是否启用了它。
使用触发器来触发脚本
假设您想要触发一个特定事件,包含一个追踪像素,或者向已完成转化的访问者显示一个客户调查。假设在销售流程结束时,您将客户发送到感谢页。在设置触发器时,我们可以选择触发触发器(以及因此加载脚本)的内容。
让我们创建一个 Google 客户调查,输入我们的网站 ID,然后选择“某些页面”而不是“所有页面”触发器。完成此操作后,我们将看到一个“选择页面”UI,允许我们定义触发器条件。

我们将使用一个正则表达式来匹配感谢页的 URL,但是还有很多其他条件可以使用。请注意,除了正则表达式外,您还可以选择使用 CSS 选择器。查看 Google 标签管理器触发器的完整文档。

如您所见,我们的标签现在只会在显示感谢页时才会填充。您可以比页面更具体。以下是您可以使用的触发器可能性
- 点击 – 允许您在用户点击页面上的链接或元素时触发一个标签
- 表单提交 – 当您的访问者选择提交表单时,这将触发标签
- 历史记录更改 – 当 URL 更改时,或者当您需要跟踪虚拟页面浏览量(例如在 Ajax 应用程序中触发标签时)
- JavaScript 错误 – 如果抛出未捕获的 JavaScript 错误,则会触发此错误
- 计时器 – 允许您根据特定时间间隔发送事件以实现所需的频率
- 自定义事件 – 您可以使用 GTM 数据层以编程方式引发事件
使用 Google 标签管理器变量
与任何宣传自身灵活性和可定制性的服务一样,GTM 支持使用变量。按照正常的代码变量,这只是一个在运行时填充或定义的值。
在标签中,您可以使用变量来定义诸如事务代码之类的东西。从所购买产品的 ID 到用户名、电子邮件或其他用户数据,任何东西都可以。我们将举一个关于如何在实际场景中使用事务数据作为变量的简短示例。
变量也可以用在触发器中,例如定义触发页面浏览量触发器事件的页面 URL。假设我们试图通过为那些花费超过 100 美元的人提供促销优惠来提高销量。对于已经花费 100 美元的客户,他们下一笔订单的运费将免费。
我们的计划是专门针对我们已知已经花费 100 美元的客户触发 Adwords 重新营销活动。我们只会在购物车的事务价值超过 100 美元时触发重新营销代码。我们可以定义一个 GTM 变量,该变量从包含页面上存在的值的 JavaScript 变量中读取事务金额。
页面加载时,GTM 变量将评估并执行。它只会在事务金额大于 100 美元时匹配触发器,并在此时注入您的重新营销标签。
这只是可以创造性地使用变量和触发器的一个场景。我们会让您将这种思维应用到您公司的需求中。
最后的想法
在这篇文章中,我们试图重点介绍 Google 标签管理器的许多用途。在我看来,使用 GTM 有着明显的优势。
我们已经看到,当引入新标签时,用户很难“破坏”网站的功能。预览和调试功能将在这些问题投入使用之前突出显示任何潜在问题。即使问题脚本投入使用,也很容易恢复到以前的版本。
虽然性能可能是一个潜在的问题,但我们确实认为,如果数字团队得到开发人员的协助,就可以使用触发器来确保仅在必要时才会受到性能影响。毕竟,有些脚本是必要的!
最近刚试用了一下。在开始使用之前,有一些需要注意的地方
您必须重新执行所有事件跟踪。如果您有一堆带有
ga('send', 'event', 'category', 'action', 'label')
的点击处理程序,您将不得不重新在 GTM 中实现它们。Google 内容实验,也称为 Google Analytics 内置 A/B 测试,不适用于 GTM。
有没有人在这方面有更好的体验?
您可以使用这些 Google Analytics 的高级功能,您只需要更新您的 GA 以使用 Universal Analytics。完成此操作后,使用数据层设置事件就容易多了。
所以这就是 Google 标签管理器。我的公司使用类似的东西,称为 UberTags。
我最近才听说过 GTM,想深入研究一下。这篇文章来得正是时候,并给出了一个很好的解释。谢谢!
嘿 Vinay,很高兴您发现这篇文章有用,而且时机很好!
我每天都使用 GTM,我发现它越来越多的问题。
内置触发器适用于使用链接、表单和所有那些“不花哨的预 HTML5”内容的“经典”网站,正如营销人员喜欢称之为的那样,但不适用于单页应用程序等。
迄今为止,我遇到的所有由非开发人员精心策划的容器都是一团糟
如果您需要比页面浏览量、社交媒体点击等更多的东西,您需要一个开发人员
它会降低页面速度
GTM 网页应用程序,尤其是预览模式,是我不做 Angular 的主要原因;如果容器有很多标签(>= 75),UI 非常迟缓,而这在很多情况下令人惊讶地很常见
它缺少合理的版本控制,这使得协作和/或同时处理多件事变得非常痛苦
但是,如果您不关心延迟,您的团队中的大多数人没有技术背景,您的容器不会太大,而且您不必同时处理多件事,它是一个很棒的工具。
嘿 Paul,
感谢您的评论。
大多数脚本仍然无法与单页应用程序一起使用。它们是一种全新的范式,大多数东西都需要适应并适应与单页应用程序一起工作。
当然,它不会适合所有人,如果您发现它对您不起作用,那么当然还有很多其他的工作方式:)
我真看不出使用它的好处。似乎我现在使用标准分析、事件跟踪以及设置目标和感谢页来提交表单已经拥有所有我需要的功能。当然它可能具有更多功能,但我真的会使用它吗?
它实际上并不是关于扩展 Google Analytics 的功能,Michael——那真的不是 GTM 的重点。Google Analytics 只是一个可以用来做的事情的例子。
我认为这个概念非常棒。但我只会在我自己的服务器上安装开源版本时才使用它。
使用 Google 服务以这种方式进行跟踪和隐私侵犯问题太多,不胜枚举。此外,这不会打开各种潜在的 XSS 攻击向量吗?
最后,我个人永远不会使用 Google 系统 API,我的网站需要它才能正常工作。我专门设计所有第三方集成以随时替换。(例如,分析、地图、表单等)。而且 Google 在无限期地支持这些系统方面有着糟糕的记录。(我需要列出它们吗?) 而且我看到很多人因为 Google 取消了没有利润的服务而受到伤害。(骗我一次…)
我不喜欢当扫兴的人。我喜欢拥有可以改善客户网站体验的第三方系统,我使用了很多这样的系统。但是 Google 服务自动附带跟踪和数据收集的戏剧,以及短期支持/生命周期的标签。
不过,这是一个很酷的概念,我希望它能被复制,并且将来会出现更多服务/开源选项。
当您了解了标签管理系统后,您真的需要查看 Adobe 的动态标签管理 (DTM) 解决方案。它比 GTM 强大得多。:)
我是 Google 标签管理器的新手。渴望了解更多,我在这里找到了大量且全面的信息。一切都解释得很好,我肯定会很快深入研究。
谢谢!
感谢您的友好评论。
不错的文章。设置 GTM 是我在工作中做过的最好的事情之一。在运行广告系列时,它为我节省了很多时间。
我的营销用例简而言之:公司没有基于 CMS 的网站,因此更改/设置新页面意味着要通过工程,这需要时间。GTM 允许我运行更快、更动态的广告系列。
我基本上要求他们在我的目标网页上设置一个空的 div,并添加一些样式。然后,使用 GTM,我将 URL utm 参数作为变量获取,并对其执行了一个 switch case,根据情况将不同的文本注入该 div 中。现在,例如,如果我创建一个带有 utm_term=retail 的不同广告变体,我可以快速在那里注入一个面向零售的文本,并增加我的信息引起共鸣的可能性。我无需再增加工程师的工作量来进行此类快速测试和更改,这真是太棒了。
我在此处更详细地写了这篇文章
http://clapinton.github.io/2016/04/28/dynamic-page-content-using-google-tag-manager.html
顺便说一句,我在那里引用了这篇文章。希望没有问题。
嗨,埃里克,
非常感谢你分享了实际的例子和用例。这是一个非常有创意的使用 GTM 的方法,可以证明,只要有想象力和黑客精神,你就可以做一些很酷的事情,同时绕过大型公司“官僚主义”所施加的限制。
没关系,你的文章对那些想更详细地查看你的示例的人来说很有帮助,当然,文章的链接也很受欢迎!
大卫
我刚刚在我的 hosts 文件中添加了 0.0.0.0 https://#
当然,没有 http:// 。评论小部件添加了那一部分。
能否详细说明原因?