Goole Tag Manager 介绍

概述

Goole Tag Manager(以下简称：GTM)是一个代码管理系统，可以轻松地在网站或移动应用上添加或更新脚本代码及修改代码段被触发的时机，而不需要开发人员在页面上硬编码，在有预先埋点的情况下，完成对第三方sdk代码或自定义代码逻辑的“动态”管理。

使用GTM的好处

GTM中对网站代码做调整只是对代码（Tag）进行增加、删除和修改操作 GTM容器代码能一次性在添加在整个站点的所有页面，整个容器可以存储和发布不同的营销和分析标签，通过GTM的用户交互界面，您只需要单击记下就可以添加，编辑，开启或关闭任何代码，不需要给网站增加大量的硬编码工作就可以直接发布代码到线上。
风险

• 在网站或应用上部署的GTM脚本（如：https://www.googletagmanager.com/gtm.js?id=GTM-5MDB7HJ ）可能会被墙，需要本地缓存这个gtm.js脚本，在全局的页脚加载本地缓存的js文件；
• 加载的GTM脚本可能影响网页前端加载速度，测试看到，文件大小在22KB左右，加载时长为200~300ms内。
  对比其他代码管理系统的优势
• 免费： 相比于市面上有很多标签管理系统，但是其中大多数是付费的，而GTM是免费的。
• 部署简易： 部署就像创建标签和触发条件并单击“Publish”按钮一样容易。
• 易于测试和调试： 借助“Preview and Debug”控制台，测试和预览标签和设置非常容易。很少有标签管理系统提供此功能。
• 版本控制： 每次在容器中发布新更改时都会创建一个新版本。而且，如果你想还原它或返回到以前的版本，则始终可以通过GTM发布较旧的版本。

使用门槛

1. 由于GTM是Goolge 旗下产品，故需要有一个Google账号，并且使用时需要翻墙；
2. 需要懂一些js代码和正则相关的知识。

GTM 使用介绍

简单介绍一下在目标网站或应用上，使用GTM管理代码的实现过程。

使用GTM的准备工作

• (1) 创建GTM账号
  在已有Google账号的前提下，访问GTM地址（https://tagmanager.google.com/#/ ），需要先创建一GTM个账号（一个企业有一个账号就够了），然后就是设置容器，一个账号下可以有多个容器，每个容器对应一个域名（不带“/”）
  
  容器使用位置有四种类型（如下图所示），根据需要管理代码的应用的实际情况来选择；在所有信息填写完毕后点击”创建“即可；
  
• GTM基础代码部署
  在完成上一步的GTM账号创建后，会弹出一个代码安装器的脚本；联系网站开发人员，找到网站模板页的头部，将上面的两段跟踪代码按要求添加上去即可；
  
• (3) 验证GTM代码部署是否成功
  验证GTM代码部署是否成功很简单，清除缓存，打开F12，重新加载该网页，如果部署成功会发现有名字带有“gtm.js"的GTM脚本被成功加载，如下图所示：
  以上就完成网站上的GTM基础代码的部署，此时就可在GTM界面上动态创建脚本代码，测试、调试，并且将代码添加到相应的页面（成功部署GTM基础代码的网页）上去。
  

GTM 界面简介

• 工作区：就是GTM容器的操作界面了,这个页面是GTM的核心，是GTM主要操作设置位置。
• 版本：容器发布的版本记录，可以知道谁什么时候发布了版本，以及做了哪些修改。
• 管理：管理GTM账号和容器。

GTM 的几个主要核心概念

如上图左边菜单栏的绿色框所示：

1) 代码

代码（Tag）是控制向目标网页添加的代码段，一个代码至少有一个触发器结合使用。
GTM提供很多提供了强大的代码模板系统（例如适用于 GA\AdWords的 Google代码模板）；
如果模板不支持您希望部署的代码，可以创建自定义图片代码或自定义 HTML 代码。利用自定义代码，可以通过 GTM部署几乎所有的代码。
需要说明的是，通过GTM去发布的代码，在目标网页上它们是异步加载的，但是可以在“配置代码”时，使用“高级设置”来设定代码执行顺序。

1. 高级设置
   高级设置可以使用代码触发选项控制代码触发优先级、触发方式和触发顺序。

• 触发优先级是指优先级更高的代码会先触发。如果未指定优先级，则默认为 0。代码仍会以异步形式触发，即：无论上一个代码是否完成，下一个代码都会正常触发。触发优先级中还可以控制代码的生效时段。
• 触发方式可以设置为“触发次数不受限制”、“每个事件触发一次”和“每次网页加载触发一次”；
• 触发顺序设置在“高级设置”→“代码触发顺序”中，可以控制代码在某些代码触发之前之后才触发，表示这个代码要在另一个代码之前之后触发才有可能触发此代码，这个是与触发优先级最大的区别。

2) 触发器

