Google Tag Manager 基础入门（2021）

更新时间：2021-10

GTM页面预览

GTM的界面如下：

主要分为三个区域：

• 1、导航：主要是工作区、版本、管理、预览和提交
• 2、功能：主要是概览、代码、触发器、变量、文件夹和模板
• 3、工作区：呈现配置和变更的一些信息

导航

• 工作区：主要就是配置和呈现信息变更的地方，是配置GTM的主要场所。
• 版本：就是每次发布会生成一个新的版本号，可以在里面回滚版本，如果容器的大小接近限额的75%，还是显示使用的比例
• 管理：主要是授权和账号设置
• 预览：是线上环境的debug，如果在demo环境做debug还需要使用Tag Manager Injector
• 发布：就是发布到正式环境，通常发布一次会生成一个新版本

功能

• 概览：主要是看代码的版本号和谁修改的记录
• 代码：是主要是设置各种tag，满足触发器条件时向GA发送数据，或往页面添加代码
• 触发器：主要是设置促发条件，如特定点击，页面浏览，接收数据层事件等
• 变量：主要是预定义一些基础的字段，如Cookie，常量，抓页面属性，对照表，数据层变量等用于触发器和代码的使用
• 文件夹：主要是项目合并，方便管理
• 模板：自己可以建立一些代码、触发器或变量的模板，用于重复使用。

工作区

这里是配置GTM的地方。

代码

代码的本质是一段JavaScript，它是控制想哪里发送数据和发送数据，代码必须与一个触发器结合使用，才能正常触发，发送数据。GTM上有丰富的代码可以简化第三方代码的布署，代码可以分为：

• 内置：这个是GTM主要的代码，供应商要以公司的兴趣去注册，提交代码审核，所以内置代码是安全上有保障。
• 社区模板：这个是个人形式开发的，以开源的方式提交。

触发器

触发器用于定位代码触发条件，只有触发器触发了，对应的代码才会执行，发送数据。

页面浏览

使用 Google 跟踪代码管理器的网页浏览触发器，可在网络浏览器加载网页时触发代码。基于网页加载事件的触发器有 5 种类型，

• DOM已准备就绪：在浏览器在 HTML 中完成整页构建且文档对象模型 (DOM) 做好解析准备后触发。
• 初始化：应在所有其他触发器（用户意见征求初始化触发器除外）之前触发。
• 用户意见征求初始化：旨在帮助确保先遵循用户意见征求设置，然后再触发其他任何触发器。
• 窗口已加载：在页面（包括图片和脚本等嵌入资源）完全加载后触发。
• 页面浏览：在网络浏览器开始加载网页时立即触发

加载顺序为：用户意见征求初始化——初始化——网页浏览——DOM已准备就绪——窗口已加载。

点击

• 仅链接：点击后是有链接跳转的。
• 所有元素：所有位置的点击。

用户深度互动情况

• Youtube视频：跟踪页面嵌入Youtube视频的播放情况
• 元素可见性：跟踪页面元素可见情况
• 滚动深度：跟踪页面滚动情况
• 表单提交：跟踪表单提交

其他

• JavaScript错误：用来在发生未捕获的 JavaScript 异常 (window.onError) 时触发代码。
• 历史记录更改：可以用来触发对 Ajax 应用中的虚拟网页浏览进行跟踪的代码。
• 定时器：利用 Google 跟踪代码管理器的计时器触发器，您可以按照定时间隔向跟踪代码管理器发送事件。
• 自定义事件：用于跟踪您的网站或移动应用上发生的、未按标准方法处理的互动。
• 触发器组：触发器组会将两个或多个触发器的条件作为一个进行评估。只有在全部选定触发器都至少触发一次之后，触发器组才会触发。

变量

变量就是一个获取和存储值的，可以被代码和触发器引用，变量可以分为内置变量和用户自定义变量。

内置变量

内置变量是一种预先创建且不可自定义的特殊类别的变量。

新容器一开始没有用户定义的变量，而是需要预先启用一些内置变量，点击“配置”就可以可以根据自己的需要快速启用任何其他变量。

网页

• Page URL（网页网址）：提供当前网页的完整网址。Eg:网页网址=网页主机名+网页路径 http://www.ichdata.com/2016/08/tag/analytics
• Page Hostname（网页主机名）：提供当前网址的主机名部分。Eg:www.ichdata.com
• Page Path（网页路径）：提供当前网址的路径部分。Eg:/2016/08/tag/googleanalytics
• Page Referrer（网页引荐来源网址）：提供当前网页的完整引荐来源网址。Eg:主要是包含广告系统的一些广告参数，如www.ichdata.com/2016/08/tag/analytics？id123&PPC=456&ADID=789，能够提供完成的网址URL

