Google Tag Manager入门

什么是GTM

GTM是谷歌提供的免费的标签管理工具，通过这个在线工具，你可以在你的站点或APP上管理和发布不同的营销和分析代码。

什么是标签（便签=便签=代码，有时候我会打错）

标签是一段js代码，用于收集你的站点或APP的测量和营销收据，当触发的时候发送给第三方服务器。第三方服务标签，如谷歌分析，谷歌广告，推特，脸书等，下面就是谷歌分析的跟踪代码：

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

下面是ad转化代码：

<!-- Google Code for Test Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 928804124;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "wceHCILzjGQQ7drxugM";
var google_conversion_value = 100.00;
var google_conversion_currency = "GBP";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/928804124/?value=100.00&amp;currency_code=GBP&amp;label=wceHCILzjGQQ7drxugM&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

下面是Facebook跟踪代码：

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');

fbq('init', '879030082151151');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=879030082151151&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

其他各种的跟踪代码有：百度跟踪代码，firebase跟踪代码

正如你所见，跟踪代码就是一段js，你可以将这段代码添加到你的站点上，你可以将这段代码保存成一个临时文件，然后每个页面都引入，也可以通过GTM直接加入。

通过GTM管理代码有以下优点，你可以直接控制：

代码什么时候必须触发
代码什么时间不能触发
哪里的代码应该触发
哪里的代码不应该触发
当代码触发的时候应该执行什么

另外，通过GTM，你将更方便，你可以直接给你的站点增加，删除，开启或关闭代码，也可以跟方便的修改代码的功能。

如果没有使用GTM，你要对代码做调整的时候，你就需要请求开发区做调整，还涉及到代码的版本发布问题，这将大大增加了网站的维护工作。

使用GTM的好处

使用GTM有下面几个主要的好处：

GTM中对网站代码做调整只是对标签多增删改操作：GTM容器代码能一次性在添加在整个站点的所有页面，整个容器可以存储和发布不同的营销和分析标签，通过GTM的用户交互界面，你只需要点击记下就可以添加，编辑，开启或关闭任何便签，不需要给网站增加大量的硬编码工作就可以直接发布便签到线上。
通过GTM你可以更快的测试和发布代码而不需要在站点上硬编码：如果你需要快速的对营销，搜索应请，社交着陆页做相应，GTM将你的不二选择，你不可能因为你的开发团队很忙而去等待几周，甚至几个月才给增加你所需的代码到你的站点上去。对于大部分的在线电子商务网站而言，他们大量工作都过度依赖于开发，这将使得他们的反应很慢。有了GTM，代码可以再几分钟内被添加，编辑，测试，删除，这意味你将大大节省了时间。
GTM让个性化的跟踪变得成为了可能：使用GTM最大的有点就是：站点的个性化跟踪将变得成为了可能，GTM提供了很多的内置便签和函数，你可以在短时间内就可以实现个性化的跟踪。
同样的工作如果没有GTM可能需要花费几周去实现同样的跟踪，例如你要跟踪站内的外链，你可能就要考虑到底有多少链接可以链接到站外。如果你使用了GTM，你实现这个需求是需要几分钟，没有GTM，你可能需要给每一个外链添加事件跟踪代码，每一次添加存在报错的可能。
GTM让标签管理更有效：当你使用GTM，你可以增加，编辑，开启或关闭，删除网站上的标签，当你管理成千上万的营销或跟踪代码的时候，GTM让便签管理的便捷程度大大提升。
使用GTM，可以提高网站的速度：当你通过GTM去发布标签，它们将异步发布，这意味着较慢的加载代码不会影响其他代码的触发

GTM的容器标签

这面就是个GTM容器代码：

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TXHBPD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/<strong>gtm.js</strong>?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<strong>GTM-TXHBDR</strong>');</script>
<!-- End Google Tag Manager -->

你复制这段代码添加到站点的页面上，必须在body的前面。其中的代码中的‘GTM-TXHBDR’是容器ID，用去区分不同的容器标签，其他的代码容器便签使用的js库，就是’gtm.js’

当这段代码添加上你的站点，GTM就部署上你的站点了，当我们提高在GTM上编码的时候，如GTM推送数据到数据层，这些都是指容器代码。

简答的说：GTM是一个便签容器

