Google 跟踪代码管理器 - 快速指南

Google 跟踪代码管理器 – 概述

要了解Google Tag Manager，我们首先需要了解一些相关概念。

产品营销 - 背景

随着互联网和网络的出现，非常有必要在推广您的产品时脱颖而出。这个时代已经超越了过去广告和营销通过纸质媒体发挥出色作用的时代。

随着产品营销的要求成为一项有针对性和技巧性的任务，出现了一种被称为“产品营销人员”的新型专业人员。这些人需要了解市场趋势、用户Behave以及受众的喜好。

产品营销人员扮演着分析师和广告商的角色，需要了解很多事情才能掌控全局。其中之一就是——为成功的用户参与创建营销活动。

如果我们遵循维基百科对产品营销的定义——产品营销是向受众推销和销售产品的过程。

简而言之，产品营销人员需要开展各种促销活动才能在竞争中保持领先地位，从而增加销售额。

自互联网热潮以来，为了成功的产品营销，产品不仅需要在现实世界中存在，而且还需要在网络世界中存在。网络世界中的存在和接受程度与产品的成功成正比。

产品营销工具

在寻求增加产品销量并发挥创造力的过程中，产品营销人员需要了解某些有效的工具。事实证明，这些工具本身有助于营销产品并相应地分析用户趋势。

以下是一些常用的产品营销工具 -

  • 谷歌分析
  • 图表节拍
  • 吻计量学
  • 冲刺指标
  • 乌普拉
  • 咔哒声
  • 用户测试
  • 疯狂蛋
  • 鼠标流
  • 薄荷

谷歌显然以其产品——谷歌分析（Google Analytics）位居榜首。谷歌在产品营销演变过程中很早就引入了这种分析工具。事实上，它是产品营销界最可靠、最常用的工具。

该工具具有独特的操作方式，使用用户友好的界面。用户必须将 Google Analytics 帐号添加到其各自的网站/博客页面。因此，Google Analytics 会跟踪用户访问和点击。

使用不同的分析工具

与 Google Analytics 类似，上面列表中提供的每个其他工具都有不同的功能。当谈到使用特定工具时，它要求修改网站/博客代码以便开始跟踪用户的Behave。

这些工具可以分析哪个页面被最常使用、用户执行了哪些活动等。此外，这些工具还可以以数据形式为新推出的功能提供快速反馈。

Google Analytics 的工作方式与大多数其他列出的工具的工作方式非常相似。现在，考虑一个相对较大的产品组织，专注于构建新功能以增强其客户体验。对于如此大规模的组织，拥有庞大的发布流程/管道非常有用，可以以无缝的方式获得所需的功能。

输入谷歌分析。为了使 Google Analytics 发挥作用，要求产品网站代码中的所有页面都应具有此帐号。不管听起来多么简单，对于大型产品组织来说，有时在页面中添加一小段代码可能会很麻烦，并且在创建此功能后需要进行严格的测试。

如果产品组织的目标是使用上面列表中给出的多种数据分析工具，那么请将时间和成本方面的工作量乘以所使用的工具数量。随着产品的成熟，这会变得痛苦。最终，衡量用户Behave也成为必须。在这种情况下，拥有一种一对一的机制非常重要，这样产品营销人员就可以更轻松地即时创建不同的营销活动。

由于不同的工具使用不同的技术来跟踪用户Behave，因此需要采用单一媒介来解释使用不同工具的这些不同技术。

Google 跟踪代码管理器 - 简介

对于产品营销人员来说，使用不同的工具需要不同的学习曲线。使用不同的工具需要输入不同的代码，从而导致网站发生变化。如果有一个简单直接的更改网站代码的过程，那么添加与不同分析工具相关的不同代码就变得很幸福。

Google 标签管理器 (GTM) 是一款免费工具，可以让营销人员轻松添加和更新网站标签。这些标签可以实现网站页面浏览量监控、转化跟踪等。使用 Google 标签管理器，人们可以拥有一种有效的标签管理解决方案，可以快速轻松地更新网站标签。标签基本上是代码片段，用于流量分析和营销优化。

对于从事不同产品分析解决方案的产品营销人员来说，Google 跟踪代码管理器是必备工具，因为它涵盖了产品营销的许多方面。您可以使用 Google 跟踪代码管理器添加和更新 AdWords、Google Analytics、Firebase Analytics、Floodlight 和其他第三方代码。

Google 跟踪代码管理器 - 设置

要设置 Google 跟踪代码管理器，必须拥有一个网站。出于本教程的目的，我们将通过以下过程来设置 Google 跟踪代码管理器。

  • 使用 Blogger.com 设置博客
  • 使用 Google 跟踪代码管理器创建帐户
  • 在博客上安装标签

使用 Blogger.com 创建博客

步骤 1 - 要开始创建博客，请点击此链接 – https://blogger.com。将弹出博客主页，如下图所示。

博主

步骤 2 - 单击按钮 - 创建您的博客开始创建博客。

下一步，Blogger 将询问您的 Google 帐户。Blogger 是 Google 产品之一，通过允许 Google 帐户在线创建博客，让您的生活变得轻松。

步骤 3 - 输入您的 Google 凭据，您将看到以下用于创建博客的屏幕。

创建博客

步骤 4 - 选择您选择的标题、地址和博客主题。

输入标题非常简单，您可以根据需要提供任何标题。有了地址，当您开始输入所需的博客地址时，界面将开始搜索可用性。以下屏幕截图显示了如何搜索博客地址。

博客地址

完成此过程并且博客地址可用后，您将在文本框中看到以下消息。

地址

如上图所示，选择博客地址——https ://gtmtutorial2017.blogspot.com 。

步骤 5 - 选择所需的设计后，单击红色按钮 - 创建博客！