实用工具

• Event（事件）：访问 dataLayer 中的“event”键，是当前 dataLayer 事件的名称（如 gtm.js、gtm.dom、gtm.load 或自定义事件名称）。Eg：预定义dataLayer的event，可以再页面促发的时候直接dataLayer.push 事件的形式，用触发器的的自定义事件接受
• Environment Name（环境名称）：如果通过环境“共享预览”链接或通过环境代码段发出容器请求，则返回用户提供的当前环境名称。对于内置环境，将返回“已发布”、“最新”或“正在修改”。在包括非环境容器请求的其他所有情况下，会返回空字符串。
• Container ID（容器 ID）：提供容器的公共 ID（如 GTM-XKCD）。
• Container Version（容器版本）：以字符串的形式提供容器的版本号。
• Random Number（随机数字）：生成一个介于 0 到 2147483647 之间的随机整数。
• HTML ID已启用广告跟踪）：允许自定义 HTML 代码表明其已触发成功或失败；与代码触发顺序结合使用。

错误

• Error Message（错误消息）：访问 dataLayer 中的“gtm.errorMessage”键，由 JavaScript 错误触发器设置。这是一个包含错误消息的字符串。
• Error URL（错误网址）：访问 dataLayer 中的“gtm.errorUrl”键，由 JavaScript 错误触发器设置。这是一个包含出现错误的网址的字符串。
• Error Line（错误行）：访问 dataLayer 中的“gtm.errorLine”键，由 JavaScript 错误触发器设置。这是一个出现错误的网址中的行号。
• Debug Mode（调试模式）：如果容器当前在预览模式下运行，将返回 true。

点击

• Click Element（点击元素）：访问 dataLayer 中的“gtm.element”键，由“点击”触发器设置。这是对发生点击的 DOM 元素的引用。
• Click Classes（点击类）：访问 dataLayer 中的“gtm.elementClasses”键，由“点击”触发器设置。这是被点击的 DOM 元素的类属性的字符串值。
• Click ID（点击 ID）：访问 dataLayer 中的“gtm.elementId”键，由“点击”触发器设置。这是被点击的 DOM 元素的 ID 属性的字符串值。
• Click Target（点击目标）：访问 dataLayer 中的“gtm.elementTarget”键，由“点击”触发器设置。
• Click URL（点击网址）：访问 dataLayer 中的“gtm.elementUrl”键，由“点击”触发器设置。
• Click Text（点击文字）：访问 dataLayer 中的“gtm.elementText”键，由“点击”触发器设置。

表单

• Form Element（表单元素）：访问 dataLayer 中的“gtm.element”键，由“表单”触发器设置。这是对表单的 DOM 元素的引用。
• Form Classes（表单类）：访问 dataLayer 中的“gtm.elementClasses”键，由“表单”触发器设置。这是表单的类属性的字符串值。
• Form ID（表单 ID）：访问 dataLayer 中“gtm.elementId”键，由“表单”触发器设置。这是表单的 ID 属性的字符串值。
• Form Target（表单目标）：访问 dataLayer 中的“gtm.elementTarget”键，由“表单”触发器设置。
• Form URL（表单网址）：访问 dataLayer 中的“gtm.elementUrl”键，由“表单”触发器设置。
• Form Text（表单文字）：访问 dataLayer 中的“gtm.elementText”键，由“表单”触发器设置。

历史记录

• New History Fragment（新历史记录片段）：访问 dataLayer 中的“gtm.newUrlFragment”键，由“历史记录更改”触发器设置。这是发生历史记录事件后相应网页网址的片段（即哈希）部分的字符串值。
• Old History Fragment（旧历史记录片段）：访问 dataLayer 中的“gtm.oldUrlFragment”键，由“历史记录更改”触发器设置。这是发生历史记录事件前相应网页网址的片段（即哈希）部分的字符串值。
• New History State（新历史记录状态）：访问 dataLayer 中的“gtm.newHistoryState”键，由“历史记录更改”触发器设置。这是网页推送到历史记录以触发历史记录事件的状态对象。
• Old History State（旧历史记录状态）：访问 dataLayer 中的“gtm.oldHistoryState”键，由“历史记录更改”触发器设置。这是发生历史记录事件前处于活动状态的状态对象。
• History Source（历史记录来源）：访问 dataLayer 中的“gtm.historyChangeSource”键，由“历史记录更改”触发器设置

视频

