什么是 Google Tag Manager(GTM)?
Google Tag Manager(GTM)是由谷歌推出的一款强大且免费的追踪代码管理工具。通过 GTM,用户可以轻松部署和管理包括 Google Analytics(GA)、Google Ads Tracking 等谷歌自家产品的追踪代码,同时也支持 Facebook Pixel、Pinterest Tag 等第三方平台的追踪代码。其支持的平台多达数十种,使其成为网站和应用程序追踪管理的中枢。
对于初学者而言,GTM 与 GA 之间的关系可能会引发疑问:它们有什么区别?
简单来说,GA 是用于数据统计与分析的工具,而 GTM 是一个代码管理容器。通过 GTM,可以更加灵活地控制 GA 或其他追踪代码的行为,实现对数据收集的精确管理。当 GA 与 GTM 配合使用时,GA 的功能将得到显著增强。
为什么要使用 Google Tag Manager?
1. 管理便捷,操作直观
GTM 的核心优势在于其便捷的管理方式。用户只需在网站上部署一次 GTM 容器代码,之后便可以通过 GTM 的网页界面以可视化方式管理所有追踪代码。无论是添加、修改,还是删除代码,都无需再触碰网站的源代码,极大地减少了操作复杂性。
2. 功能强大,简化设置
GTM 提供了多种触发条件和追踪参数设置,即使是技术水平较低的用户,也可以在无需编写大量代码的情况下完成复杂的追踪需求。例如,可以设置点击事件追踪、表单提交监控等功能。通过 GTM,用户不仅节省了时间,还降低了设置出错的风险。
3. 完全免费,性价比高
相比一些需要付费的代码管理插件(如 WordPress 上的 Pixel Manager),GTM 完全免费。Pixel Manager 的免费版本仅支持有限的追踪代码种类,更多高级功能(如 GA4 电商追踪、Bing 广告追踪等)需要付费解锁,单站点价格高达 $99/年。而 GTM 不仅提供了更广泛的功能支持,还免去了额外的费用,特别适合预算有限的用户。当然,付费插件在某些场景下仍然有其价值,尤其是对于技术不熟练的用户而言。
如何注册 Google Tag Manager?
第一步:访问 GTM 官网
前往 Google Tag Manager 官网,使用 Google 账号登录。
第二步:创建 GTM 账户和容器
在 GTM 主页面,点击右上角的“创建账户”按钮。
- 账户名称:可以随意填写,但建议填写具有辨识度的名称,如公司或项目名称。
- 国家:根据实际情况选择。
- 容器名称:建议填写网站域名,方便管理。例如,
example.com
。 - 容器用途:选择“Web”,如果需要管理应用程序代码,可选择 iOS 或 Android。
第三步:同意服务条款
阅读并勾选同意条款后,点击确认。至此,GTM 账户和容器已成功创建。
如何安装 Google Tag Manager 容器代码?
GTM 的容器代码需要安装到网站中,以下介绍三种常见方法。对于 WooCommerce B2C 电商网站,推荐使用方法三。
方法一:直接在 Bricks Builder 中添加
- 打开 Bricks 设置界面,导航到 Settings > Custom Code。
- 将第一段代码粘贴到
Header scripts
框中。 - 将第二段代码粘贴到
Body (header) scripts
框中。 - 保存设置即可。
方法二:使用 WPCode 插件
- 安装并启用 WPCode 插件。
- 在 Header and Footer 设置界面,将代码分别插入到
Header
和Body
框中。 - 保存设置完成部署。
方法三:通过 GTM4WP 插件安装(推荐)
- 安装并启用 GTM4WP 插件。
- 在插件设置中,填写 GTM 容器的 ID(如
GTM-XXXXX
)。 - 启用容器代码后保存。
此插件还支持与 GA4 和 Google Ads 配合使用,可实现 WooCommerce 商店的浏览、加购、购买等行为追踪。
注意事项:
- 将代码段尽量放在
<body>
标签靠前的位置,以确保优先加载。否则,可能会导致部分数据追踪丢失,例如用户访问的记录。
Google Tag Manager 的核心概念和界面功能
GTM 的核心要素:代码(Tags)、触发器(Triggers)、变量(Variables)
- 变量:存储参数数据,如页面路径、用户行为等。
- 触发器:设定激活代码的条件。例如,用户点击按钮或页面加载完成时触发。
- 代码:实际的追踪代码容器,可调用变量作为目标值。
示例:
以声控灯为例:
- 声控灯的“控制开关”相当于触发器;
- “亮灯的时间”相当于变量;
- “照明系统”相当于代码。
触发器调用变量(如声音分贝和环境亮度)来激活代码(照明系统)。
界面功能简介
- 左侧功能区:包括 Tags、Triggers 和 Variables 的设置入口。
- 右上角的提交按钮:只有在点击“提交”后,新增或修改的设置才会生效。
- 预览功能:允许用户在正式发布前测试代码是否正确触发。
部署代码和验证
添加代码
- 点击“新建代码”按钮,选择代码类型(如 GA、Google Ads)。
- 配置触发器,选择触发条件(如页面加载、按钮点击)。
- 保存并返回主界面,点击“提交”完成发布。
验证代码
- 在主界面点击“预览”按钮,输入网站域名进行测试。
- 检查代码是否正确触发,确保追踪功能正常。
其他注意事项:Consent Mode 的设置(适用于欧盟地区)
对于需要在欧盟地区投放广告的用户,必须遵循隐私法案实施 Consent Mode v2。
- 基本模式(Basic Mode):仅在用户同意后触发代码。
- 高级模式(Advanced Mode):允许在页面加载时收集匿名数据,并在用户同意后传输更多信息。
在 GTM 中,可通过容器设置启用用户同意概览,并根据用户授权条件配置代码触发规则。
如何用GTM 安装Google Ad 广告转换追踪码?
Google Ad 广告转换追踪码就如同Meta Pixel 以及GA4 的追踪码一样,只要有透过Google Ad 购买广告,就必须要安装转换追踪码在网站上,借以了解广告的成效,是所有GTM 设置初期必须要安装的基本代码。 (当然,如果你没投放Google Ad 就不用设定。)
如同其他广告追踪代码一样,我们会想知道使用者点击广告之后,是否有在特定的天数之内产生目标转换,例如:完成订单、填写表单甚至只是观看特定页面都可以成为转换完成的目标,并透过抓取Data Layer给我们的值,将与订单相关的数值一同回传给Google Ad,借此获得每位投手最关注的指标:ROAS。
延伸阅读》Data Layer 资料层是什么?
安装的步骤很简单,毕竟都是Google 自家的服务,如果团队分工很细(但通常广告投手可能会兼这部分的GTM 设定…),团队合作的部分,只要跟投手拿到转换标签以及转换ID,接下来我们就可以独立透过GTM 完成设定了。
不过这篇文章会从Google 广告帐号设定Google Ad 转换追踪码开始,一步步的透过GTM 完成相关设定。
本篇重点
- Google Ad 转换目标设定
- 先设定转换事件参数
- 抓取Data Layer 资料,设定变数
- 新增Data Layer 资料层变数
- 安装Google Ad 转换追踪码
- 新增Google Ad 类型代码
- 新增转换连结器
- 设定代码触发条件– #1 透过网址触发
- #2 透过自订事件触发
- 搞定!预览模式确认
- 启动强化转换
- 打开Google Ad 强化转换
- 设定「使用者提供的资料」变数
- 回到Google Ad 转换代码设定介面
- 延伸阅读:
Google Ad 转换目标设定
首先透过Google Ad 后台新增要追踪的转换目标,假设我们今天要追踪的是购物完成的订单页面,也就是一般大家所称的Thank You Page。
「目标」 > 「摘要」 > 「新增转换动作」