简单的说就是一组行为触发的条件规则，满足条件的行为才会被触发；也就是用户行为要触发代码前，需要达到触发器设置的条件规则才能执行。

触发器类型：
所有在跟踪代码管理器中触发的代码均由事件驱动。事件可以是网页浏览、按钮点击、表单提交或者是任何自定义事件，详见：https://support.google.com/tagmanager/topic/7679108?hl=zh-Hans&ref_topic=7679384

常用的两种触发器：

1. 网页浏览
   触发器中网页浏览类型有3种，分别是DOM已准备就绪、窗口已加载和页面浏览。其中比较常用的是页面浏览。
   在配置GA默认跟踪代码时候选用的All Pages就是指所有的网页浏览了。
2. 单击
   原则上，只要有GA基础跟踪代码的页面的单击都是可以通过GTM跟踪到的。单击分为两种，一种是有链接的单击，这种表示单击后页面会跳转走；一种是所有元素单击，包含第一种的所有单击。
   有链接的单击设置的时候有两个选项，如图3-20所示，一个是“等待代码触发完毕”，这个是表示事件触发成功后或一定时间超时后才跳转其他页面，确保事件被跟踪到；一个是“检查验证结果”，表示页面有效跳转的才触发时间，确保成功的跳转才跟踪。

用户单击的时候，GTM会将单击最近的元素填充到以下变量，这也就是为什么在定位用户单击位置的时候需要查看页面的元素，需要注意，下面的这些变量要在触发器能够使用，还需要在变量中的内置变量中将其勾选，GTM默认是没有启用这些变量的：

注意：在做单击事件的时候要有一个必须的规则，那就是需要限定单击事件触发的URL，如果是所有页面都可以触发这个事件：PageURL 匹配正则表达式(.*)，如果只是在特定的页面上触发，那么Page URL就要严格限制为该页面。

3) 变量

变量存储一些值，主要用于代码和触发器中的设置。

跟踪代码管理器变量用在触发器和代码中：
• 触发器中的变量用来定义指定特定触发器应在何时触发的过滤条件。
示例：当 url 变量为“example.com/index.html”时触发网页浏览触发器。
• 代码中的变量用来捕获动态值。
示例：捕获交易价值和所购产品并将其应用到转化跟踪代码。

变量类型：

变量分为内置变量和用户自定义变量：

1. 内置变量
   内置变量是指一系列预先设定且不可自定义的特殊变量，要使用的时候，您需要将其勾选开启，不同容器类型的内置变量不同的，如：
   Click Element（点击元素）：访问 dataLayer 中的 gtm.element 键，由“点击”触发器设置。这是对发生点击的 DOM 元素的引用。
   Click Classes（点击类）：访问 dataLayer 中的 gtm.elementClasses 键，由“点击”触发器设置。这是被点击的 DOM 元素的类属性之字符串值。
   详细内置变量的介绍见：https://www.cnblogs.com/ichdata/p/11721247.html
   内置变量中使用比较多的是网页和单击这两个模块的变量，其中单击就是前面触发器里面讲到的用户单击的时候GTM会自动填充的变量，这两类变量在部署GTM的时候将其全部勾选开启。
   其他的内置变量就比较少用了，根据个人需求去开启。

2. 自定义变量是GTM提供一些变量的格式，根据根据自己的需要去创建。

官方文档：https://support.google.com/tagmanager/topic/9125128?hl=zh-Hans&ref_topic=7683268

GTM中用户自定义变量提供了5中大类19个变量类型，5大类分别是导航、网页变量、DOM变量、实用工具和容器数据，其中常用的是网页变量和使用工具，如表3-8所列：

• (a) JavaScript变量
  这个的作用是将页面中的全局变量读取进GTM，如在页面上有这样一段代码：

  <script> userID=“[email protected]”; </script >

  那么就可以通过JavaScript变量将UserID读进GTM里面，在GTM中选择“变量”→“用户定义变量”→“JavaScript变量”

• (b)自定义javaScript
  该值设置为 JavaScript 函数的结果。JavaScript 的形式必须是可返回值的匿名函数；
  见GTM例子……

• © 数据层变量
  这个是用于接收数据层变量的，例如数据层的格式是：
  dataLayer.push({'event': 'qxPage'，'data1': 'a', 'data2': 'b'})

  里面的data1和data2就是数据层变量了，对应的值分别是a和b，要接收a和b就需要用到数据层变量，在GTM中选择“变量”→“用户定义变量”→“数据层变量”

• (d) 第一方 Cookie
  这个的作用是将主域下面的Cookie抓取到GTM里面；

• (e) 常量
  常量就是将一个固定的值用变量存储，后续在触发器和代码中直接使用这个变量，如果要修改直接修改该变量的值就可以

4) 数据层

