更新时间:2024年12月31号
这一篇来介绍GTM新的预览调试方式——Tag Assistant Companion。
为什么要推出新的调试方式
因为原有调试方式(Preview Model)使用第三方Cookie,而随着浏览器逐渐在禁止第三方Cookie,原有调试方式将用不了的,所以推出Tag Assistant。
什么是Tag Assistant
Tag Assistant是Chrome插件,专门用于GA4的调试,它可以记录到所有的GA4跟踪记录,你可以通过查看里面发送的信息去做判断跟踪是否准确。
- 2020年10月,谷歌推出Tag Assistant
- 2024年12月,谷歌推出Tag Assistant Companion,是Tag Assistant的增强版,一般继续直接称为Tag Assistant。
Preview Model VS Tag Assistant
- 测试结果:Preview Model是通过iframe直接在测试页面下方显示测试结果,Tag Assistant是在一个单独的页面上记录测试结果。
- 测试状态的控制:Preview Model是通过第三方Cookie,是在https://www.googletagmanager.com的cookie,而Tag Assistant是在第一方cookie/LocalStorage,在调试的时候会生成一个名为__TAG_ASSISTANT的第一方cookie。
- 展示的信息:Tag Assistant展示DataLayer,Tag Assistant展示DataLayer和API Call的信息
Tag Assistant的优势
- 支持Google Analytics 4的调试:Tag Assistant的出现主要就是为了支持Google Analytics 4的测试。
- 能记录多个页面的或行为的测试结果:Tag Assistant是在一个单独的页面上记录测试结果,只要你不关闭这个页面,测试结果一直保留。
- 不需要Google Tag Manager授权也调试:Preview Model是需要授权后才可以可以调试,而Tag Assistant可以通过分享测试连接实现第三方去测试,而不需要授权。
- 展示更多的信息:如API Call
- 支持服务端布署的调试,GTM支持服务端布署,也需要测试,需要用Tag Assistant。
Tag Assistant的调试使用方法
这一部分主要是讲Tag Assistant的调试使用。
打开调试的两种方式
打开调试有两个入口:
点击预览后后,会在打开一个新的页面,网址是https://tagassistant.google.com,这个页面是用于设置测试页面:
- 您网址的地址:填入需要测试的URL,http://www.ichdata.com
- 在网址中添加调试信号:这个是可选的,如果你勾选,那么会在测试的URL自动添加上gtm_debug=x的字段,如果你的网站对URL上的参数限制,那就不要勾选它,常见于移动端。
然后点击「连接」开始:
Tag Assistant会就打开到需要测试的页面。
有三种方式可以判断进入测试状态:
- 如果你有勾选“在网址中添加调试信号”,在浏览器地址栏可以看到测试的URL是:https://www.ichdata.com?gtm_debug=x
- 在测试页面右下角看到一个弹框,提示有“已连接 Tag Assistant”
- 在Tag Assistant的页面看到“已连接!”
如Tag Assistant的界面如下:
- 左上角的“已连接”就表示是测试状态
- GTM-MQ8Z6H,表示目前测试的容器,可以是GTM容器,也可以是GA4测量ID,点击它就可以切换
- 概要:表示监测到行为,在调试页面的所有数据都是被记录,
- output of GTM–MQ8Z6H:表示触发的具体代码、数据传递或错误。
调试
你打开调试状态的话,会有两个页面:
- 一个是Tag Assistant,记录调试数据结果的,你在调试页面的所有数据都是被Tag Assistant页面所记录,所以你只需要模拟需要操作的动作,然后在Tag Assistant看相应的Tag是否有触发就可以。
- 一个是你要调试的页面,URL上会有gtm_debug=x的字段,而且右下角有一个Debugger connected小窗口。
这样就表示进入调试状态。
GTM的调试
如果你选择的是GTM开头的,那就是GTM容器,进行的是GTM调试
选择GTM容器ID后,Tag Assistant的测试界面如下:
概要里每个行为都会记录一行,右侧有<>表示可以用于跟踪PV,红色方框里面的都表示在这个PV的行为,隔壁有个黄色的圆圈,这个是表示标记的状态。
- 带“ x”的灰色图标表示在页面上未找到代码
- 如果找到有效的标签,绿色指示灯将显示。图标中的数字表示找到的标签数量
- 蓝色指示器将显示有关改善整体标记健康的建议
- 黄色指示器将表明已发现标签中存在少量实施问题
- 红色指示器将表明已发现存在严重实施问题的标签
下面一些带有数字的表示在这个页面的行为,如Container Loaded、DOM Ready、Window Loaded、 Click等。
右边的Output Of GTM-标识触发的Tags。
测试的过程是:
模拟过程,然后在Tag Assistant中查看对应的行为是否促发。
首先是看左侧的「摘要」,找到模拟的行为,对应得选择该类型,如果不确定,可以重新模拟操作一次,然后观察「摘要」下最新增加的类型,选择该类型,一般来说事件监控大部分是点击类型。
然后看「代码」是下的「已触发代码」:
- 对应的「代码」促发,结束
- 对应的「代码」没有触发,
- 找到该促发「代码」,看触发器哪个条件有问题,可以看到具体是触发器的哪个位置有错,对应对触发器做调整。
- 同时在「变量」里看,「代码」使用到的变量是否有值
- 如果是undefined就表示没值,原因就是变量没获取导致,修改变量,再调试
- 如果有值,判断值是否合理,合理就没问题
最后就是重复上面的过程,˙直到事件准确触发。
Google Analytics 4 的调试
如果你选择的是G开头的,那就是测量ID,进行的是GA4的调试
如果你的网站直接部署有GA4的代码,可以在左上角的容器ID/测量ID那选择,Tag Assistant的测试界面如下:
GA4的测试界面跟GTM基本是一样的,主要是output of G-这里的有些不一样,这里用hit sent取代Tag和Variable。点击它,其实是点击Tag,就可以对应的Tag发送了什么数据:
看上面是否和自己跟踪设置的是一样的。
分享调试链接
分享调试链接是需要外部专家进行测试,但是又不希望对其授权使用的一种方式。
在版本管理下点击「共享预览」:
就会弹出一个分享测试的设置界面:
目标网址:就是要测试的页面
下面的那个链接就是要分享的链接。
关闭调试
如果要关闭调试,直接点击Tag Assistant页面右上角的那个叉:
注意
由于调试的时候是Tag Assistant去连接打开测试URL,可以理解为是通过Tag Assistant跳转到测试页面的,所以测试流量会识别从tagassistant.google.com过来的referral,为了数据准确,请在referral exclusion list将其排除,延伸阅读:Google Analytics 4中排除特定引荐来源
如果你想用DebugView去调试,请看:GA4的内置调试方式——DebugView