选择网站类型,当然,你今天如果是要追踪App 或其它转换目标的话,就依照需求选择。

输入网站网址,这边Google Ad 会自动侦测你的网站是否已经有在GA4 设定转换事件,如果有,就可以直接选择使用,我们今天的文章内容主要是以「手动建立转换动作」为主。


本文示范的是购买事件的转换动作设定,在大部分情况下,购买订单的价格都会不一样,因此这边会选择「为每次转换定义不同价值」,不过系统依然会要你设定一个预设值,当没有抓取到价值资料时,便会给予这个预设值。

如果你的转换目标是订阅、填写表单或是没有一个明确的定价,在这边你就可以选择为「每次转换指定相同的价值」,举个例子:
假设公司是属于顾问服务,你的转换目标是客户填写表单,平均每10 张表单会有一张成交,每次成交的合约金额约为10 万元,换算下来,平均一张表单价值一万元,那你就可以这边填入一万元的转换价值,作为未来分析评估的依据,也方便计算每次广告费用的投报率。
最下方的部分,如没特别需求,采用预设值即可,归因分析目前都采用以数据为准居多,让Google 自行去分配归因的权重,因此不用特别去更改。

而点阅后的回溯期,如果你的产品需要让客人有较长犹豫期,可能超过30 天之后才会有购买的可能,那就可以延长,否则一般来说都是设定30 天即可。
完成上述设定后按下储存,会来到以下画面,选择使用「Google 代码管理工具」,并记下转换ID以及转换标签。
到这边我们就完成Google Ad 转换目标追踪码的设定了,接下来就是GTM 的工作了。