系统将需要几秒钟的时间，您的新博客就会准备就绪。完成后，您将看到以下界面以开始撰写博客。

创建博客

至少需要一篇文章才能看到 Google 跟踪代码管理器有效运行。

步骤 6 - 单击蓝色链接按钮在博客上创建您的第一篇文章 – 创建新文章。

创建帖子

步骤 7 - 您可以开始编写第一篇博客文章的内容。根据需要在屏幕顶部提供帖子标题。

很多时候，Blogger 可以轻松编写 HTML 和富文本内容。这可以通过使用屏幕左上角的“Compose/HTML”切换按钮来实现。让我们以如何使用 Compose 选项为例。

步骤 8 - 单击撰写，将显示富文本编辑器。开始添加一些内容。

步骤 9 - 完成后，单击屏幕右上角的“发布”按钮。

您将被重定向回如上面的屏幕截图所示的屏幕，并且列表中可见新帖子。Blogger.com 中的网站创建到此结束

下一步是创建一个 Google 跟踪代码管理器帐户。然后，我们将容器代码添加到网站中。最后，我们将能够使用 GTM 跟踪页面浏览量/相应事件。

使用 Google 跟踪代码管理器 (GTM) 创建帐户

步骤 1 - 要开始使用 Google 跟踪代码管理器，请使用此链接：Google 跟踪代码管理器。您将看到以下 Google 跟踪代码管理器主页。

GTM

第 2 步- 单击任意链接免费注册。这些链接位于页面的中心和右上角。

步骤 3 - 继续探索该页面，因为它提供了有关 Google 跟踪代码管理器的非常有用的信息。

单击“免费注册”后，您将看到以下屏幕，并且 URL 将更改为 - https://tagmanager.google.com/?hl=en。这将显示在使用您的 Google 帐户登录的屏幕下方。

GTM 注册

输入 Google 凭据后，标签管理器界面就会显示。

步骤 4 - GTM 将要求您添加新帐户。有两个步骤 -

  • 设置账户
  • 设置容器
新增帐户

步骤 5 - 第一步，添加帐户名称。出于本教程的目的，我们将使用名称 - Google 跟踪代码管理器教程。您可以选择与 Google 和其他人匿名共享数据，以增强您的产品营销体验。

步骤 6 - 单击继续。

步骤 7 - 下一步是设置容器。提供容器的名称。让我们将名称添加为 – 标签容器。在“容器使用位置”下（如以下屏幕截图所示），选择“Web”。

步骤 8 - 单击“创建”。

单击“创建”

然后，您将看到一个接受 Google 跟踪代码管理器服务条款协议的屏幕。

步骤 9 - 单击“是”继续。

步骤 10 - 最后，您将看到一组代码片段，如以下屏幕截图所示，这些代码片段将添加到head和body标签下。

单击“是”

需要这些代码片段，以便创建的博客中的数据可以流入 Google 跟踪代码管理器界面。

我们将在后续章节中介绍标签创建和相应的过程。

谷歌标签管理器界面

让我们花一些时间来熟悉 Google 跟踪代码管理器界面上的不同部分。

GTM接口

首先，让我们了解如何管理以下部分 -

  • 工作空间
  • 版本
  • 行政

工作空间

工作区部分显示正在进行的活动工作。本节有不同的子节，例如 -

  • 概述
  • 标签
  • 触发器
  • 变量
  • 文件夹

我们将在后续章节中详细了解这些小节。

版本

对于大型组织来说，创建少量标签并将其用于审核或批准流程是很常见的。

同时，人们可能需要了解网站上以前发布的标签。出于所有这些目的，我们可以使用版本部分。这会显示当前工作区中发布的每个可能的标签，并允许在需要时回滚更改。

版本

行政

如果您希望为不同环境或不同用户配置 Google 跟踪代码管理器帐户，您可以使用此部分。

行政

如果有多个用户与该帐户关联，您还可以配置帐户详细信息并查看与该帐户相关的活动。

Google 跟踪代码管理器 - 入门

本章概述了如何开始使用 Google 跟踪代码管理器、添加标记并分析其完整性。

在完成该过程时，我们将使用博客（在上一章中创建）来演示不同的步骤。

工作空间

步骤 1 - 如上面的屏幕截图所示，单击右上角标签 Workspace Changes: 0 旁边的容器代码 (GTM-XXXXXXX)。

您将看到“安装 Google 跟踪代码管理器”对话框。

安装GTM

现在，我们要在我们的博客上安装 Google 跟踪代码管理器代码。

步骤 2 - 要获取上图中添加到博客上的 GTM 代码，请访问https://Blogger.com并使用您的凭据登录。

您将看到如下所示的屏幕，列表中包含您的博客文章名称。

GTM代码

步骤 3 - 从左侧面板中，找到选项：主题。

您将看到以下屏幕。

选项

步骤 4 - 单击“编辑 HTML”以编辑博客的 HTML 代码。您的博客的 HTML 源代码将可见，如下图所示。

单击编辑 HTML

在这里，我们要安装代码Google Tag Manager。根据 GTM 的指示，我们需要在以下位置插入代码 -

  • <head> 标签尽可能高
  • 在 <body> 标签中

步骤 5 - 在上面的 HTML 代码中找到 <head> 标记。返回https://tagmanager.google.com并复制上述步骤 1 下“安装 Google 跟踪代码管理器”对话框中的代码。将复制的代码准确粘贴到 <head> 标记开头下方。

步骤 6 - 同样，在 HTML 代码中找到 <body> 标记。

注意- 您可以使用快捷键 Ctrl + F 查找 <head> 和 <body> 标签。浏览器搜索功能将派上用场来查找标签。

找到 <body> 标记后，请重复此过程，从 Google 跟踪代码管理器复制与 <body> 标记关联的代码。