gtm脚本运行时会创建一个dataLayer的全局对象, dataLayer实际是是一个数组, 你可以通过dataLayer.push()来添加相关的数据, 可以很方便的在gtm variable里面获取到。
在GTM的文档中，数据层是用来收集网站数据的。GTM可以直接在页面的html中通过js遍历html dom提取数据。

使用数据层的原因：
GTM可以直接在页面的html中通过js遍历html dom提取数据，默认情况下，GTM是通过页面的html提取数据，再把它推送带营销或分析的标签中。为了解决HTML可能频繁变更的问题，我们创建和使用数据层，存储我们想要收集关于 web 页面的所有信息。一旦设置了一个数据层，容器标签从其 HTML 页面的数据层提取数据。

官方文档：https://developers.google.cn/tag-manager/devguide

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

配置代码

在了解上述GTM的几个核心概念后，就可以开始进行代码配置了；以配置网站的自定义：

• 在GTM中单击“代码”→“新建”→“选择一个代码类型以开始设置”（这里选择“自定义HTML”）；
  
  
• 然后将将自定义代码复制黏贴进入，默认触发器选择All Pages（如果暂时还没有新建），点击“保存”按钮;

通过上述步骤就完成了代码的简单配置；在实际使用时，只要根据需要选择不同的代码类型、新建不同的触发器同时利用变量设置其触发条件，来完成配置满足需求的代码。

注意：务必要将此数据层代码段放置在容器代码段上方。
要设置数据层，请与开发者合作将以下代码段添加到您网页的 部分，放置在容器代码段上方：
<script> dataLayer = []; </script>

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

代码的预览和调试

在完成上述代码配置后，需要测试和调试对应的代码是否促发，数据返回正确与否，特别是有代码使用js的时候，会往网页注入代码，因为这段代码是和页面代码一样运行的，如果错误可能会导致站点崩溃；GTM提供一种线上环境调试方法可以在代码发布前进行线上调试，具体操作步骤如下：

• 通过点击GTM界面上的”预览“按钮，GTM会在“工作区概览”页面顶部显示一个横幅，指示当前处于“预览模式”；
• 然后刷新目标网页，目标网页会出现如下图所示的调试控制台。
  
  此调试控制台显示有关添加代码的详细信息，包括代码的触发状态以及正在处理的数据，可确定代码和触发器是否正常触发，以及它们向各自的服务传递了哪些数据。当点击到达预览的网站时，调试控制台将更新有关代码触发状态的信息。可以通过这些信息了解代码是否成功触发及其触发状态的触发（或不触发）因素。

调试控制台的功能介绍

顶部的导航栏列出了代码、变量和数据层，左侧导航栏则显示事件列表。

• 代码：点击“代码”可查看哪些代码已触发、哪些代码未触发。点击某个代码可查看该代码的属性以及关联的触发器。在左侧栏中选择某个事件后，“代码”标签将显示该事件的代码状态。
• 变量：“变量”标签将显示所选事件中的变量的详细信息，包括变量类型、返回的数据类型以及解析值。从左侧导航栏中选择某个事件，可查看该事件触发时变量的状态。
• 数据层：“数据层”标签将显示针对选定事件推送到数据层的确切消息，以及消息事务完成后数据层的状态。从左侧导航栏中选择某个事件，可查看该事件触发时数据层的状态。
  如下图所示：
  

代码发布及版本管理

在通过代码预览调试后确定代码可以正常触发无误，在GTM界面点击“退出预览模式”后，并点击右上角的“提交”按钮，即可完成发布一个新版本代码到线上环境去，使其在目标网站或移动应用中生效。
GTM会保存发布历史记录，因此可以查看各个版本生效的时间以及发布者；并且提供版本管理功能，如果不小心发布了某个计划外或者有问题的容器版本，可以将该工作区恢复到之前的版本，并发布该版本。

用户和权限管理

GTM界面的【管理】—》【用户管理】
利用 Google 跟踪代码管理器，您可以在帐号级别和容器级别向其他用户授予权限。在帐号级别，您可以向用户授予查看或管理其他用户的权限，而在容器级别，则可以向用户授予读取、修改、审批或发布权限。

1. 帐号权限
   帐号级别的帐号权限可以设置为管理员或用户。您也可以在“容器权限”表格中精细调整特定容器的权限。
2. 容器权限
   可按容器分配访问权限。对于特定的容器，可为用户分配以下权限：
   • 无访问权限：用户无法看到帐号中列出的容器。
   • 读取：用户可以看到列出的容器，并且可以浏览容器中的代码、触发器和变量，但是无法做出任何更改。
   • 修改：用户有权创建工作区，并进行修改，但是不能创建版本，也不能发布。
   • 批准：用户有权创建版本、工作区，并进行修改，但是不能发布。
   • 发布：用户具有全部权限，可创建版本、工作区，并进行修改和发布。
     
     参见：https://support.google.com/tagmanager/answer/6107011?hl=zh-Hans&ref_topic=9001797