• Video Current Time（视频当前时间）：访问 dataLayer 中的 gtm.videoCurrentTime 键，是一个整数，表示视频中事件的发生时间（以秒为单位）。
• Video Duration（视频持续时间）：访问 dataLayer 中的 gtm.videoDuration 键，是一个整数，表示视频的总时长（以秒为单位）。
• Video Percent（视频百分比）：访问 dataLayer 中的 gtm.VideoPercent 键，是一个整数 (0-100)，表示事件发生时已播放的视频所占百分比。
• Video Provider（视频提供商）：访问 dataLayer 中的 gtm.videoProvider 键，由“YouTube 视频”触发器设置。这是视频提供商的名称，即“YouTube”。
• Video Status（视频状态）：访问 dataLayer 中的 gtm.videoStatus 键，表示检测到事件时视频所处的状态，如“play”、“pause”等。
• Video Title（视频标题）：访问 dataLayer 中的 gtm.videoTitle 键，由“YouTube 视频”触发器设置。这是视频的标题。
• Video URL（视频网址）：访问 dataLayer 中的 gtm.videoUrl 键，由“YouTube 视频”触发器设置。这是视频的网址，如“https://www.youtube.com/watch?v=gvHcXIF0rTU”。
• Video Visible（视频可见）：访问 dataLayer 中的 gtm.videoVisible 键，由“YouTube 视频”触发器设置。如果视频在视口中可见，则设置为 true，如果视频未在视口中显示（例如，不在首屏或在后台标签中播放），则为 false。

滚动

• Scroll Depth Threshold（滚动深度阈值）：访问 dataLayer 中的 gtm.scrollThreshold 键，由“滚动深度”触发器设置。这是一个数值，用于表明导致触发器触发的滚动深度。对于百分比阈值，将是一个范围为 (0-100) 的数值。对于像素，此数值表示被指定为阈值的像素数。
• Scroll Depth Units（滚动深度单位）：访问 dataLayer 中的 gtm.scrollUnits 键，由“滚动深度”触发器设置。其值为“像素”或“百分比”，表示为触发器触发阈值指定的单位。
• Scroll Direction（滚动方向）：访问 dataLayer 中的 gtm.scrollDirection 键，由“滚动深度”触发器设置。其值为“垂直”或“水平”，表示触发器触发阈值的方向。

公开范围

• Percent Visible（可见百分比）：访问 dataLayer 中的 gtm.visibleRatio 键，由“元素可见性”触发器设置，是一个数值 (0-100)，表示当触发器触发时，有多少百分比的所选元素可见。
• On-Screen Duration（在屏显示时长）：访问 dataLayer 中的 gtm.visibleTime 键，由“元素可见性”触发器设置，是一个数值，表示当触发器触发时，所选元素在多少毫秒内保持可见。

上面是GTM默认已有的内置变量，只需要勾选就开启。

用户自定义变量

导航

• HTTP引荐来源网址：上一级页面来源。
• 网址：当前页面，可供选择的网址组成部分包括协议、主机名、端口、路径、查询、片段和文件扩展名。

网页变量

• JavaScript变量：抓取页面的全局变量，如Userid，ABtest时分类的标示字段
• 数据层变量：接受数据层里面的变量
• 第一方Cookie：获取当前域名第一方Cookie的值，如有多个同名cookie，则获取第一个。
• 自定义JavaScript：可以使用js去对一些变量做计算，然后返回值

页面元素

• DOM元素：获取DOM元素文字或属性的值
• 元素可见性：设置DOM元素的可见状态
• 自动事件变量：捕获有关触发事件（例如，点击、表单提交、元素可见性等）的项目的信息

实用工具

• Google Analytics（分析）设置：Google Analytics一些基本设置，能重复使用。
• 对照表：主要用于ga-data和大量event的解析转义，如表单分析中有很多需要用户填的表框，不同位置用一个数值表示，用户点击的时候就会将该数据发送回来，对照表将数值与具体的行为对应，输出。
• 常量：定义一个常量，如代码中经常需要使用的ga tracking id可以定义为常量，后续直接选择该常量就行
• 未定义的值：JavaScript中Undefined值。
• 正则表达式表格：正则表达式表格变量类似于对照表变量，除对照表的功能外，它还可以针对您希望匹配的项运行正则表达式模式
• 环境名称：返回在预览模式下查看的环境的名称。
• 自定义事件：该值设置为推送到数据层的自定义事件的名称。
• 随机数字：该值设置为介于 0 到 2147483647 之间的一个随机数字。

容器数据

• 容器ID：返回跟踪代码管理器容器的 ID，例如“GTM-101010”。
• 容器版本号：当容器处于预览模式时，容器版本变量会返回容器的预览版本号。在其他情况下，此变量将返回容器的实际版本号。
• 调试模式：如果容器处于预览和调试模式，则该值设置为 true，否则设置为 false。