Skip to content

Google代码管理器101

什么是Google代码管理器(Google Tag Manager,GTM)?它跟谷歌分析(Google Analytics,GA)有什么分别?怎么使用谷歌代码管理器部署事件追踪?应该怎么开始着手学习这个工具?

简介

谷歌代码管理器本质上是代码管理工具(Tag Management System),用于存放和管理网站追踪代码的工具。

谷歌分析是网站数据分析系统,要让谷歌分析生效,需要在页面上部署一段js代码,我们完全可以借助谷歌代码管理器进行谷歌分析代码的部署。此外,我们还能部署其他代码,包括但不限于Facebook像素、CrazyEgg热图、谷歌广告转化追踪、增强型电子商务等。

任何新的知识、工具都有学习曲线;谷歌代码管理器的掌握根据学习者的知识储备(例如谷歌分析、HTML与js编程等),学习曲线各有不同。希望这篇博客能够帮助初学者好好认识这个工具,打开网站埋点的大门。

0基础HTML与js编程不会影响本篇博客的阅读。

什么是谷歌代码管理器?

想象谷歌代码管理器是一个工具箱,谷歌分析代码是尺子,谷歌广告再营销代码是起子,CrazyEgg热图代码是体温计等等。

同时,谷歌代码管理器自带的preview mode可以在发布前进行测试;另一方面,谷歌代码管理器里面的任何修改不会影响网站的源代码,只需要轻点发布,就能够完成版本迭代更新。而且所有GTM内部的代码部署和改动并不会影响网页的其他源代码,这会极大的减少网站开发的工作量。

许多初学者会问,到底是用GTM还是GA呢?答案是应该一起用,它们两者不是替代品的关系而是互补品的关系。GA是用于收集,展示和分析数据的工具,而GTM更像是一个数据中转站,它能够抓取用户与网站的互动并且将数据传递给GA(GTM本身并不存储数据)。

除了GA追踪代码,GTM还能部署包括但不限于以下常用追踪代码:

为什么要用GTM?

Reason 1. 快速部署追踪代码

  1. GTM内置很多追踪代码,填写tracking id或者简单的配置即可集成
  2. 相比传统的网站埋点,不需要经过网站开发修改源代码,直接在GTM内部,配置-调试-发布,即可

上个月我项目组要部署抖音广告代码,也可以通过GTM一键部署!GTM是目前使用较广泛的代码管理系统,因此第三方追踪代码会优先适配GTM进行一键配置。

GTM可以一键配置的代码类型
GTM可以一键配置的代码类型

Reason 2. 所有追踪代码在一处进行控制管理

在代码管理系统被投入使用以前,所有埋点都是Hard coded在网页源代码中,会造成管理的混乱,非常不利于网站的版本管理。

Reason 3. 自带debug工具

担心追踪代码部署错误,担心会影响页面元素?GTM自带的debug(preview)mode可以做发布前的测试,确保万无一失。

GTM自带debug模式,可以调试埋点的正确性
GTM自带debug模式,可以调试埋点的正确性

Reason 4. 活跃的社区

GTM是一个免费的工具,但是不要担心没有人帮你解决代码部署遇到的问题,有很多国内外的博主,FB社群等,他们在无私的分享他们的经验和帮助人们解决问题。

我常访问的GTM博客和社群:
https://simoahava.com
https://www.analyticsmania.com
https://www.thyngster.com
https://www.facebook.com/groups/329145737601165

Reason 5. 版本控制

GTM自带出色的版本管理,每一个版本的代码设置都有记录,当你想回退到某个版本时,选择它,激活即可。GTM还自带不同的container,让你能够导入和导出GTM配置,更方便的学习和分享GTM配置。

如何理解GTM的基本元素(Tag,Trigger,Variable,DataLayer)

当你要立志熟悉并掌握GTM,这四个基本组成元素是你需要理解的。

Tag代码

Tag是在网站上经过某特定条件下会触发的代码。例如某按钮点击的追踪代码,当该按钮被点击时,这个追踪代码就会触发。

Trigger触发器

顾名思义,就是触发代码的条件,接上文,“按钮被点击”就可以作为触发器。

变量Variable

变量可以用在代码和触发器中,例如点击事件的category、action、label、value都是变量传递给GA记录;点击事件的click class,click id,click text等可以作为变量判断点击事件是否能够触发触发器。

DataLayer数据层

GTM可以读取数据层中的值,并将它们传递给代码、触发器和变量。数据层由键值对组成,例如:

如何正确的安装GTM?

在正确的位置安装GTM
在正确的位置安装GTM

如果站点是WordPress,Shopify或其他建站平台,一般来说都有相应的工具、插件来集成GTM,例如WordPress的GTM4WP。

创建第一个代码

通常,我们要创建的第一个GTM代码就是GA页面查看追踪代码。如果我们不用GTM,那么就要按照GA后台的指引,跟GTM的安装一样,复制粘贴代码到指定的位置。

如果不用GTM,怎样安装GA追踪代码?
如果不用GTM,怎样安装GA追踪代码?

应用GTM我们怎么安装GA代码呢?

进入GTM用户界面,到代码目录,点击新建。