为了便于定位标签，<body> 标签通常以 <body expr:class = '"loading" + data:blog.mobileClass'> 开头。

将所需的代码粘贴到 <body> 标记下，然后单击“保存主题”。

它将显示以下错误，看到该错误是正常的。

保存主题

步骤 7 - 要解决此问题，请在 <head> 标签下的 Google 跟踪代码管理器代码中，找到包含以下内容的行：

j = d.createElement(s),dl = l != 'dataLayer'?' &l = '+l:'';j.async = true;j.src =

将上行中下划线的&替换为& 并单击保存主题。错误将会得到解决。

将 Google 跟踪代码管理器代码添加到您的博客的过程到此结束。

标签简介

正如 Google 跟踪代码管理器支持网站上简单介绍的那样，标签是一段将信息发送到第三方（例如 Google Analytics）的代码。

从那里得到线索，对于特定的分析工具，可以有多个关联的标签。将它们全部放在一个页面中确实是一个优点，因为产品营销人员将可以看到与该页面相关的多个指标。

然而，这里有同样重要的一点需要注意，网站上的标签不应该过多。这不仅增加了管理标签时的混乱，而且使得区分来自不同标签的数据变得很麻烦。

正如我们在“安装 Google 跟踪代码管理器”对话框中看到的，以下代码实际上是一个标记。

<!-- Google Tag Manager -->
<script>
   (function(w,d,s,l,i){
      w[l] = w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});
      var f = d.getElementsByTagName(s)[0], j = d.createElement(s),
      dl = l != 'dataLayer'?' &l = '+l:'';
      j.async = true;
      j.src = 'https://www.googletagmanager.com/gtm.js?id='+i+dl;
      f.parentNode.insertBefore(j,f);
   })
   (window,document,'script','dataLayer','GTM-M8QLQCZ');
</script>
<!-- End Google Tag Manager -->

标签的位置

标签的位置可以是页面源代码中的任何位置。它可以像上面的那样位于顶部，也可以位于页脚中传输所需的信息。

标签及其创建方法的快速介绍到此结束。

触发器

触发器实际上检测标签何时被触发。这些是配置要触发的标签的一组规则。例如，触发器可以决定当用户执行“Y”动作时将激发特定标签“X”。更具体地说，当单击特定表单中的特定按钮时，触发器可以指示标签触发。

触发器是可以附加到标签以按所需方式运行的条件。一个现实世界的例子是，考虑为电子商务页面上的成功交易配置标签。

该标签将指示交易是否成功进行。为此，将创建一个触发器，即仅当向用户显示交易确认页面时才触发标签。

更重要的是，考虑您想要跟踪博客/网站的所有页面视图。因此，具体来说，您可以使用 Google Analytics 创建一个标签，当用户访问您的博客/网站上的任何页面时，该标签就会被触发。在这种情况下，触发器将是通用的，表示在所有页面上触发此标记。触发器将被相应地设置。

触发器有时会变得复杂。例如，如果有人单击特定页面上的按钮，则触发标签。

如下图所示，您可以通过单击屏幕左侧面板上的触发器来访问触发器。

单击触发器

由于尚未配置任何触发器，因此您将在触发器上看不到任何结果。

触发器

变量

本质上，变量是可以改变的值。

例如，让我们考虑一个简单的链接点击。单击链接时，会随此单击事件收集多个内置变量。这些变量最终可用于记录链接，当用户单击特定链接按钮时，该链接将被重定向。

更详细地说，您还可以使用变量记录被单击元素的特定 div 类。它们被称为变量，因为如果页面上有 10 个不同的链接按钮，这些链接按钮的重定向将会发生变化，具体取决于单击的元素。

您可以使用左侧面板并单击变量来访问变量。

变量

Google 跟踪代码管理器提供两种类型的变量 -

  • 内置变量
  • 用户定义变量

正如名称所示，您可以使用 Google 跟踪代码管理器提供的现有变量，也可以创建自己的变量。

让我们考虑一个例子，看看标签是如何发挥作用的。我们现在将使用 Google 跟踪代码管理器调试该代码。

调试标签

在本章的最初部分，我们花了一些时间将 Google 跟踪代码管理器跟踪代码添加到 Blogger.com 上的博客中。

这是让 Google 跟踪代码管理器识别我们的跟踪代码的第一步。如果您仔细观察，在 <head> 标记中包含的脚本中，存在格式为 GTM-XXXXXXX 的 Google 跟踪代码管理器跟踪代码。

现在，当涉及到调试标签时，使用 Google 标签管理器界面相当简单。我们将使用基本 Google Analytics 标签进行演示。我们假设 Google Analytics 帐户已存在。

创建基本的 Google Analytics 标签

在 Google 跟踪代码管理器中，要创建标记，需要执行多个步骤。为了深入了解其中每一项的详细信息，让我们考虑以下屏幕。

创建标签

步骤 1 - 单击“添加新标签”按钮。

右侧面板将滑动以开始创建新标签的过程。这将显示一个无标题的空白标签供您配置。

添加标签

步骤 2 - 为您的标签提供名称。让我们给它起个名字——First Tag。

步骤 3 - 完成后，单击文本/图标 - 选择标签类型以开始设置...。

另一个面板将从右侧滑动，其中将显示以下标签类型。

控制板

正如我们在定义中所看到的，不同的分析工具有不同的标签。在此特定步骤中，Google 跟踪代码管理器要求您指定要创建的确切标记类型。

您会注意到一些标签类型，如下所示 -

  • 通用分析
  • 经典谷歌分析
  • AdWords 再营销
  • 谷歌优化

注意- 通用分析是 Google Analytics 的增强版和最受欢迎的版本。然而，有许多网站采用经典 Google Analytics。

