Google Tag Manager中新的预览调试方式——Tag Assistant

Google Analytics 4 Haran 3年前 (2020-10-18) 2441次浏览 0个评论
文章目录[隐藏]

如果你想用DebugView去调试,请看:GA4的内置调试方式——DebugView

Google Tag Manager在配置后需要调试,看对应的代码(tag)是否促发,事件跟踪是否准确,数据返回正确与否,特别是有代码(tag)使用JS的时候,会往网页注入JS代码,因为这段代码是和页面代码一样运行的,如果错误可能会导致站点崩溃,所以Google Tag Manager配置后,一定要调试,确保无误后才可以发布。

Google Tag Manager的调试在2020年10月改为了Tag Assistant,这个是唯一的测试方式,之前是预览(Preview Model),还是点击右上角的Preview(预览),但测试的方法已经不同的,现在点击预览(Preview Model)打开的是Tag Assistant

为什么要推出新的调试方式

因为旧的调试方式是使用第三方Cookie,而随着浏览器逐渐在禁止第三方Cookie,GTM与时俱进推出基于第一方cookie的Tag Assistant

简单说就是Chrome浏览器将要禁止第三方Cookie,原有直接预览的方式将用不了的,所以推出Tag Assistant

什么是Tag  Assistant

Tag Assistant本来就是一个用于调试Google Analytics的Chrome插件,可以在Chrome的应用市场去安装。

当Google Tag Assistant处于活动状态时,你可以访问的任意网页或与之有互动,Tag Assistant可以记录到所有的Google Analytics跟踪记录,你可以通过查看里面发送的信息去做判断跟踪是否准去。

现在集成到Google Tag Manager。用于支持Google Analytics 4的调试。

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的调试使用。

打开调试的两种方式

打开调试有两个入口:

  • 一种是在GTM中点击右上角的Preview(预览),这是最常用的一种方式。
  • 一种是点击版本里的的Preview(预览),如下图
Google Tag Manager中新的预览调试方式——Tag Assistant

版本管理下的Preview

点击Preview后,会在打开一个新的页面,网址是https://tagassistant.google.com,这个页面是用于设置测试页面:

Google Tag Manager中新的预览调试方式——Tag Assistant

设置测试页面

填入需要测试的URL,需要注意,底部有一个可以勾选Include debug Signal in the URL,这个是可选的,如果你勾选,那么会在测试的URL自动添加上gtm_debug=x的字段。

如果你的网站对URL上的参数限制,那就不要勾选它,常见于移动端。

然后点击「Start」开始:

Google Tag Manager中新的预览调试方式——Tag Assistant

连接测试页面

Tag Assistant会就连接到需要测试的页面,并将其打开。

有两种方式可以判断进入测试状态:

只要看到其中一个,这就表示进入测试状态了

Google Tag Manager中新的预览调试方式——Tag Assistant

测试页面

Tag Assistant的界面如下:

Google Tag Manager中新的预览调试方式——Tag Assistant

Tag Assistant的界面

左上角的Connected就表示是测试状态

GTM-MQ8Z6H,表示目前测试的容器,可以是GTM容器,也可以是测量ID

Summary:表示监测到行为,在调试页面的所有数据都是被记录,

output of GTM-:表示触发的具体Tag、数据传递或错误。

 

调试

你打开调试状态的话,会有两个页面,一个是Tag Assistant,记录调试数据结果的,一个是你要调试的页面,URL上会有gtm_debug=x的字段,而且右下角有一个Debugger connected小窗口。

这样就表示进入调试状态。

你在调试页面的所有数据都是被Tag Assistant页面所记录,所以你只需要模拟需要操作的动作,然后在Tag Assistant看相应的Tag是否有触发就可以。

前面讲到Tag Assistant是为了支持Google Analytics 4,也就是Tag Assistant既可以用于GTM的调试,也可以用于Google Analytics V4的调试,两者的页面显示的内容有些许的差异。

你测试的是GTM还是Google Analytics V4取决于你在右上角对容器或测量ID的选择:

Google Tag Manager中新的预览调试方式——Tag Assistant