进入GTM用户界面,到代码目录,点击新建。
进入GTM用户界面,到代码目录,点击新建。
在弹出的界面中,点击代码配置,选择GA
在弹出的界面中,点击代码配置,选择GA
选择新建变量
选择新建变量

然后将GA的追踪ID填进去,保存即可,GA设置中还有很多可以进阶设置的部分,例如跨域追踪,自定义维度,电子商务设置,数据层设置等等,我们暂且不表,先做一个最基本的追踪ID设置。

填写GA跟踪ID
填写GA跟踪ID

代码设置部分已完成,接下来配置触发器,触发器选择内置好的All Pages。

添加触发器为All Pages
添加触发器为All Pages

这个条件表示GA页面查看代码会在所有部署了GTM代码的页面中触发,很好理解,如果某些页面它没有部署或者没有正确部署GTM,那么就不能触发,其他代码也是同理。

通过以上步骤,我们创建了一个Tag代码来追踪用户在网页的浏览和访问;创建了一个Trigger触发器,当用户在页面访问的时候触发代码;创建了一个GA追踪ID的变量,将数据导入到对应的GA账号。

进入Debug模式

尽管这是一个非常简单基础的追踪代码,但是同样不要忘记发布前的Debug。

点击账号界面右上角的预览进入预览模式
点击账号界面右上角的预览进入预览模式

进入Debug模式后,我们可以在同一浏览器进入网站,网站底部会弹出Debug的窗格,通过这个窗格,可以监测代码是否触发和何时触发。

GTM埋点的Debug模式
GTM埋点的Debug模式

一般来说,当Debug模式通过测试的时候,代码就能够发布并使用了,保险起见,我们可以去查看GA的实时报表,查看相应的代码有没有触发。

通过GA实时报表查看代码是否部署成功
通过GA实时报表查看代码是否部署成功

还有其他的工具进行GTM的Debug,例如Google Tag AssistantGoogle Analytics Debugger。(需要配合Chrome浏览器使用)

发布代码

一旦通过了追踪代码的测试,就可以进入代码发布阶段了。

发布提交新版本
发布提交新版本

这里有两个选项:

  • 发布并创建新版本
  • 仅创建新版本(不会发布的线上环境)

我们选择发布并创建新版本,建议填写好版本名称和版本描述,因为随着版本的迭代,当我们去回溯历史版本,通过阅读版本名称和描述就能大致了解版本迭代的细节。

迁移代码

接下来,建议把所有Hard coded在网页源代码中的追踪代码迁移到GTM中,这个过程开头会很难,需要我们和开发人员共同努力,但从长远来看,一定会有回报的。仅仅思考这样一个应用场景,当你两天内要上线一个营销活动,没有GTM,需要提需求、排期、开发、测试、发布,太浪费时间了。

GTM初学者的最佳实践

以下建议并非是强制性的,但是会有利于学习曲线的顺滑以及数据的管理和与开发者的沟通。

Practice 1. 命名规范

优秀的命名规范应该是让埋点er,数据分析er等阅读无障碍的。

对于埋点人员,你能通过代码、触发器和变量名字就知道它们的内容。

对于数据分析人员,他们通过阅读GA报表就能清晰的洞察用户行为。(事件的类别、行为、标签和价值尤其重要。)

当代码数量较少时,还方便管理和操作;但是当代码数量较大时,如果不注重命名规范,会增加很大的沟通成本。

这篇博客有详细的命名规范指引,供参考。

Practice 2. 控制权限

GTM是一个强大的工具,直接关系到GA数据的准确性与网站的性能;如果非专业人士有错误操作,对于站点的影响是很大的。

GTM有方便的权限管理(阅读、编辑、发布等),给合适的人合适的权限!

Practice 3. 使用未知来源的JS前,咨询开发者

关于GTM有很多附带自定义JS的教程,如果是权威的信得过的专家的分享(例如Simon Ahava,Julius Fedorovicius等),那可以较为放心的使用;但如果是一些非专业或者较为不知名的JS代码,建议与网站开发者进行沟通,确保代码的有效性。

Practice 4. 善用DataLayer

这一部分进阶一点,但当你熟悉并掌握代码、触发器和变量之后,就能对DataLayer有较高的认知。DataLayer数据层也是GTM的关键组成部分,无论如何,都应该掌握它。

当使用GTM原生的事件追踪不能获取用户行为的时候,就可以考虑应用DataLayer。

Practice 5. 发布新版本前一定要先Debug

使用GTM也等于半个开发者了,要养成好习惯,确保万无一失后再发布新版本。

可以应用GTM做哪些事情?

结合自身工作、学习的一些建议

马未都先生对于“笨人”有这样的观点,大意是如果坚持学习、持之以恒,有一天开窍了,一通百通,一顺百顺。跟武侠小说里习武之人打通了任督二脉一样。

GTM的学习要求的知识是比较杂糅的,需要市场营销的知识,需要对GA有一定的认知,需要一点编程(HTML、CSS和JS)知识。这些都不是一蹴而就的,需要日积月累。不要抱着一口吃成胖子的心态,GTM仅仅是一个工具,遇到能够用GTM解决的case就试着去解决它,熟能生巧。

Published inCategorygtm

Be First to Comment

发表评论

邮箱地址不会被公开。 必填项已用*标注