对于此示例，我们继续指定 Universal Analytics。

步骤 4 - 单击 Universal Analytics 继续。控件将切换回上一个屏幕，您将需要选择要跟踪的内容。请参阅以下屏幕截图以供参考。

单击通用分析

步骤 5 - 选中启用此标签中的覆盖设置。

注意- 我们使用此步骤是为了更快地熟悉标签创建。您可以继续创建 Google Analytics 设置变量，而无需选中上述复选框。

步骤 6 - 打开 Google Analytics 界面。在 Google Analytics 中，找到首页上的“管理员”按钮。在“属性”部分下，单击“属性设置”。您将能够看到类似于以下内容的屏幕。

谷歌分析界面

步骤 7 - 复制跟踪 ID。跟踪 ID 的格式为 UA-XXXXX-X。

步骤 8 - 复制跟踪 ID 后，返回 Google 跟踪代码管理器界面。如前所述，将跟踪 ID 粘贴到关联的文本框中。

现在，我们要配置标签的重要元素——触发器。

我们将指示 Google 跟踪代码管理器，如果用户查看该页面，则应触发该代码。为此，我们应该使用屏幕上的下一部分配置触发器。

步骤 9 - 单击“选择触发器”以使此标签触发...

一个对话框将从左侧滑动，要求您选择一个触发器。它将显示触发器，如以下屏幕截图所示。

触发显示

步骤 10 - 单击所有页面。

控件将返回到标签配置屏幕。单击右上角的蓝色“保存”按钮。您已成功配置您的第一个标签！

步骤 11 - 现在进入调试模式，单击灰色的预览按钮。

预览按钮

如上图所示，会出现一个橙色框。这表明调试模式已打开。使用可用的链接访问您的博客。

步骤 12 - 现在，当您访问博客时，您应该能够在博客上看到显示 Google 跟踪代码管理器调试部分的部分。

调试部分

另外，如果您仔细观察，会发现第一个标签显示在“此页面上触发的标签”下。这表明我们的标签在成功的页面视图中被触发。

步骤 13 - 从调试部分，单击变量。然后，单击左侧面板上的“已加载窗口”。此操作意味着我们正在选择一个操作来分析由于该操作而加载的变量。

它将显示变量部分，如以下屏幕截图中绿色框中标记的那样。

变量部分

当我们进入下一章时，您可以更清楚地分析变量。

Google 跟踪代码管理器 - 跟踪标签

一旦您了解了创建标签的过程，就可以深入了解如何使用不同的方法来实现跟踪。

页面浏览标签

产品营销人员需要了解产品网站/博客的访问者数量。这非常重要，因为它有助于了解访客趋势。可以了解访问者是否欣赏网站/博客中添加的特定增强/功能，访问者是否每天/每周访问该网站等。

考虑到“页面浏览量”对于理解网站/博客的喜爱程度非常重要，让我们看看如何使用标签来跟踪页面浏览量。

步骤 1 - 正如我们遵循上一章中的步骤一样，让我们​​访问 Google 跟踪代码管理器中的标签部分。

访问标签

它将显示最近创建的标签 - 第一个标签。

步骤 2 - 单击第一个标签，它将显示带有配置的触发器等的对话框。

单击第一个标签

正如上面屏幕截图中突出显示的那样，让我们​​将注意力集中在跟踪 ID 上。

此跟踪 ID 与Google Analytics相关联。当我们启动调试模式，访问博客时，将被计为单页浏览量。

此时，Google Analytics会在其界面中记录页面浏览量。

步骤 3 - 使用 Google 标签管理器进行调试，然后打开Google Analytics 仪表板，在流量来源 → 概述下，您将看到以下统计信息。

谷歌分析仪表板

这表明页面浏览量已被记录，相应的页面浏览量将在 Google Analytics 中进一步跟踪。

链接标签

很多时候，某些促销优惠可能会要求用户离开博客或网站。除了促销之外，这些可能是用户可能需要参加的一些第三方调查。这些调查将产生某些统计数据，这些统计数据将不同于通过不同标签传入的数据。

为此，启用对链接被点击的次数以及用户被引导离开网站的跟踪非常有用。此类链接称为出站链接，可以使用 Google 跟踪代码管理器轻松跟踪这些链接。

为了证明这一点，我们将在博客中创建一个链接。

出站链接

上面的屏幕截图显示了一个名为“出站链接”的链接。此链接将用于在 Google 跟踪代码管理器中进行跟踪。它重定向到https://www.google.com

步骤 1 - 前往 Google 跟踪代码管理器工作区。单击左侧面板中的标签。单击页面上的“新建”按钮开始创建出站链接标签。

让我们将该标签命名为 – 出站链接标签。

步骤 2 - 按照与初始标签设置相同的过程，将 Google Analytics 代码输入到正确的字段 – 跟踪 ID。

步骤 3 - 选择“跟踪类型”字段作为“事件”。您将能够进一步看到以下选项。

轨道类型字段

这些选项与赛道类型 - 事件一致。请注意，这些选项在“轨道类型 - 页面视图”下根本不可用。这是因为，当我们将 Google Analytics 代码附加到 Google 标签管理器时，为了实时查看事件的详细信息，我们需要某些参数。

步骤 4 - 填写以下表格详细信息。粗体文本是要在文本框中输入的值。

  • 类别 –出境

  • 操作 -单击

  • 将标签和值字段留空

  • 将非交互命中保持为False

步骤 5 - 接下来，在“触发”部分下，单击“选择触发器”以使此标签触发...

步骤 6 - 单击右上角的蓝色+图标。它将打开自定义触发器部分。为此触发器提供一个名称 - 单击触发器。

步骤 7 - 单击选择触发类型开始设置...

它将显示以下触发器类型，如下面的屏幕截图所示。

