Google Tag Manager 基础入门(2021)

Google Tag Manager Haran 9年前 (2016-05-04) 8981次浏览 0个评论
文章目录[隐藏]

更新时间:2021-10

GTM页面预览

GTM的界面如下:Google Tag Manager 基础入门(2021)

主要分为三个区域:

  • 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 跟踪代码管理器的计时器触发器,您可以按照定时间隔向跟踪代码管理器发送事件。
  • 自定义事件:用于跟踪您的网站或移动应用上发生的、未按标准方法处理的互动。
  • 触发器组:触发器组会将两个或多个触发器的条件作为一个进行评估。只有在全部选定触发器都至少触发一次之后,触发器组才会触发。

变量

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

内置变量

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

Google Tag Manager 基础入门(2021)

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

网页

  • 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默认已有的内置变量,只需要勾选就开启。

 

用户自定义变量

Google Tag Manager 基础入门(2021)

导航

  • 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。

 


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (8)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址