Google 标签管理器入门

Avatar of David Attard
David Attard

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

以下是 David Attard 的客座文章。我最近才意识到 Google 标签管理器是一个东西,但我不确定它是什么,它做什么,或者为什么我可能想要使用它。谢天谢地,David 站出来解释了它,所以我们现在都可以理解它。交给你了,David!

您是否曾经在营销团队要求您在公司网站上更改 Google Analytics 或其他脚本的“紧急”请求的接收端?这些更改中又有多少次您需要在整个活动期间更改和重做脚本?

我们有一个解决方案供您使用。您紧急的更改请求即将结束。

请举手,所有曾经遇到过以下情况的人

我们即将开始一项营销活动,我们真的需要在我们的网站上使用这个新的、不同的 Google Analytics 脚本。它与公司使用的脚本不同,这样我们就可以自己跟踪网站的特定部分。

或者类似于

我们刚刚开发了一套新的登录页面,这些页面需要一个自定义脚本,以及一个 KissMetrics 脚本,并且在某些页面上我们还想添加 CrazyEgg。

甚至

我知道我们要求您添加此脚本,但我们现在处于活动中期,我们需要在营销预算用完之前紧急优化此脚本。

如果您与大多数与数字营销团队合作的 Web 开发人员一样,以上情况或类似情况可能听起来很熟悉。 Google 标签管理器 是为 Web 开发人员和营销团队创建工作系统的解决方案。用开发人员的话来说,Google 标签管理器是一个脚本,它通过友好的界面处理将其他脚本注入您的网站。

我们将展示 Google 标签管理器如何提高网站开发人员和在线营销团队的效率。

为什么需要 Google 标签管理器?

任何拥有独立营销团队的公司都知道数字营销对其成功的关键作用。调整、监控、改进、分析营销活动工具的供应并不缺乏。随着营销团队对行业中出现的保持领先地位的新工具做出反应,您将在网站上获得越来越多的变化。需要向网站添加各种脚本以整合新工具。

大多数开发变更都需要经过审批流程。您可能需要进行各种审批才能从开发过渡到暂存、再到预生产测试。这是我们可以在生产环境中使用之前。随着公司规模的扩大,所有这些活动部件往往变得越来越重,完成的时间也越来越长。但在一个快速敏捷的世界中,事情不应该需要几天才能完成。

此外,开发人员有比更新营销脚本更重要的事情要做。

Google 标签管理器允许用户通过 UI 定义和决定哪些脚本(“标签”)显示以及在什么情况下显示。这减轻了上述许多压力,因为

  1. 营销团队可以完全控制在不同条件下包含哪些标签。
  2. 开发团队无需创建自定义代码、条件、不同版本的标签来处理营销团队所需的所有不同情况。

听起来是个坏主意

允许营销团队修改您精心编码的网站可能听起来是一个非常糟糕的主意。您一定会相信这会对您的网站造成各种破坏。

损坏的脚本势必会破坏功能。我不想让任何非开发团队成员接近我们的代码。

或者我听到你说

如果他们“不小心”更改了什么,需要恢复到旧代码怎么办?我必须一遍又一遍地这样做,直到他们把它弄对为止。

那么网站的性能呢?添加太多标签会降低网站的性能,最终会让开发团队来修复。

这些都是有效的反对意见。但是,Google 标签管理器已经解决了这些问题。我们将在下面解决它们。

Google 标签管理器的工作原理

作为开发人员,您至少需要做的是注册 Google 标签管理器并将 GTM 脚本添加到您希望允许添加脚本的网站页面。我的建议是将 GTM 用作您的单一参考点。

首先,您创建一个容器。这就是包含所有标签的地方。容器可以用于网站、iOS 应用或 Android 应用。为简单起见,我们将示例限制在网站上。

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

添加此标签后,您现在可以开始将标签添加到网站。

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

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

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

配置完标签后,您将能够指定标签将在哪些情况下触发(“触发”,就像包含/使用一样)。您可以根据不同的条件或网站的不同部分触发不同的标签。例如,您可以为网站的公司页面设置一个特定标签,为销售登录页面设置不同的标签,为文档和支持页面设置不同的标签。这些甚至可以由公司内部的不同团队来处理。

您是否已经开始领会使用 Google 标签管理器的优势了?

即使您作为开发人员来处理脚本的添加,您也会意识到,您不必执行在不同情况下触发标签所需的服务器端编码。这完全可以通过 GTM 界面完成。

标签可以触发的条件数量足以处理团队可能要求的各种复杂场景。现在让我们保持简单,并在“所有页面”中触发 Google Analytics 标签。

我们现在可以将标签推送到网站了吧?您可以,但您可能首先选择设置一些安全措施。

除了直接发布之外,Google 标签管理器还允许您

  1. **预览和调试** - 这会检查标签和脚本,以验证脚本是否没有错误。
  2. **创建版本** - 由于脚本容易进行多次迭代,其中一些可能需要恢复,因此您可以创建当前标签的版本。这样,如果出现任何问题,您可以恢复到以前的工作版本。这可以避免很多头疼,网站崩溃、管理员恐慌以及许多人感到沮丧。
在这里,我们使用了一个错误的标签来向您展示 GTM 如何在检测到脚本中的错误时阻止您。

还有一个预览功能,允许您预览当前标签集在您当前网站上的样子。通过从您执行 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 有着明显的优势。

我们已经看到,当引入新标签时,用户很难“破坏”网站的功能。预览和调试功能将在这些问题投入使用之前突出显示任何潜在问题。即使问题脚本投入使用,也很容易恢复到以前的版本。

虽然性能可能是一个潜在的问题,但我们确实认为,如果数字团队得到开发人员的协助,就可以使用触发器来确保仅在必要时才会受到性能影响。毕竟,有些脚本是必要的!