只需链接

步骤 8 - 如上图突出显示的那样，单击“单击触发器类型”下的“仅链接”。这将显示配置新创建的触发器类型的不同选项。

现在，我们需要配置触发器，以便在单击的 URL 的页面路径为https://www.google.com时触发。请注意，我们已将博客上的链接配置为重定向到同一 URL。

页面网址

步骤 9 - 按照上图所示配置触发器。

我们希望将此触发器配置为在页面 URL 等于https://www.google.com时触发某些链接点击。完成后，屏幕应如下所示。

页面路径

步骤 10 - 单击“保存”按钮保存这个新创建的触发器。屏幕将返回到出站链接标签的标签配置。

步骤 11 - 单击“保存”完成配置。

出站链接标签

如上图突出显示的，出站链接的完整标记应如上所示。

现在，让我们让标签发挥作用。

步骤 12 - 在工作区中，单击“预览”按钮。调试模式将启动。

步骤 13 - 在浏览器的另一个选项卡中，打开您的博客。调试窗口将显示在屏幕底部。

调试窗口

如上所示，由于我们尚未单击该链接，因此该标签仍显示在“Tags Not Fired On This Page”下。

步骤 14 - 单击上一步中创建的出站链接，标签将被触发。您可以看到它出现在“此页面上触发的标签”下。

外部链接标签

这就结束了为出站链接创建标签以跟踪博客/网站上的链接的方法。

事件追踪

事件跟踪代表与页面加载不同的任何操作。浏览器对您在页面上执行的任何操作都有特定的响应。例如，该操作可以像单击链接一样简单，也可以向复杂的操作（例如跟踪文件查看和下载）提交表单一样简单。

使用 Google 跟踪代码管理器，您可以轻松跟踪浏览器中生成的事件。它记录浏览器对潜在操作的响应，从而轻松获取特定事件跟踪。

我们将使用上面的示例来查看事件跟踪的实际效果。在前面的示例中，我们创建了一个链接，该链接从我们的博客重定向。在此示例中，我们将创建另一个链接，该链接将指向我们的博客。我们使用此示例是为了演示如何无缝跟踪离开博客的链接。

我在博客中创建了一个名为“内部链接”的链接。此链接将重定向到同一博客页面。

内部链接

让我们转到 Google 跟踪代码管理器仪表板并为出站链接创建一个新触发器。为此，我们将使用内置变量 Click URL。使用 Click URL，我们将检测所单击的链接是否将用户重定向到博客之外。

要启用内置变量 Click URL，请执行以下步骤。

步骤 1 - 在变量部分下，单击红色按钮“配置”。它将显示可用的内置变量。有不同的内置变量可用，它们是 – 页面、实用程序、错误、点击等。

步骤 2 - 从“点击”类别中，选中“点击 URL”框。这将立即显示 Click URL 中的可用变量。请参阅以下屏幕以供参考。

点击网址

现在已经配置了变量，我们可以配置触发器了。

当用户单击所有重定向到博客外部的 URL 时，将启用触发器。创建这个触发器相当简单。

步骤 3 - 转到触发器，单击新建。为触发器提供名称。让我们说，名称是 – 外部链接触发器。

步骤 4 - 在触发器配置下，单击选择触发器类型以开始设置...

步骤 5 - 从可用选项中的“单击”下，选择“仅链接”。请参阅以下屏幕了解到目前为止的步骤。

外部链接触发

单击“仅链接”后，您将返回到第一部分，您需要在其中提供 URL 例外。以下是执行此操作的步骤。

步骤 6 - 对于“此触发器触发”选项，选择“某些链接点击”。

步骤 7 - 在条件下，选择“Click URL”（应事先选择）。从条件选项中选择不包含的值。

步骤 8 - 在值的文本框中，输入一个值，即您的博客 URL。在我们的例子中，我们将输入 gtmtutorial2017.blogspot.in。完成后，屏幕将类似于以下内容。

选择点击网址

步骤 9 - 单击蓝色的“保存”按钮保存新触发器。

现在是时候配置我们的标签了，我们将使用它来跟踪点击事件，这会将用户重定向到博客之外。

步骤 10 - 打开标签部分，单击新建按钮。为您的标签提供一个名称，我们称之为 – 外部链接标签。

步骤 11 - 在标签配置下，单击选择标签类型以开始设置...选择标签类型作为 Universal Analytics，然后在屏幕上输入以下详细信息。

  • 在轨道类型下，选择事件
  • 对于类别 – 输入外部链接
  • 在操作中 – 输入 Click
  • 对于标签，请单击选项图标
标签配置

步骤 12 - 在显示的侧面板上，选择单击 URL。

步骤 13 - 完成后，选中启用此标签中的覆盖设置框。在跟踪 ID 文本框中，输入您的 Google Analytics 跟踪代码。

跟踪代码

步骤 14 - 向下滚动以配置触发。我们将使用新创建的触发器。

步骤 15 - 单击“选择一个触发器”以使此标签触发...它将显示可用的触发器。选择我们之前创建的外部链接触发器。

标记火

标签的配置到此结束。单击“保存”按钮。

步骤 16 - 现在，要调试标签，请单击灰色的“预览”按钮。它将在调试模式下启动 Google 跟踪代码管理器。

步骤 17 - 返回您的博客并刷新博客以启动 Google 跟踪代码管理器调试器。考虑上面的示例，页面中显示了两个链接。此外，还有外部链接标签，它显示在“此页面未触发的标签”下。

GMT 调试器

现在是时候测试标签的配置了。我们将在这两种情况下使用 Ctrl + 单击来检查标签是否被触发。Ctrl + 单击将在新选项卡中打开链接，而不刷新当前页面。我们需要保持页面完整，因为如果页面刷新，我们将无法看到触发的标签。

