注意：此开发者网站正在向 developers.google.com/tag-platform 迁移，2021 年 9 月 30 日起系统会将您重定向到新的网址

开发者指南

本文详细介绍了如何使用 Google 跟踪代码管理器来管理您网站上的广告代码。

使用数据层

为确保尽可能提高灵活性、可移植性和易用性，建议将 Google 跟踪代码管理器与数据层一起部署，这样它才能发挥最大作用。数据层是一个对象，其中包含您希望传递给 Google 跟踪代码管理器的所有信息。您可以通过数据层将事件或变量等信息传递给 Google 跟踪代码管理器，然后在 Google 跟踪代码管理器中设置根据变量值或具体事件进行触发的触发器，例如在 purchase_total> 100 元时触发再营销代码。您也可以将变量值传递给其他代码，例如将 purchase_total 传递到代码的值字段。

Google 跟踪代码管理器可以轻松引用您在此数据层中添加的信息，而不是引用变量、交易信息、网页类别及其他分散在网页上的重要信号。不过，明确声明数据层是可选操作；如果您选择不实现数据层，仍然可以使用变量功能访问网页中的值，但在没有数据层的情况下，您将无法使用事件。实现包含变量及关联值的数据层（而不是等待这些变量在网页上加载），有助于确保您在需要时可以马上用它们触发代码。

向网页中添加数据层变量

要设置数据层，请将以下代码段添加到您网页的标头部分，放置在容器代码段上方：

<script>
  dataLayer = [];
</script>

以上代码段是一个空对象，可向其中填充要传递给 Google 跟踪代码管理器的信息。例如，我们可能需要在数据层中设置数据层变量，以指明相应网页是注册页且相应访问者已被确认为高价值客户。为此，我们可以按以下方式填充数据层：

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

例如，可以将 Google 跟踪代码管理器配置为在所有标记为 signup 且/或访问者被标记为 high-value 的网页上触发代码。正如快速入门指南中所述，务必要将此数据层代码段放置在容器代码段上方。

如果在容器代码段之后调用数据层代码，Google 跟踪代码管理器将无法使用数据层代码中声明的任何变量，因而也就无法在网页加载时有选择性地触发代码。下面是一些示例：

错误

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->
<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

正确

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

只要访问者依然在当前网页上，数据层对象中声明的每个变量就会持续存在。因此，必须在网站每个网页上的数据层中声明与各个网页都相关的数据层变量，例如 visitorType。尽管您不需要在每个网页的数据层中都放置同一组变量，但应该采用统一的命名规范。也就是说，如果您在注册页上使用 pageCategory 设置页面类别，那么在购买页上您也应该使用 pageCategory 设置页面类别。

明确声明数据层是可选操作。因此，如果您选择不实现数据层代码和在其中填充变量，Google 跟踪代码管理器的容器代码段将会为您启动一个数据层对象。

将数据层与 HTML 事件处理脚本配合使用

Google 跟踪代码管理器提供了一个调用了 event 的特殊数据层变量，此变量在 JavaScript 事件监听器中使用，可在用户与网站元素（例如按钮）进行互动时启动代码触发流程。例如，您可能希望在用户点击简报注册表单上的 Submit 按钮时触发转化跟踪代码。可以根据用户与网站元素（例如，链接、按钮、菜单系统的组件）的互动来调用事件，也可以根据其他 JavaScript（例如，延时等）加以调用。

此功能的实现方法是，在您的网页上将 push API 来作为数据层的一个方法加以调用，例如，将此方法与要跟踪的特定元素关联起来。这种情况下，设置事件的基本语法如下：

dataLayer.push({'event': 'event_name'});

其中 event_name 是一个字符串，用于指明相应的事件或元素是什么。

例如，要设置在用户点击某个按钮时触发的事件，您可以按如下方式修改该按钮的链接，使之调用 push() API：

<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>

有时，要在用户与网页进行互动后，才会加载您希望收集或用于触发某些代码的数据。通过结合使用数据层变量和事件，您可以根据需要将这些信息动态地推送到数据层。

可以动态地向数据层推送数据层变量来捕获各种信息，例如在表单中输入或选择的值、与访问者正在播放的视频相关联的元数据、访问者自行指定的产品（例如汽车）颜色、所点击链接的目标网址等。

和事件一样，此功能也是通过调用 push() API 实现的，不过这次是添加或替换数据层中的数据层变量。在这种情况下，设置动态数据层变量的基本语法如下：

