Google Tag Manager安装部署基础教程

秦半两更新于 2024年 6月 18日

大家平时有没有觉得安装各类第三方追踪代码会有些不方便?特别是代码种类多了还可能比较混乱。今天我就向大家介绍一款特好用的追踪代码管理工具——Google Tag Manager,操作简单、功能强大。

目 录

    什么是Google Tag Manager?

    Google Tag Manager(简称GTM)是谷歌旗下的追踪代码管理平台,既可以部署GA、google ads tracking等谷歌自家追踪代码,也可以部署facebook、pinterest等其他几十个平台的追踪代码。

    刚接触到的同学一开始可能会有GTM与GA有何不同这样的疑问。二者其实完全不是同一类同东西。GA(Google Analytics)是用于统计数据的工具,而GTM是GA等其他追踪代码的容器,因此GTM能够控制GA的数据收集行为。GTM与GA搭配使用,能够让GA的能力更加强大。

    为什么要使用Google Tag Manager?

    好处1:管理方便。

    我们只需要部署一次GTM代码,之后就能在GTM网页上可视化管理各类追踪代码,日常运维操作比较方便和清晰。

    好处2:功能强大,操作相对简单。

    无需用到大量代码便能设置各种触发条件和追踪参数,简化了设置步骤,降低了设置难度。

    好处3:完全免费。

    WordPress中可用来管理各类追踪代码的且评价很高的插件Pixel Manager,免费版仅支持5种追踪代码,而常用的GA4电子商务追踪功能、Bing广告、TikTok等代码支持都需要购买pro版本,价格很美丽——单站点$99/年。相比下来,免费且功能也不逊色的GTM难道不香吗?当然,并不是说付费插件一无是处——为动手能力稍弱的人节省了大量时间,且提供了额外的高级设置。

    注册GTM

    进入GTM官网:https://tagmanager.google.com/,使用谷歌账号登录后来到GTM主页,点击右上角的创建账号标签。

    创建GTM账号
    创建GTM账号

    账号名称随便输,国家随便选。

    账号设置
    账号设置

    容器名称填可识别的名称,推荐填网站的域名(以后同一个网站的追踪代码都放这个容器当中)。

    容器设置
    容器设置

    随后跳出来条款界面,勾选底下的选项框,同意服务条款。

    到此Google Tag Manager就注册好了,下一步是安装GTM代码。

    向网站安装部署GTM容器代码

    安装GTM代码的方式有好几种,我在这里介绍3种常用的方法。

    假如你的网站是woocommerceB2C电商网站,那我强烈推荐你使用方法3的方式来安装。

    在上一步同意服务条款之后,等待页面刷新,会出来带有两条代码段的弹出框。如下图所示,当我们使用下面的方法1、方法2时,需要将第一段代码复制粘贴到网页的<head></head>标签内,第二段代码贴到<body></body>标签的里面,并且位置尽量靠前。假如你是采用方法3安装,则用不到这两段长代码,关掉弹出框就行。

    GTM代码
    GTM代码

    为什么要放在<body>的靠前位置呢?这是因为代码是根据顺序加载的,假如我们把代码放在<body>标签的最后面(即</body>的前面),那么GTM代码必然需要等到末尾才能加载,在一定程度上会影响各项数据的追踪。举个例子,有个人进入到我们网站,他那边网速很慢,只刷出了首屏内容,然后就走了,这时我们的追踪代码甚至都还没加载,所以这个人的访问压根就不会被GA、Hotjar等分析工具记录下来,对访问量、跳出率等指标的衡量有一定影响。

    现在,我们到网站的WordPress后台添加代码。

    方法1、在Bricks中直接添加

    由于我推荐使用Bricks Builder建站,所以当然首先介绍Bricks自带的代码管理功能。

    打开 Bricks>Setting>Custom code。将第一段代码粘贴到 Header scripts 的框内;

    添加到header中
    添加到header中

    将第二段代码粘贴到 Body (header) scripts 的框内。

    添加到body中
    添加到body中

    保存Bricks设置。

    方法2、在WPCode中添加

    代码管理插件WPCode也能办到。将两条代码依次插入到 Header and Footer 选项界面的Header和Body框中,保存即可。

    方法3、使用GTM4WP插件添加

    强烈推荐B2C商店使用GTM4WP插件添加GTM代码。因为我们后续还需要用这个插件来协助GA4和Google Ads追踪woocommerce商店的浏览、加购、购买等转化数据

    下载并启用插件后,在插件设置界面填入GTM短代码(GTM-XXXXX),Container code选择 on 。然后保存即可。关于这个插件的其他功能我已在上述GA4和Google Ads追踪转化的文章里介绍。

    填入GTM代码
    填入GTM代码

    选择以上任一方法,完成GTM代码部署。接下来我来给大家介绍GTM的界面和使用方法。

    GTM界面介绍

    GTM的高级功能设置是比较复杂的,不过对于我们的小网站来说,掌握基础的用法就足够了。我首先带大家快速理解它的工作原理并掌握基本的使用方法。

    GTM界面
    GTM界面

    左边红框①中的代码(Tags)、触发器(Triggers)、变量(Variables)是GTM的核心。只要理解了这三者,我们就能够进行简单的设置了。它们的层级应该是变量——触发器——代码。

    变量中可以设置许多参数,这些参数可供触发器和代码调用;

    触发器的作用是作为激活代码的开关,可以调用变量中的参数作为触发条件;

    代码是封装各个平台追踪代码的容器,可以调用变量中的参数作为工作目标值。

    举个简单的例子:
    楼道的声控灯会在晚上、有声音的时候点亮。
    我们可以将这个声控灯的控制开关视为触发器,它的照明系统视为代码,而变量则是环境的自然亮度、声音分贝、亮灯时长等参数。声控灯的控制开关(触发器)调用了变量中的环境亮度、声音分贝这2个参数(变量)作为触发条件,照明系统(代码)则是调用了亮灯时长参数作为工作目标。

    中间黄色框②是我们快捷添加追踪代码的按钮,虽然上面写着50多种代码,但是假如算上第三方提供的代码,里面包含的代码种类实际远远不止这么点。

    右边红色框③也很重要,我们添加完参数、触发器、代码这一整套东西后,它们并不会马上在网站中生效,必须点击提交按钮之后才会真正工作(划重点)!!!未提交之前,我们想要收集的目标数据是压根不会被记录传输的。要是你设置了GTM之后一直没数据,记得第一件要检查的就是这一项!

    我们还可以点击左边的预览按钮,对我们刚才添加的代码进行测试,检查在达成触发条件后是否能够成功激活代码。

    图中蓝色色块下方的几个数字和预览按钮边上的数字都代表本次未发布版本所做的更改内容的数量,凡是显示大于0的数值,都代表着我们此次的更改并没有生效。

    使用GTM部署各类代码

    在我们网站上部署完GTM容器代码后,我们接下来就可以部署各种追踪代码了。

    第一步,点击新建代码按钮,在弹出的界面上点击代码配置框,从新的弹出框中选择我们本次要部署的代码类型。

    新建代码
    新建代码

    第二步,点击触发条件框后会弹出触发器选择界面,对于大多数代码类型来说,我们只需要选择 All Pages 网页浏览 就可以了。

    添加触发器
    添加触发器

    第三步,点击右上角的保存就是完事了。(再次提醒,必须到主界面提交发布后才能让我们本次部署的代码生效!!!)

    初级的代码部署一般无需参数,所以不需要设置变量。当我们涉及事件追踪的时候会用到变量,这个以后再讲。

    保存代码
    保存代码

    第四步,回到主界面,点击右上角 预览 按钮,在新页面(Tag Assistant)的弹出框中输入域名以连接到我们的网站进行探测,从而验证代码能否正确被触发。

    从下图可见,示例GA代码已经在Container Loaded环节中被成功触发,符合我们的设定要求,表明本次代码部署正确。

    检查代码是否被正确触发
    检查代码是否被正确触发

    第五步,回到GTM网页,点击右上角的 提交 按钮,完成代码最终的发布。版本名称和版本说明写不写都无所谓,不过为了让自己之后能看懂,建议稍微写一点本次设置的内容。

    发布更改
    发布更改

    挽救失误——回退版本

    有时候可能由于我们操作失误,导致错误的设置被发布,那还有没有挽救的机会呢?当然,我们在版本里面,点击以前版本右侧的三个省略号符号,菜单项中有设为最新版本的功能。这样就能回档到之前版本了。下图中的第一条就是我做演示的回档版本。

    回退GTM版本
    回退GTM版本

    基础的安装部署Google Tag Manager的教程到此结束,按照我这篇文章的步骤,大家应该对GTM有了一个大体的认识,并且应该能够自己部署google ads、hotjar等常规的一些追踪代码了。

    这篇文章对你有帮助吗?
    [ 评价次数: 6 ; 满意度: 5/5 ]
    留言区
    • 老师好!我想问一下,设置转化漏斗的数据跟踪:浏览-点击-加购-发起结账-添加支付信息-购买
      其中,发起结账是根据客户点击Check out按钮触发吗?然后点击了Check out按钮,就会跳转到添加支付信息的页面。那么添加支付信息应该设置什么页面/动作触发跟踪到这一步? 然后购买这一步是根据订单生成还是跳转到下一个界面(比如付款成功通知或者感谢通知页面)?

    欢迎留言