先设定转换事件参数
(如果你的转换追踪不需要设定如:转换价值、交易ID 以及货币代码等参数,请直接跳到这边看转换追踪码的安装方式。)
抓取Data Layer 资料,设定变数
一般来说,在结帐页面的Data Layer 层,我们可以找到订单的相关资讯,如果你是用WordPress 的WooCommerce 电商系统,有相关的外挂可以帮助设定GA4 预设的电子商务事件,协助在购物完成时的Thank you page 推送「Purchase」事件到Data Layer 资料层,让GTM 中设定的代码去抓取资讯。
如果你透过GTM 预览模式发现Thank you page 的Data Layer 资料层没有看到下图这样的资讯,那就要请工程师帮忙,将结帐事件以及相关资料推送到Data Layer 资料层当中。

这样的动作除了方便我们透过GTM 变数设定抓取资料以外,也可以将结帐事件用来作为触发条件,本文的后段会讲到如何设定,想先知道的朋友可以先看这边。
延伸阅读》什么是Data Layer 资料层?
新增Data Layer 资料层变数
关于新增变数的方式,可以参考之前的变数介绍文章,这边就不多做说明,我们直接从选择资料层变数类型开始进行设定。
在接下来的Google Ad 转换代码设定中,我们需要传送转换的价值(订单价值)以及交易ID给Google Ad,因此我们先设定好变数,方便我们在接下来的代码设定中使用。
变数设定介面> 「新增」变数> 选择「资料层变数」
(关于资料层变数的介绍,可以参考这篇文章:GTM 变数介绍:资料层变数)

输入变数名称,这边的名称要跟Data Layer 中的变数名称完全对应(包含大小写)。
在Data Layer 中,因为value 这个值是包在ecommerce 底下,

因此我们必须写入ecommerce.value 来取得这个值(如下图),并将变数名称取名为「dlv – OrderValue」。 (命名没有一定,随喜随意,好读好懂优先)

要取用Data Layer 资料层中巢状结构的值,我们必须要用「 . 」来让GTM 中的变数知道我们要取用的位置:
在Data Layer 资料层中找到ecommerce,然后找出巢状结构内的value,资料层变数名称就会是ecommerce.value。
用一样的方式,设定交易ID以及货币代码变数。

依序设定完毕之后,到这边你应该会有3 个「资料层变数」:
- dlv – OrderValue : 代表订单的价值
- dlv – CurrencyCode : 代表订单所用币值
- dlv – OrderID : 代表订单ID
安装Google Ad 转换追踪码
新增Google Ad 类型代码
GTM 代码页签> 右上角「新增代码」 > 代码类型选择「Google Ads」 > 选择「Google Ad 转换追踪」

点击后,选择「Google Ads 转换追踪」。

前面设定的Google Ad 「转换目标ID」以及「转换标签」在这边开始登场了,刚刚设定的资料层变数也会一并在代码设定这边填入。
(dlv – OrderID 以及dlv – CurrencyCode 也是用一样的方式完成设定,这边就不再重复。)

新增转换连结器
如果是第一次安装Google Ad 转换目标代码,都需要建立转换连接器,主要是用于帮助读取网页网址中追踪相关资讯,设定方式很简单,不用做任何设定,只要设定「全页触发」以及给予命名就可以了,更多细节可以参考官方文件。


设定代码触发条件– #1 透过网址触发
设定触发条件的方式有很多种,譬如说:可以用Thank You Page 网址作为触发,因为Thank You Page 网址通常都会是一个独一无二的,例如:「www.abc.com/order-finished/?transaction_ID=3345678」且无法直接在浏览器网址列输入后到达。 (一般来说工程师会把这个页面设定跳转,强制转走回首页。)
因此我们就可以这样设定:
触发条件类型选择「网页浏览」 > 条件为:「当page_path 包含/order-finished/ 」

不过这样的做法「可能」会有一个问题,就是当网页载入时,GTM 代码侦测到网址符合条件,随即触发Google Ad 转换目标追踪代码,但因为Data Layer 还未送入「Purchase」事件以及相关参数,会造成代码虽然触发了,但是却抓不到相关数值(转换价值、ID、币别)的窘境。
(这部分也可以透过跟网站工程师沟通调整,让事件更早被推送进Data Layer)
因此,类似这样的事件,我们都会建议用Data Layer 推送的事件作为触发条件。