dataLayer.push({'variable_name': 'variable_value'});

其中 variable_name 和 variable_value 均为字符串，前者表示要设置的数据层变量的名称，后者表示要设置或替换的数据层变量的值。

例如，要设置一个数据层变量以便在访问者与汽车定制微件互动时捕获颜色偏好，可以推送以下动态数据层变量：

dataLayer.push({'color': 'red'});

一次推送多个变量

您可以一次推送多个变量和事件，而不用分别为每个变量和事件使用 dataLayer.push()。以下示例展示了如何做到这一点：

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customizeCar'
});

在链接的事件处理脚本中也可使用这种方法：

<a href="#"
   name="color"
   onclick="dataLayer.push({
     'color': 'red',
     'conversionValue': 50,
     'event': 'customizeCar'});">Customize Color</a>

请务必注意，将与现有变量名称相同的变量推送到数据层会导致现有值被新值覆盖。例如，在点击上面的链接时，如果数据层中已经声明了一个名为 color、值为 blue 的变量，则该值将被覆盖，以后就使用新值 red 了。

异步语法的运作方式

Google 跟踪代码管理器为异步代码，也就是说，它在执行时不会阻碍其他元素显示在网页上。它还会导致通过 Google 跟踪代码管理器部署的其他代码也以异步方式部署，也就是说，如果代码加载速度慢，也不会妨碍其他跟踪代码。

异步语法的实现靠的是 dataLayer 对象。这个对象起到一个队列的作用，采用先进先出的数据结构收集 API 调用，代码就是根据这些 API 调用而触发的。要向队列中添加内容，请使用 dataLayer.push 方法。借助 dataLayer.push 方法，您可以通过变量向 Google 跟踪代码管理器传递额外的元数据，并指定相关事件。

可以指定在 Google 跟踪代码管理器的代码段之前创建 dataLayer 对象，如果尚未定义 dataLayer 对象，也可以让 Google 跟踪代码管理器来创建。

如需详细了解异步语法，请参阅跟踪参考中对 dataLayer.push 方法的说明。

避免常见问题

实现 Google 跟踪代码管理器时，请注意以下几点：

请勿覆盖您的 dataLayer

当您使用赋值功能为 dataLayer 赋值时（例如 dataLayer = [{'item': 'value'}]），所赋的值会覆盖任何现有值。因此，最好在源代码中尽可能靠上的位置（容器代码段或任何优化工具网页隐藏代码段的上方）声明 dataLayer。声明 dataLayer 后，可以在脚本中后面的部分使用 dataLayer.push({'item': 'value'}) 向数据层添加更多值。

dataLayer 对象名称区分大小写

如果您尝试推送存在大小写错误的变量或事件，推送将会失败。例如：

datalayer.push({'pageTitle': 'Home'});    // Won't work

dataLayer.push({'pageTitle': 'Home'});    // Better

变量名称应加引号

尽管我们并不严格要求为仅包含字母、数字和下划线的变量名称以及不是保留字（例如“function”、“export”、“native”等）的变量名称加引号，但为了避免出现问题，还是建议您为所有变量名称都加上引号。例如：

dataLayer.push({new-variable: 'value'});      // Won't work

dataLayer.push({'new-variable': 'value'});    // Better

变量名称应在各网页之间保持一致

如果相同的变量在不同的网页中使用了不同的变量名称，GTM 将无法在所需的全部位置以一致的方式触发代码。例如：

无法正常运行

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

较好的做法

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

必须在容器代码段上方的数据层中声明在网页加载时触发代码所需的全部信息

要在符合某个条件的网页（例如，被标记为 pageCategory 是 sports 的网页）加载时触发代码，必须在容器代码段上方的数据层中指定 pageCategory（例如 'pageCategory': 'sports'）。凡是在容器代码段后推送到数据层的变量（即使用 dataLayer.push() 推送的变量），均无法在符合某个条件的网页加载时触发代码。

使用 Google 跟踪代码管理器部署的代码不应保留硬编码状态，也不应同时还采用其他工具进行部署

凡是通过 Google 跟踪代码管理器触发的代码，均应迁移到 Google 跟踪代码管理器，而不是只进行复制；如需详细了解如何迁移代码，请参阅将代码迁移到 Google 跟踪代码管理器。既使用 Google 跟踪代码管理器又通过其他系统在您的网站上部署代码，或使代码保留硬编码状态，可能会导致这些代码产生的数据虚增（以及其他数据完整性问题）。例如，如果您要迁移 Google Analytics（分析）跟踪代码，以便通过 Google 跟踪代码管理器进行触发，则应从您的网站中移除硬编码的 Google Analytics（分析）跟踪代码。