如果你添加上容器标签到你的网站或APP，你不需要在你的网站上添加其他的跟踪代码，如GA跟踪代码，FB跟踪代码，你可以直接通过GTM上第三方提供的代码直接添加上述跟踪代码，目前只有Facebook JavaScript SDK不能通过GTM来管理发布。

标签容器使用触发器、变量和数据层来触发站点或APP的标签。

GTM Tag工具解析

如果你把GTM工具当做一辆汽车，那么它的引擎就是标签容器，用户界面就是皮肤，标签容器提供了所有GTM工具需要的功能去管理和发布站点上的标签。用户界面将是操作便签容器跟简便。
当你提到GTM，实际上提到的是标签容器。

GTM账号管理结构

你需要一个谷歌账号去创建GTM账号，一个谷歌账号可以创建多个GTM账号，规则是每个站点使用一个GTM账号，一个账号下面可以有多个容器标签，如
Google Tag Manager入门
对于大部分人来说只有一个站点，是需要建一个就够了，没有那么多的复杂结构

GTM账号和容器的命名规则

为了更好的操作，GTM账号通常以公司命名，容器就以站点名字命名，例如你的公司是aaa，站点是www.ichdata.com，那么GTM账号可以说是aaa，容器名可以是www.ichdata.com

GTM部署

部署GTM主要有以下几个步骤：
1、登录GTM账户
2、点击主页上的“create new account”，通常来说每个公司只需要一个GTM账户
Google Tag Manager入门
3、为你的GTM账户命名，通常可以是公司名字，点击与公司共享匿名数据后点击继续

4、为容器标签命名，通常可以是站点名字

5、接受谷歌的协议政策后点击yes

你现在就创建了一个容器了
6、复制GTM跟踪代码添加到站点每一个页面的body处
Google Tag Manager入门
你将会看到GTM的界面是：

GTM 标签模板介绍

标签模板将使管理你站点的标签更方便，GTM提供数十种标签模板，在容器的“Workspcaec”中的tag中点击”new”，新建标签：
Google Tag Manager入门
你将会看到如下可用的GTM标签模板：

如果你要创建和使用自己的代码，你可以创建“Cuntom HTML Tag”或”Custom Iamge Tag”：

GTM 触发器介绍

触发器就是条件符合的时候便签运行一次，在GTM中，触发器是标签处理的一部分，所以你不可能新建了标签却没有使用触发器。在GTM中有两种方法可以创建触发器，一种是通过新建触发器，一种是通过触发器菜单。
有两种类型的触发器：

触发型触发器
屏蔽型触发器

触发型触发器

触发触型发器只是条件满足的时候，告诉标签执行一次，先GA发送数据。
下面是一个触发型触发器：

{{url}} matches abc.com/cart/thankyou.html

这个触发器只有在url是abc.com/cart/thankyou.html才触发标签
触发型触发器还有两种分类：

内置触发器
用户自定义触发器

下面是内置触发器：

1、所有的PV
2、所有的点击
3、所有的表单
4、所有的历史改变
5、所有的js错误
6、所有的计时器

下面是自定义触发器：

1、部分PV
2、部分点击
3、部分表单
4、部分历史改变
5、部分js错误
6、部分计时器

屏蔽型触发器

屏蔽型触发器只是满足条件的时候触发标签。你可以点击“add Exception”创建屏蔽型触发器
Google Tag Manager入门

GTM变量介绍

变量通常用于存储数据，当触发器触发的的时候就传输数据
变量可以告诉GTM哪里触发标签
例如：

{{url}} matches RegEx .* 表示用户在任意一个页面都触发

这里的{{url}}是内置变量，表示访客当前加载的页面。
变量在运行的时候可以通过下列方式接受数据：

1、数据层（推荐）
2、js变量
3、第一方cookie
4、直接用Dom

在GTM中变量有两种分类：
1、内置变量
2、用户自定义变量

GTM中的内置变量

GTM的内置变量有如下类别：

内置变量是预处理变量，这些变量更容易设置便签和触发器。当你创建一个新的容器的时候，你可以看到少部分的内置变量，如page URL, page hostname, page path, and referrer，这些变量是已经开启的，你可以内置变量中选择你需要用到的变量，直接在前面打钩就是，一旦选择就是直接使用。
GTM中的用户自定义变量
下面是GTM中的用户自定义变量

建议自定义变量的名称命名用便于区别的方式命名。