步骤 18 - 首先，使用 Ctrl + 单击内部链接，如上图突出显示的那样。理想情况下，标签不应被触发，因为链接将用户引导至同一博客本身。

GTM链接点击

如上图所示，在调试器的 Summary 部分下，您将看到另一个事件 – gtm.linkClick。这意味着GTM已经记录了点击事件。

但是，您不会在“此页面上触发的标签”部分中看到任何更改。这是因为我们已经配置了出站链接的选项卡。

步骤 19 - 现在 Ctrl + 单击出站链接（这是在上一节中创建的）。

观察摘要部分，它将再次针对另一个事件 – gtm.linkClick 进行更新。

gtm.linkClick

如上图所示，对于下一个记录的事件，将会触发一个标签——外部链接标签。您将能够在“此页面上触发的标签”下看到它。

通过这种方式，您可以使用 Google 跟踪代码管理器进行事件跟踪，并为您的网站/博客所需的关键数据配置标签。

表格追踪

通常，在任何网站/博客上，您都会看到一个表单，它将捕获用户的某些详细信息。作为产品营销人员，了解访问者是否使用该表单变得很乏味。

这是了解用户在此表单上填写信息的次数以及遇到错误的次数的好方法。使用 Google 跟踪代码管理器，您可以轻松跟踪表单提交情况。本节将引导您完成整个过程。

对于此示例，我们将在我们的博客上创建一个“联系我们”表单。

步骤 1 - 对于博主，要创建联系表单，请使用布局选项 → 添加小工具。单击添加小工具后，您将看到以下屏幕，您可以在其中找到博客搜索小工具。单击蓝色加号 (+) 图标将其插入博客中。

博客搜索

完成后，它将显示在您的博客上，如以下屏幕截图所示。

博客

现在，让我们配置相关的触发器和标签。

要从触发器开始，我们将遵循相同的步骤。我们首先添加启用一个名为“表单 ID”的内置变量，然后创建一个触发器来利用这个新创建的变量。

完成后，我们将使用这个新触发器来配置一个标签来跟踪与表单的交互。

要启用内置变量表单 ID，请执行以下步骤。

步骤 2 - 在变量部分下，单击红色按钮“配置”。从“表单”类别中，选中“表单 ID”框。这将立即在可用变量中显示表单 ID。请参阅以下屏幕以供参考。

变量配置

现在已经配置了变量，我们可以配置触发器了。

当用户在“联系我们”表单中提交任何数据时，触发器将被启用。

步骤 3 - 为此，请转到触发器，单击新建。为触发器提供名称。让我们将其命名为——表单提交触发器。

步骤 4 - 在触发器配置下，单击选择触发器类型以开始设置...

步骤 5 - 从可用选项中的“用户参与”下，选择“表单提交”。请参阅以下屏幕了解到目前为止的步骤。

表格提交

单击“表单提交”后，您将返回到第一部分，您需要在其中提供表单 ID。

步骤 6 - 对于“此触发器触发”选项，选择“所有表单”。

完成上述步骤后，它将启用对博客页面上提交的所有表单的跟踪。您还可以使用特定的表单 ID，该 ID 可以在创建博客时进行配置。

要配置特定的表单 ID，您可以向您的网站/博客开发人员寻求支持以获取更多详细信息。完成这些步骤后，请参阅以下屏幕以获取完整参考。

表单提交触发器

步骤 7 - 单击蓝色的“保存”按钮保存新触发器。

现在是时候配置我们的标签了，我们将使用它来跟踪将用户重定向到博客之外的点击事件。

步骤 8 - 打开标签部分，单击新建按钮。为您的标签提供一个名称，我们称之为 - 表单提交标签。

步骤 9 - 在标签配置下，单击选择标签类型以开始设置...选择标签类型作为 Universal Analytics 并填写以下详细信息 -

  • 在轨道类型下，选择事件
  • 对于类别 – 输入表格提交
  • 实际操作 – 输入已提交的表格
  • 对于标签，请单击选项图标
通用分析

步骤 10 - 在显示的侧面板上，选择表单 ID。

步骤 11 - 完成后，选中启用此标签中的覆盖设置。在跟踪 ID 文本框中，输入您的 Google Analytics 跟踪代码。

启用覆盖

向下滚动以配置触发。我们将使用新创建的触发器。

步骤 12 - 单击“选择一个触发器”以使此标签触发...它将显示可用的触发器。选择我们之前创建的表单提交触发器。

选择触发器

标签的配置到此结束。单击“保存”按钮。

步骤 13 - 现在，要调试标签，请单击灰色的“预览”按钮。它将在调试模式下启动 Google 跟踪代码管理器。

步骤 14 - 返回您的博客并刷新博客以启动 Google 跟踪代码管理器调试器。将有表单提交标签，该标签显示在“此页面未触发的标签”下。

搜索博客

步骤 15 - 现在通过在其中输入一些值来与“搜索此博客”表单进行交互。让我们输入 First，因为我们的第一篇博客文章包含单词 First。

步骤 16 - 单击搜索。新事件将显示在“摘要”下，表单提交标签将显示在“此页面上触发的标签”下。

概括

这样，我们就可以使用 Google 标签管理器创建表单提交标签。

Google 标签管理器 - 组织界面

除了创建标签和管理关联的触发器和变量之外，Google 跟踪代码管理器还提供了更多功能。这包括内务管理工作，例如组织用户、用于根据所需顺序组织标签的文件夹等。

在本节中，我们将概述如何管理与标签相关的用户和不同文件夹。

用户管理

产品营销团队使用单个 Google 跟踪代码管理器帐户来管理不同的营销活动的情况并不罕见。会有不同的角色，这些角色将具有一定的权限，例如创建标签、删除/修改标签、创建另一个用户等。