重命名数据层

默认情况下，Google 跟踪代码管理器所启动和引用的数据层称为 dataLayer。如果您希望为自己的数据层使用其他名称，可以将容器代码段中的数据层参数值（下文中突出显示的部分）替换为您选择的名称。

<!-- 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','myNewName','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

然后，您还应调整对数据层的所有引用（即在相应代码段上方声明数据层时以及使用 push() API 将事件或动态数据层变量推送到数据层时进行的引用），使它们体现您自行指定的数据层名称：

<script>
  myNewName = [{
    // ...
  }];
  myNewName.push({'variable_name': 'variable_value'});
</script>

将代码迁移到 Google 跟踪代码管理器

为了充分利用 Google 跟踪代码管理器，我们建议您将大部分现有代码迁移到 Google 跟踪代码管理器中，但不应迁移那些不受支持的代码。本部分介绍了一种堪称最佳做法的迁移流程。该流程包含 5 个主要步骤：

制作网站示意图（可选）

要开始迁移，您需要考虑一下您目前已在网站上部署了哪些代码以及您希望收集哪些数据。对于数据收集，请考虑您要跟踪哪些操作（事件）以及从您要从网页中收集哪些其他数据（变量）。因此，不妨制作一份涵盖以下内容的示意图：代码、您希望这些代码收集的数据，以及您希望将哪些事件或网页与这些代码关联起来。
实现标准的 Google 跟踪代码管理器代码段

制作好网站示意图后，您需要在尚未添加任何代码的网站上仅添加一个 Google 跟踪代码管理器代码段，然后进行部署。有关详情，请参阅快速入门。
添加事件和变量

使用添加事件和变量部分中所述的方法自定义 Google 跟踪代码管理器安装。
在 Google 跟踪代码管理器的管理界面中添加代码及关联的触发器

在使用 Google 跟踪代码管理器代码段和各种数据收集 API 设置好网站后，您应将自己的网站代码添加到界面中。但此时请勿发布。只需在 Google 跟踪代码管理器的管理界面中使用适当的模板添加和配置您网站中的代码，然后相应地设置触发器即可。如需详细了解具体操作方法，请参阅帮助中心内的“触发器”一文）。
最终的迁移替换

您要执行的最后一步是在 Google 跟踪代码管理器中替换旧代码，同时发布新代码。您需要依次完成以下两项操作，两项操作之间仅间隔几分钟：
- 通过一次代码推送移除您的网站代码
- 确定推送成功后，点击您的容器版本所对应的“发布”按钮。
这种方法可能会导致数据存在很小的缺口，但初始替换完成后，就不会再出现任何数据缺口了。或者，您也可以对调这里的操作顺序，先发布，然后马上推送网站更改。这可能导致些许数据出现一次性的重复，但就不会出现很小的数据缺口了。

完成向 Google 跟踪代码管理器的初始迁移后，您可以通过 Google 跟踪代码管理器界面处理任何后续代码添加工作，而无需更改网站代码。

多个网域

尽管您可以针对多个网站使用同一容器，但我们建议您在部署您管理的每项网络媒体资源时分别使用它们各自的容器。这样做可防止仅限于对一个网站进行的更改对使用同一容器的其他网站产生不良影响。不过，在某些情况下，当多个顶级网域或子网域属于同一网站时，通过同一 Google 跟踪代码管理器容器管理它们的代码可能会有所裨益。

选择为多个网域使用一个容器时，请务必在 Google 跟踪代码管理器中仔细配置您的代码和触发器。如果使用 Google 跟踪代码管理器中默认的“所有网页”触发器（即 $url matches RegEx .*），则会在所有网域中所有部署了容器代码段的网页上触发代码。有些代码在它们所部署到的网域上有专门的配置或用途，因此，要单独触发一个网域或各个网域的所有网页上的代码，您可能需要创建自定义触发器，甚至需要移除“所有网页”触发器。

例如，您在通过 GTM 部署 Google Analytics（分析）跟踪代码时，可以选择支持跨多个网域或子网域进行 Google Analytics（分析）跟踪的配置。