#2 透过自订事件触发
在订单完成页面,我们推送了「Purchase」事件到Data Layer 资料层中,并将订单相关资料一并送入,此时最佳且最准确的触发方式就是使用「自订事件」触发条件类型,并以「purchase」事件作为触发条件。

在订单完成页面的Data Layer 资料层中,我们可以看到购买事件「purchase」,我们便是利用这个事件名称,作为我们代码的触发条件。

这边要注意的是,写入的事件名称一定要跟Data Layer 里面的完全一样,否则不会触发。

将设定好的触发条件与Google Ad 转换目标追踪代码绑在一起,未来当Data Layer 资料层中出现了「purchase」事件时,Google Ad 转换追踪代码便会启动。

搞定!预览模式确认
回到预览模式当中,当使用者完成购物进入到Thank You Page 之后,可以看到Google Ad 转换追踪代码成功触发,展开代码后,可以看到交易ID、转换价值等数值。


透过上述的设定方式,便可以轻松完成Google Ad 转换目标追踪码的设定,除了Data Layer 的部分需要麻烦网站工程师协助处理以外,剩下的都可以透过GTM 完成设置。
将相关事件以及参数推送到Data Layer 资料层只是一次性的工作,大部分电商网站都不会在结帐资料的格式上有太大的变动(因为也必须符合GA4 电子商务追踪代码的结构) ,因此只要将所需要的数值以及格式准备好交给工程师处理就可以了。
而关于Data Layer 格式介绍,可以参考这篇文章:什么是Data Layer 资料层?
最后,记得也要到GA4 Debug View 确认事件以及参数有正确送入,待一切都没问题之后,就可以将GTM 代码发布啰!
启动强化转换
Google Ad 广告设定中,还有一个「强化转换」的功能,当你的顾客在站上完成转换的同时,我们可以传递该顾客的资料给Google Ad(例如:Email),让Google Ad 透过后台进行比对,借此判断有同一个Email 的使用者可能会对相关连的产品有兴趣,进而投递广告,有助于改善转换评估的准确度。
而这个功能,我们一样可以透过GTM 来进行设定。
打开Google Ad 强化转换
回到Google Ad 操作介面,左侧选择「目标」 > 于转换选单中,选择「设定」 > 右侧选择「强化转换」

勾选「启用强化转换」 > 选择由「Google 代码管理工具」进行设定

ㅤ
设定「使用者提供的资料」变数
假设在结帐时,产生转换的结帐页面「资料层」中除了有GA4 电子商务的资料以外,也有该顾客的Email,我们也可以用跟上述一样的方法,透过「资料层变数」取得该Email 并储存。 (方法都一样,抓取方式就不再重复赘述。)
所以我们会得到一个名为dlv – Email 的「资料层变数」,接下来,就可以开始设定「使用者提供的资料」变数了。
GTM 左侧面板选择「变数」 > 下方「使用者定义的变数」区块选择右上角「新增」 > 点击中间「请选择变数类型以开始设定」 > 选择变数类型「使用者提供的资料」。


ㅤ
在电子邮件栏位的下拉选单中,选择刚刚设定的「资料层变数」{{dlv – Email }},如果有其它资料,也可以用同样的方式从资料层中取出,依序填入其它栏位,完成之后命名为UserDataV | Email 后储存。 (变数名称可以自行决定,这边只是示范)

ㅤ
这边有一点要注意的是,建议不要勾选「自动收集资料Automatic collection」的选项,这个选项的功能与GA4 后台中的「自动侦测使用者提供的资料」功能是一样的,会自动抓取网页上与电子邮件格式相符的资料。


ㅤ
如果使用这个选项,可能会有些问题。
一来「Google 同意声明模式(Consent Mode)」的问题,如果你的网站有来自欧洲的流量,那么在没获得使用者同意声明的情况底下,这么做是违法的。
二来则是要传送什么资料,应该由我们自己控制,而不是透过「自动收集」,尽管使用者同意,也不代表你就该把所有资料传给Google。
ㅤ
回到Google Ad 转换代码设定介面

打勾「加入使用者在您网站上提供的资料」> 下拉选单中选择设定好的「使用者提供的资料」变数> 储存
ㅤ
搞定!这样就完成Google Ad 强化转换的设定了。