容器/测量ID选择

如果你选择的是GTM开头的,那就是GTM容器,进行的是GTM调试

如果你选择的是G开头的,那就是测量ID,进行的是Google Analytics V4的调试

GTM的调试

选择GTM容器ID后,Tag Assistant的测试界面如下:

Google Tag Manager中新的预览调试方式——Tag Assistant

Tag Assistant的测试界面(GTM容器)

左边有个向下的黑色三角形/箭头表示PV,红色方框里面的都表示在这个PV的行为,隔壁有个黄色的圆圈,这个是表示标记的状态。

  • 带“ x”的灰色图标表示在页面上未找到代码
  • 如果找到有效的标签,绿色指示灯将显示。图标中的数字表示找到的标签数量
  • 蓝色指示器将显示有关改善整体标记健康的建议
  • 黄色指示器将表明已发现标签中存在少量实施问题
  • 红色指示器将表明已发现存在严重实施问题的标签

下面一些带有数字的表示在这个页面的行为,如Container Loaded、DOM Ready、Window Loaded、 Click等。

右边的Output Of GTM-标识触发的Tags。

 

这里的测试思路是跟原有的Preview Model是一样的:

模拟过程,然后在Tag Assistant中查看对应的行为是否促发。

首先是看左侧的Summary,找到模拟的行为,对应得选择该类型,如果不确定,可以重新模拟操作一次,然后观察Summary下最新增加的类型,选择该类型,一般来说事件监控大部分是点击类型。

然后看Tag是下的Tags Fired ,对应的tag是否被促发,如果没有,找到该促发tag,看触发器哪个条件有问题,同时看variable中tag使用的字段是否有值,variable是GTM可以拿到的变量,如果是undefined就是没有值的意思;如果variable中需要使用的字段没有值,就是variable没有拿到,需要对variable做修改,如果variable有值,但tag没促发 ,可以点开该tag,可以看到具体是触发器的哪个位置有错,对应对触发器做调整。

最后就是重复上面的过程,˙直到事件准确触发

 

Google Analytics 4 的调试

如果你的网站直接部署有Google Analytics 4的代码,可以在左上角的容器ID/测量ID那选择,Tag Assistant的测试界面如下:

Google Tag Manager中新的预览调试方式——Tag Assistant

Tag Assistant的测试界面(Google Analytics V4)

Google Analytics 4测试界面跟GTM基本是一样的,主要是output of G-这里的有些不一样,这里用hit sent取代Tag和Variable。点击它,其实是点击Tag,就可以对应的Tag发送了什么数据:

Google Tag Manager中新的预览调试方式——Tag Assistant

Google Analytics V4 传递的数据

 

看上面是否和自己跟踪设置的是一样的。

新的测试结果界面也有一些不一样的地方,比如我选择Container Loaded:

Google Tag Manager中新的预览调试方式——Tag Assistant

API Call

这里还会提示这个行为所使用的API,这个在对Google Analytics V4做调试的时候就非常有用,可以看到Google Analytics V4里面具体事件的触发。

Google Tag Manager中新的预览调试方式——Tag Assistant

API Call

 

分享调试链接

分享调试链接是需要外部专家进行测试,但是又不希望对其授权使用的一种方式。

在版本管理下点击Share Preview分享测试:

Google Tag Manager中新的预览调试方式——Tag Assistant

Share Preview

就会弹出一个分享测试的设置界面:

Google Tag Manager中新的预览调试方式——Tag Assistant

Share Preview设置

Destination URL:就是要测试的页面

下面的那个连接就是要分享的链接。

 

关闭调试

如果要关闭调试,直接点击Tag Assistant页面右上角的那个叉:

Google Tag Manager中新的预览调试方式——Tag Assistant

关闭测试

 

注意

由于调试的时候是Tag Assistant去连接打开测试URL,可以理解为是通过Tag Assistant跳转到测试页面的,所以测试流量会识别从tagassistant.google.com过来的referral,为了数据准确,请在referral exclusion list将其排除,延伸阅读:Google Analytics 4中排除特定引荐来源


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (3)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址