在这种情况下，您需要向您的 Google Analytics（分析）跟踪代码添加一行代码，以手动设置要在其上设置 Google Analytics（分析）Cookie 的第一方网域；例如，在 www.example-petstore.com 和 dogs.example-petstore.com 上，您可以在共同的网域 .example-petstore.com 上设置 Cookie。不过，在辅助网站 (www.my-example-blogsite.com) 上，您可以在 .my-example-blogsite.com 上设置 Cookie。因此，您需要让两个 Google Analytics（分析）跟踪代码（其中一个设置在 .example-petstore.com 上，另一个设置在 .my-example-blogsite.com 上）分别在这两个网域上触发。如果这两个网域共用一个通用 GTM 容器，在 Google 跟踪代码管理器中使用默认的“所有网页”触发器会导致每个代码在这两个网域的所有网页上都触发。

同一网页上的多个容器

为了使网页发挥出最佳性能，请尽量减少网页上 Google 跟踪代码管理器容器的数量。

如果您在一个网页上使用多个容器，请使用通用数据层对象实现容器代码段。例如，您可以按以下方式实现两个容器代码段：

复制以下 JavaScript 并将其粘贴到网页上尽可能靠近起始 <head> 标记的位置：

<!-- 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-XXXX');</script>

<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-YYYY');</script>
<!-- End Google Tag Manager -->

复制以下代码段并将其粘贴到网页上起始 <body> 标记的后面，需紧跟着此标记放置：

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYY"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

请注意，对于一个网页上的所有 Google 跟踪代码管理器容器，您只能使用一个通用数据层，这是因为使用多个数据层会导致部分触发器停止运行，并且还可能会有其他影响。因此，请勿重命名网页中部分容器的数据层。如有必要，您可以重命名网页上所有容器的数据层。

应避免在一个 Google 跟踪代码管理器容器中通过自定义 HTML 代码实现另一个 Google 跟踪代码管理器容器，因为这会导致辅助容器中代码的延迟增加，而且还可能会有其他影响。

针对不支持 JavaScript 的设备添加数据层变量

为适应已停用 JavaScript 或通过不支持 JavaScript 的设备进行访问的访问者，Google 跟踪代码管理器中包含一个 <noscript> 代码段，用以部署不依赖于 JavaScript 的代码；即使主 GTM JavaScript 无法加载，也可以照常使用。

但请务必注意，数据层（包含网页加载时声明的数据层变量）和推送到数据层的任何事件或动态数据层变量都需依赖 JavaScript 才能正常运行。因此，如果用于触发不依赖 JavaScript 的代码（即使 JavaScript 无法加载，您也希望触发它们）的任意触发器依赖于数据层变量，则您必须将相应数据层变量作为查询参数传递到 <noscript> iframe。例如，要在 pageCategory 为 sports，且 visitorType 为 returning 时触发代码，您需要修改指定网页上的容器代码段，如下所示：

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX&pageCategory=sports&visitorType=returning" height="0"
                  width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

其中，每个数据层变量都会以“&”号分隔的纯文本查询参数形式附加到 iframe 源网址的末尾。

安全

Google 跟踪代码管理器引入了大量安全功能，可帮助确保您网站和应用的安全。除了以下代码级安全功能之外，您可能还需要熟悉跟踪代码管理器的其他功能，如访问控制、两步验证和恶意软件检测。

管理员可以针对其安装限制代码部署，以便仅允许部署特定代码。此外，您也可以配置 Google 跟踪代码管理器以配合内容安全政策实施。

使用相对协议网址

默认情况下，Google 跟踪代码管理器的容器代码段始终使用 https 来加载容器（即 https://www.googletagmanager.com）。这有助于保护您的容器免遭恶意方和窥探行为的危害，在许多情况下，还可提升性能。

如果您希望通过相对协议的方式加载您的 Google 跟踪代码管理器容器，则可以将容器代码段中的来源网址协议（下文中突出显示的部分）更改为 //，而不是 https://。

<!-- 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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

使用相对协议网址时，系统会在采用 http:// 网址的网页上使用 http 加载容器；并会在采用 https:// 网址的网页上使用 https 加载容器。

较早版本的 Google 跟踪代码管理器容器代码段始终使用相对协议网址来加载容器（即//www.googletagmanager.com）。这些采用相对协议网址的较早版 Google 跟踪代码管理器容器代码段将继续正常发挥作用，无需更新。

虽然 Google 跟踪代码管理器中的大部分代码模板也具有协议相对性，但在设置安全网页上触发的自定义代码时，请务必确保这些代码同样具有协议相对性，或者可以安全运行。