Google Tag Manager上手

简介

Google Tag Manager包含三个主要部分：

Tag：添加到页面的代码
Trigger：决定哪些代码能触发
Variable：用于接收和存储数据，被Tag和Trigger使用
https://tagmanager.google.com

在Google Tag Manager之前，添加js代码是需要在页面硬编码，换句话说，你需要让你的开发区给你往页面添加事件跟踪。需要添加一个事件跟踪，如果是一个紧急需求，但是你们最近又没有发版的计划，那你的时间跟踪就不可能被实现。
现在，Google Tag Manager给你一个友好的操作，直接可以创建代码，测试，并且将代码添加到页面上去。

变量

变量是“名称-值”对，其中的值在运行时填充。
假设您希望每当访问者在您网站上的花费超过 100 美元时便触发 Google 展示广告网络再营销代码。为实现此目标，您需要创建一个网页浏览触发器并添加以下触发条件：

    Transaction Amount greater than $100

由于变量“Transaction Amount”不存在，因此您需要定义该变量。您需要告诉 Google 跟踪代码管理器应在 JavaScript 变量 transactionAmt 中查找“Transaction Amount”的值（假设此 JavaScript 变量位于您网站上的购买确认页中）。
在运行时，Google 跟踪代码管理器将从指定的 JavaScript 变量中获取“Transaction Amount”的值，然后上述触发器将评估该值是否大于 100 美元。

变量类型（网站）

第一方 Cookie：该值设置为名称与用户当前所在网域匹配的第一方 Cookie。如果在同一个网域中的多个路径或多个网域级别部署了具有相同名称的 Cookie，系统会选择第一个值。
常量字符串：该值设置为您提供的字符串。因为此字符串永远不变，始终是您在此处提供的字符串，所以“常量字符串”变量类型在实用性方面会受到限制。
容器版本号：当容器处于预览模式时，容器版本变量会返回容器的预览版本号。在其他情况下，此变量将返回容器的实际版本号。
自定义 JavaScript：该值设置为 JavaScript 函数的结果。JavaScript 的形式必须是可返回值的匿名函数。例如，您可以编写一个名为“lowerUrl”并作用于预定义的 { {url}} 变量的自定义 JavaScript 变量：

function () {
  return {
   
   {url}}.toLowerCase();
}

数据层：以下代码在您的网站上执行时，该值设置为“value”：dataLayer.push({‘Data Layer Name’: ‘value’})
JavaScript 变量：该值设置为您指定的全局变量。如果您要查找的值并未在数据层（请参阅上文中的“数据层”变量类型）中设置，而且未出现在 DOM（请参阅“DOM 元素”变量类型）中，则有可能通过 JavaScript 变量获取该值。如果您可以在网页的源代码中找到所需值，且该值采用 JavaScript 变量的形式，请使用此变量类型。

网站容器的内置变量

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 键，由“点击”触发器设置。

触发器

“触发器”是指在运行时求值结果为“true”或“false”的条件。附加到代码的触发器用于控制该代码在何时触发或不触发。代码必须至少有一个触发器才能触发。系统会在运行时对触发器进行评估，并在满足触发器条件时触发（或不触发）关联的代码。例如，某代码关联的触发器基于网页浏览事件和以下过滤条件，该代码将在 example.com 首页上被触发

    url equals example.com/index.html

触发器由一个事件以及一个或多个过滤条件构成（自定义事件除外，它无需过滤条件）。每个过滤条件都采用以下格式：[变量] [运算符] [值]。
变量可以选择 url、referrer 等。运算符可以选择 equals、contains 等。值由我们提供一个值，Google 跟踪代码管理器会将您提供的值与变量中的运行时值进行比较。
在网站容器中，可以启用“page url”、“page hostname”或“referrer”等内置变量。此外，在设置基于点击的触发器时，Google 跟踪代码管理器使用内置变量来自动填充与所点击的元素 ID、类等对应的变量。利用这些变量，可以构建最常用的触发器。

触发器类型

所有在跟踪代码管理器中触发的代码均由事件驱动。事件可以是网页浏览、按钮点击、表单提交或者是任何自定义事件。跟踪代码管理器包含 6 个内置事件类型以及一个自定义事件选项。设置触发器的第一步是选择与触发器相关的事件类型。内置事件包括这几种：

网页浏览（网站）

此事件与用户浏览器中的页面呈现相对应。您可以通过触发器类型下拉菜单进一步配置此事件，以通知跟踪代码管理器在以下三种情况下是否应立即触发代码：浏览器开始解析页面时（网页浏览）；浏览器完成完整页面 DOM 的构建后（DOM 已准备就绪）；页面（包括图片和脚本等嵌入资源）完全加载后（窗口已加载）。如果您的代码使用 DOM 或 JavaScript 变量采集动态值，调整基于网页浏览的触发器的计时会很有帮助。

扫描二维码关注公众号，回复： 11757152 查看本文章

点击（网站）

要在用户点击某个链接或页面的某个元素时触发代码，请选择“点击”事件类型。
例如，如果在 www.example.com/cart.html 页面上有一个包含以下标记的按钮：

    <button type="submit" id="cart-add" class="addToCart" >添加到购物车</button>

当用户点击该按钮时，以下触发器配置将会触发代码：

触发器类型：点击 - 所有元素
此触发器的触发条件：某些点击
点击 ID 等于 cart-add
网页网址包含 example.com/cart.html

由于点击链接通常会导致浏览器加载新页面，并中断所有待处理的 HTTP 请求，因此您可以选择添加一个短暂的延迟，以使跟踪代码管理器触发的代码能够在重定向到下一页面之前得到正确执行

表单提交（网站）

要在用户提交表单时触发代码，请选择“表单”作为触发器事件。
我们建议您在触发器过滤条件中指定您希望用户执行表单提交操作所在的网页的网址（或网址格式），以便优化跟踪代码管理器的性能。

历史记录更改（网站）

如果网址片段（哈希）发生更改或网站使用 HTML5 pushstate API，基于历史记录更改事件的触发器将会触发代码。例如，此触发器可以用来触发跟踪 Ajax 应用中的虚拟网页浏览的代码。

自定义事件（网站和移动应用）

自定义事件用于跟踪您的网站或移动应用上发生的不是由标准方法处理的互动。最常见的用例是，您希望跟踪表单提交，但该表单的默认行为已重新路由（例如，提交浏览器事件已被覆盖）。
添加将在用户点击按钮时将该事件推送到数据层中的代码。

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

创建跟踪代码。在新代码设置的触发器配置部分中，使用以下设置创建一个新事件：

触发器类型：自定义事件
事件名称：button1-click
此触发器的触发条件：所有自定义事件

当用户点击按钮时，一个值为“button1-click”的自定义事件将被推送到数据层。然后，跟踪代码管理器检测到“button1-click”（作为自定义事件的值），从而触发代码。

数据层

数据层简单的数就是用于存储或发送信息给GTM的一个js数组。

    //定义一个空数据层：
    dataLayer = [];
    //定义一个包含变量的数据层：
    dataLayer = [{
        'pageCategory': 'Statistics',
        'visitorType': 'high-value'
    }];

数据层用于 GTM 通常是对象的数组︰ dataLayer = [{}…];

为什么我们需要数据层

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