如何在您的网站上安装 Google 跟踪代码管理器

已发表: 2022-04-12

Google Tag Manager (GTM) 是一项免费服务，可极大地简化在网站和移动应用程序中使用标签的过程。 使用 GTM，您可以轻松更改页面上的代码、添加新片段并将您的站点与分析系统、广告和其他服务集成。

首先，您需要在您的网站上安装跟踪代码管理器代码。 之后，可以在服务界面中调整所有其他设置，而无需程序员参与。 您可以在我们的文章中了解有关 Google 跟踪代码管理器以及它如何与 Google Analytics 结合使用的更多信息。 如果您已经熟悉这一点，那么我们不要浪费任何时间，继续安装 GTM。

简而言之，要安装 Google 跟踪代码管理器，您需要：

  • 在 Google 跟踪代码管理器中创建帐户和容器；
  • 在您的网站上安装 Google 跟踪代码管理器代码；
  • 发布容器；
  • 检查谷歌标签管理器。

1.在谷歌标签管理器中创建一个账户和容器

在跟踪代码管理器主页上，单击注册按钮并使用您的 Gmail 地址或任何其他 Google 帐户登录：

现在您需要直接在跟踪代码管理器中创建一个帐户。 为此，请单击登录到跟踪代码管理器：

接下来，单击创建帐户：

为您的帐户考虑一个名称——使用您的公司名称最为方便。 然后选择国家，选中与 Google 和其他服务匿名共享数据旁边的框（可选），然后点击继续：

现在您需要配置容器。 如果将 Google Tag Manager 的结构与 Google Analytics 的结构进行比较，那么容器就相当于 GA 中的一个资源。 它存储整个站点的标签、触发器和变量。 一个 GTM 帐户中可以有多个容器：用于网站、用于移动应用程序、用于 AMP 页面等。 为了方便起见，最好以创建容器的资源命名容器。 例如，这可能是您网站的地址。

输入容器的名称后，选择将使用它的位置（在我们的示例中，这是Web ），然后单击Create ：

阅读使用跟踪代码管理器的规则。 选中页面底部的框，确认您同意根据 GDPR 处理数据的条件，然后单击是：

在此之后，您将看到一个包含需要在您的网站上安装的 GTM 代码片段的窗口：

您可以立即复制代码并将其安装在您要监控的站点的所有页面上，或者单击“确定”，稍后在将第一个标签添加到容器时执行此操作。 您可以随时在Administration → Install Google Tag Manager下查看和复制代码：

2. 在您的网站上安装 Google Tag Manager 代码

如果您熟悉网站开发并有权访问管理面板，则可以轻松添加跟踪代码管理器代码。 这是一个如何通过 WordPress 执行此操作的示例。 否则，您仍然需要向程序员寻求帮助； 否则，存在破坏页面源代码的风险。

Google 跟踪代码管理器代码由两个片段组成，并且是异步加载的。 也就是说，页面的主要部分会继续加载，而无需等待 GTM 容器加载。 代码的第一部分应放在页眉中，尽可能靠近开始 <head> 标记：

这是因为第一个片段的位置越高，加载速度就越快。 如果将其插入 <body> 标记，则可能会丢失有关在加载此标记之前离开页面的用户的数据。

代码的第二部分用作备份，有助于跟踪禁用 JavaScript 的用户的操作。 它必须紧跟在 <body> 标签之后：

重要的！

GTM 代码必须直接放在您要跟踪的页面上，换句话说，放在您的整个网站上。 将代码放置在隐藏的iframe中或将其部署在另一个标签管理系统中将无法正确跟踪主页上的标签。

在 AMP 页面上安装 Google 跟踪代码管理器

如果您使用 AMP 技术为移动设备快速加载和适配页面，那么代码的第一部分应该放在结束 </head> 标记之前：

并且代码的第二部分应该紧跟在 <body> 标签之后：

3.发布容器

即使您没有向容器添加单个标签，我们也建议您在您的网站上安装 GTM 代码后立即发布它。 否则，容器会导致 404 错误。 然而，这并不重要。 如果您使用某些服务（例如 TrackJS）来跟踪 JavaScript 错误，那么 404 错误会在您的报告中乱扔垃圾。 为了不给开发者造成不必要的压力，最好发布一个空容器——它不会伤害任何人。

要发布容器，请转到跟踪代码管理器中的工作区选项卡，然后单击右上角的提交按钮：

选择发布并创建版本。 由于这是您的容器的第一个版本，版本说明字段可以留空。 接下来，单击发布：

完毕。 容器已发布。

4.查看谷歌标签管理器

将跟踪代码管理器代码添加到您的网站后，您可以使用特殊的 Google Tag Assistant 扩展检查数据是否正确传输。 这是对 Chrome 浏览器的补充，可显示您的网站上安装了哪些 Google 产品标签以及它们的工作方式。

下载并安装插件后，您会在 Chrome 工具栏中看到此图标. 单击它并选择要检查的系统标签以及在哪些页面上。 单击完成。

然后转到您要检查的页面并单击 Tag Assistant 图标。 要激活扩展，请单击Enable ：

刷新当前页面，Tag Assistant 将显示页面上安装了哪些标签以及它们是如何工作的。 绿色图标表示正在传输数据，没有任何投诉，蓝色表示没有严重问题，红色表示严重问题：

如果您单击特定标签，您将看到错误的可能原因以及有关如何修复它的提示：

有关 Tag Assistant 的更多信息，请参阅 Google 帮助。

还有一些提示

在您的网站上安装 GTM 代码时，请您的开发人员同时添加 Google Optimize 代码段。 即使您目前不打算试验您网站上的内容，这也是一个好主意。 每当您想进行 A/B 测试时，一切都会准备就绪。

需要此代码段来异步加载 Google Optimize 容器，并且在容器加载之前不显示原始页面。 使用 Optimize 代码段，用户将不会看到页面的原始内容，直到加载了测试中更改的页面。

当您传输手动注入 Google 跟踪代码管理器的代码时，不要忘记将它们从网站上的代码中删除，以免数据重复。 这是很重要的一点。

下一步是什么

在您的网站上安装代码后，您需要在跟踪代码管理器界面中添加和配置代码和变量。 要了解如何执行此操作，请参阅文章什么是 Google 跟踪代码管理器以及如何使用它设置 Google Analytics 或网络研讨会先行一步：使用 Google 跟踪代码管理器的技术和微妙之处。

PS 我们准备了一份包含 20 个步骤的清单，营销分析师必须执行这些步骤才能根据正确和完整的数据做出决策。 填写表格，我们将通过电子邮件将清单发送给您。

获取清单