Google Tag Manager入门

GTM基础 GA小站 7461次浏览 已收录 5个评论

目录

1、什么是GTM
2、什么是标签
3、使用GTM的好处
4、GTM的容器标签
5、GTM Tag工具解析
6、GTM账号管理结构
7、GTM账号和容器的命名规则
8、GTM部署
9、GTM 标签模板介绍
10、GTM 触发器介绍
11、触发触发器
12、阻止触发器
13、GTM变量介绍
14、GTM中的内置变量
15、GTM中的数据层
16、通过GTM部署GA代码
17、迁移标签到GTM
18、GTM常见问题

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

2、什么是标签(便签=便签=代码,有时候我会打错)
标签是一段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管理代码有以下优点,你可以直接控制:

1、代码什么时候必须触发
2、代码什么时间不能触发
3、哪里的代码应该触发
4、哪里的代码不应该触发
5、当代码触发的时候应该执行什么

另外,通过GTM,你将更方便,你可以直接给你的站点增加,删除,开启或关闭代码,也可以跟方便的修改代码的功能。
如果没有使用GTM,你要对代码做调整的时候,你就需要请求开发区做调整,还涉及到代码的版本发布问题,这将大大增加了网站的维护工作。

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

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

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

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

8、GTM部署
部署GTM主要有以下几个步骤:
1、登录GTM账户
2、点击主页上的“create new account”,通常来说每个公司只需要一个GTM账户
Google Tag Manager入门
3、为你的GTM账户命名,通常可以是公司名字,点击与公司共享匿名数据后点击继续
Google Tag Manager入门
4、为容器标签命名,通常可以是站点名字
Google Tag Manager入门
5、接受谷歌的协议政策后点击yes
Google Tag Manager入门
你现在就创建了一个容器了
6、复制GTM跟踪代码添加到站点每一个页面的body处
Google Tag Manager入门
你将会看到GTM的界面是:
Google Tag Manager入门

9、GTM 标签模板介绍
标签模板将使管理你站点的标签更方便,GTM提供数十种标签模板,在容器的“Workspcaec”中的tag中点击”new”,新建标签:
Google Tag Manager入门
你将会看到如下可用的GTM标签模板:
Google Tag Manager入门
如果你要创建和使用自己的代码,你可以创建“Cuntom HTML Tag”或”Custom Iamge Tag”:
Google Tag Manager入门

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

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

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

这个触发器只有在url是abc.com/cart/thankyou.html才触发标签
触发型触发器还有两种分类:
1、内置触发器
2、用户自定义触发器
下面是内置触发器:

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

下面是自定义触发器:

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

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

13、GTM变量介绍
变量通常用于存储数据,当触发器触发的的时候就传输数据
变量可以告诉GTM哪里触发标签
例如:

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

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

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

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

14、GTM中的内置变量
GTM的内置变量有如下类别:
Google Tag Manager入门
内置变量是预处理变量,这些变量更容易设置便签和触发器。当你创建一个新的容器的时候,你可以看到少部分的内置变量,如page URL, page hostname, page path, and referrer,这些变量是已经开启的,你可以内置变量中选择你需要用到的变量,直接在前面打钩就是,一旦选择就是直接使用。
GTM中的用户自定义变量
下面是GTM中的用户自定义变量
Google Tag Manager入门
建议自定义变量的名称命名用便于区别的方式命名。

15、GTM中的数据层
数据层是用收集,存储和发送网站数据到容器代码的一段js数组
谷歌官方推荐使用数据层去接受数据,更多信息可以看:Google Analytics教程:Google Tag Manager中的数据层解析

16、通过GTM部署GA代码
Google Analytics 教程:GTM部署GA默认代码
Google Analytics 教程:GTM debug

17、迁移标签到GTM
现在你知道怎么通过GTM去新建和发布代码,可以将网站现有的一些跟踪迁移到GTM

18、GTM常见问题
Q:GTM是否需要会编程
GTM原则上不需编程,但是会编程将是你更容易理解GTM的原理和规则

来源:https://www.optimizesmart.com


GA小站, 版权所有丨如未注明 , 均为原创

转载请注明标题:Google Tag Manager入门
链接:https://www.ichdata.com/google-tag-manager-introduction.html

喜欢 (4)
[hyz1100@126.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. WOW just what I was searching for. Came here by searching for google tag manager入门
    Сialis2019-04-02 12:12 回复
  2. 然而一堵墙,一切都白搭
    aab@bfp.com2019-01-16 15:21 回复
    • GA小站
      收集数据的服务器是在北京的,看报告要科学上网
      GA小站2019-01-17 18:16 回复
  3. 额, 文字错误有点多
    雕刻2017-12-20 22:20 回复
    • GA小站
      会有错别字的
      GA小站2017-12-21 09:27 回复