用户管理提供了一个成熟的门户，用于管理使用 GTM 功能的用户。用户管理分为两个级别 -

  • 账户级别
  • 集装箱液位

要访问用户管理，请单击左上角菜单栏中的“管理员”。

单击管理员

如下图所示，您将能够看到与帐户和容器关联的用户管理。

用户管理

两者之间的重要区别是 – 如果您在帐户级别向用户提供访问权限，则该用户可以访问该帐户下的所有容器。然而，如果在容器级别向用户提供访问权限，则用户只能修改/添加/删除该容器下的标签。

要查看所有可用访问级别的详细信息，请单击“容器级别”下的“用户管理” （上面以黄色突出显示）。

这将显示可用帐户及其所提供的权限。大多数情况下，它将是您用于登录 GTM 的 Google 帐户。

单击红色的“新建”按钮。它将显示以下屏幕。

添加新用户

如图所示，您可以添加您选择的电子邮件地址，并为其分配访问权限，然后在容器级别提供所需的权限。

以下是可用的权限 -

  • 禁止访问- 阻止用户访问容器标签。

  • 读取- 用户将只能读取标签。不能进行修改或删除操作。

  • 编辑- 用户可以添加/修改/删除可用标签。

  • 批准- 用户具有更高的权限来批准标签到实时环境。本教程后面将详细介绍环境。

  • 发布- 所有权限，类似于管理员用户。

容器级别的用户管理概述到此结束。

在帐户级别，可以将用户配置为普通用户或管理员用户。

账户级别

可以为添加的用户分配类似的权限；唯一的区别是 – 用户将有权访问该帐户下的所有容器。

帐户级别的用户管理概述到此结束。

文件夹

特别是当您的帐户中有大量标签和触发器时，文件夹是必需的。当您有大量标签/触发器需要处理时，文件夹会很有用。

为了组织这些文件夹中的标签和触发器，人们可以发挥自己的创造力。可以根据不同的应用程序领域或用户或者创建文件夹的目的来创建文件夹。产品营销团队可以自行决定采用特定的文件夹结构。

查看文件夹的另一种方式可以从所使用的分析工具的角度来看。在分析工具的基础上，我们可以创建一个标签，从长远来看这将是有帮助的。

要创建不同的文件夹，请单击左侧面板中的文件夹。您将看到以下屏幕。

文件夹

到目前为止创建的标签将显示在屏幕上。您可以使用屏幕右上角显示的“新文件夹”选项创建不同的文件夹来组织标签。

单击“新建文件夹”后，将打开一个快速弹出窗口，如下所示。

新建文件夹

在上一个屏幕中，您始终可以根据您的要求将标签移动到所需的文件夹中。

关于在 Google 跟踪代码管理器中创建文件夹的介绍到此结束。

Google 跟踪代码管理器 - 发布标签

我们一直在调试器环境中创建、修改和调试标签。到目前为止，我们还没有在我们的博客上看到这些标签。

为了让标签出现在博客上，我们需要发布标签。我们希望发布标签而不是始终使用预览模式。

发布标签相当简单。

步骤 1 - 单击屏幕右上角的“提交”按钮。

它将显示以下屏幕。

提交按钮

步骤 2 - 输入可识别的版本名称，以便可以轻松理解所做的更改。

通过版本描述，您可以尽可能详细地说明该特定版本中标签的更改/添加。

步骤 3 - 向下滚动到工作区更改，您将看到标签中所做的所有更改，这些更改未发布或处于预览模式。

预览模式

同样，在“活动历史记录”下，您可以准确了解自开始以来帐户中所做的更改/更新。

步骤 4 - 提供版本名称、描述。您可能需要提供版本名称“First Version”，并且可以提供说明“First Google Tag Manager Update”。

目前，我们将“发布到环境”保留为“Live”。这是因为除了 Live 之外我们还没有任何其他环境。

第一版

步骤 5 - 单击“发布”，您将看到此特定版本的摘要。

单击发布

您可以通过这种方式发布在 Google 跟踪代码管理器工作区中完成的更改。

您可以使用 Google Chrome 插件 - Google Tag Assistant在不打开预览模式的情况下查看标签被触发。

在 Google 跟踪代码管理器中创建环境

我们可以通过多种方式配置要与 Google 跟踪代码管理器一起使用的环境。

通常，在软件世界中，“环境”一词用于测试/审查特定功能的上下文中。

步骤 1 - 要查看 Google 跟踪代码管理器中的可用环境，请单击 ADMIN。

步骤 2 - 在“容器”部分下，单击“环境”。

创造环境

您将能够看到如上所示的屏幕。

通常，大型软件公司将其网站划分在不同的环境中，以简化发布功能的过程。开发人员在他们的开发网站上工作，然后将功能更改推送到暂存站点。最后，当更改在暂存站点中得到验证时，更改将被推送到实时环境。

在 Google 跟踪代码管理器的上下文中，可以灵活地添加不同的环境，这将允许您在代码出现在实时网站上之前对其进行完全验证。在本教程中，我们将创建一个称为开发环境的环境。以下是步骤。

步骤 3 - 单击红色的“新建”按钮。您将能够看到以下对话框。

创造新环境

步骤 4 - 填写详细信息，如上图所示。我们将假装我们的开发站点与我们现在正在工作的站点相同，以便相应地推动更改。

步骤 5 - 单击“创建”，您将看到如下提示。

新环境

如上图所示，提示显示了两种使用环境的方式。

  • 使用共享预览链接- 当您想要将标签中的更改分发给团队成员且团队规模较大时，此链接会很方便。

  • 使用片段- 如果您清楚某个特定站点将作为您的开发/登台环境，那么您可以使用此片段选项。我们提供了此环境的代码片段，以便您可以访问该网站以查看最近所做的任何更改。

步骤 6 - 单击发布到开发以查看这些操作。下一个屏幕将询问可用的更改以推送到新创建的环境中。

发布到开发

将显示尚未发送到相应环境的更改。此外，还显示版本名称，以便用户清楚哪个版本正在发布到相应的环境。

步骤 7 - 单击立即发布以查看新创建的环境中可用的更改。它将显示带有日期和时间戳的成功消息。

从可用的环境列表中，单击新环境的名称，在我们的示例中为 Dev。

开发者

将显示共享环境链接的可用选项，如下所示。

可用链接

使用上述任何一种方法，您将能够在开发 (Dev) 环境中看到标记中的更改。

Google 跟踪代码管理器 - 数据层

数据层可以看作是一个对象，包含要通过 Google 跟踪代码管理器传递和处理的所有信息。这是一个有点技术性的概念。术语“数据层”用于表示 Google 跟踪代码管理器使用的数据结构，用于在您的网站/博客和跟踪代码管理器之间存储、处理和传递数据。

为了进一步详细说明，数据层可以将有关访问者的数据输入到您的分析工具中。从另一个角度来看定义，数据层实际上是数字环境每个子集的业务需求和目标的列表。

让我们以电子商务网站为例，业务需求可能包括 -

  • 交易信息，包含有关所购买商品的详细信息

  • 有关购买者的访客数据

  • 有关购买的其他详细信息，例如购买地点和时间

  • 最后，有关其他因素的信息，例如访问者是否订阅了电子邮件更新

因此，简而言之，数据层承载了不同工具/用户/利益相关者可以根据需要使用的信息。

在 Google 跟踪代码管理器中，dataLayer 是一个 JavaScript 数组。它由键值对组成。以下是具有不同数据类型的 dataLayer 的快速示例 -

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

在这里，我们有不同的值，例如对象数组（产品）、数值（价格）、字符串数组（商店）、日期对象和对象（名称）。

另一方面，当您将 Google 跟踪代码管理器容器代码放入网站时，会自动创建数据层。

就其本身而言，数据层是一个非常复杂的概念，需要首先理解。本章将提供有关如何与数据层交互的更多见解。

数据层事件

数据层事件的一个简单示例是时事通讯注册表单，它无法通过自动 GTM 侦听器轻松跟踪。一旦新订阅者在您的网站上输入了他/她的电子邮件，网站开发人员就可以支持您推送数据层事件。该事件的代码应如下所示 -

push({‘event’: ‘new_subscriber’});

如果需要，您可以向开发人员询问更多信息，例如表单位置。如果您的网站上有多个表单，则这是必需的。可以使用以下代码来实现。

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

此外，Google 跟踪代码管理器默认将一组特定值推送到 Web 应用程序的数据层。这些值是 -

  • gtm.js - Google 跟踪代码管理器准备好运行后立即推送到数据层

  • gtm.dom - 当 DOM 准备好时推送到数据层

  • gtm.load - 当窗口完全加载时推送到数据层

检查数据层

正如我们现在所知，屏幕上的任何交互都会产生某些事件。

例如，让我们考虑这个简单的页面加载事件。要查看事件，您需要运行调试器。运行调试器（在预览模式下）后，请访问博客。如果您查看左下角的摘要窗口，您将看到以下内容 -

数据层

步骤 1 - 单击“已加载窗口”，然后单击“数据层”。

“数据层”选项卡中显示的信息与“窗口已加载”事件有关。

显示为 – {event: 'gtm.load', gtm.uniqueEventId: 3}

此外，如果您想仔细查看，则需要获得 Chrome 控制台选项卡的支持。当您知道如何以正确的方式使用 Chrome 调试器时，检查数据层就会变得很容易。

步骤 2 - 当您在博客上时，右键单击页面中的任何部分。在显示的上下文菜单中，单击“检查”。该面板将显示在屏幕右侧，并激活“元素”选项卡。

步骤 3 - 单击控制台。在控制台模式下，单击左上角图标可清除显示的所有消息。请参阅以下屏幕截图以供参考。

安慰

步骤 4 - 清除窗口中的所有先前消息后，输入 dataLayer，确保 L 的大写已完成。该名称由 Google 跟踪代码管理器提供给其数据层。但是，您的开发人员可以根据需要为其分配不同的名称。

步骤 5 - 在 dataLayer 之后按 Enter 键。它将显示以下详细信息。

GTM数据层

一共有三个对象，每个对象都包含一些信息。现在，这些对象对您来说可能不一样，如上面的屏幕截图所示。数据层是可配置的，并且开发人员可以完全控制根据要求进行配置。

出现的值是由于在该特定位置/空间使用的 Blogger 小工具造成的。这就是为什么那里有某些信息的原因。

如果您查看对象 1，您会注意到触发的事件是 – gtm.dom。它在加载页面时由 GTM 触发。

通过这种方式，您可以检查数据层并在需要时向其中添加信息。

数据层中的变量

现在我们已经熟悉了数据层，让我们尝试使用 Google 跟踪代码管理器界面读取其中一个变量。

在这里，我们将尝试使用数据层变量读取事件。

如果我们看到上图，变量 event 保存了gtm.dom。我们将从 GTM 界面创建一个变量，并查看它如何反映在 Google 跟踪代码管理器下的“变量”选项卡中。

步骤 1 - 在 Google 跟踪代码管理器界面中，转到变量。向下滚动到用户定义的变量。单击新建。

步骤 2 - 为这个新变量提供一个名称，我们将其称为 varEvent。

步骤 3 - 单击选择变量类型开始设置...

单击新建

步骤 4 - 从列表中选择数据层变量。

步骤 5 - 当您选择数据层变量时，您将需要提供名称和版本。