更新时间:2023年12月28日
这一篇介绍几个我常用的调试工具和分析工具。
调试工具
Adobe Launch配置好后,需要用一些工具做调试,确保数据准确没有问题才可以发布,通过调试工具可以查看触发了或不触发了哪些Rules、加载了哪些Extensions、Data Elements传递的值以及其他重要的配置信息,看你的Adobe Launch上的配置是否存在问题。
Adobe Experience Cloud Debugger (老的)
Adobe Experience Cloud Debugger 是Adobe官方提供一个专门用于调试的工具,目前这个产品已经淘汰了,最新的是Adobe Experience Platform Debugger。
Adobe Experience Platform Debugger (最新)
Adobe Experience Platform Debugger是官方提供最新的一个调试工具,这是为了支持对AEP Web SDK做调试而推出的,如果你是通过AEP Web SDK这种方式布署的,那么只能使用Adobe Experience Platform Debugger去调试。
Adobe Experience Platform Debugger支持对Adobe Experience Platform和Adobe Experience Cloud产品做调试或直接访问:https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob
直接点击添加到浏览器后就可以在浏览器工具栏看到它的图标,截图中,我是已经安装的了。
使用方法:先打开需要测试的站点,然后点击工具栏中Adobe Experience Platform Debugger的图标打开Adobe Experience Platform Debugger进入调试状态,再返回到站点页面,刷新一下,它才会自动收集数据。
比如,我现在打开宝马美国的网站https://www.bmwusa.com/,打开Adobe Experience Platform Debugger进入测试状态,然后刷新一下宝马美国的页面,它才会记录数据:
Adobe Experience Platform Debugger的导航来在左边。
- Summary:概要信息,从这里可以知道这个站点布署了哪些Adobe Experience Cloud产品和一些基本信息,如果后面带有Not Found表示没有使用布署整个产品,没有带的表示这个网站有使用该产品,点击它会显示这个产品的相关信息
- AEP Web SDK:就是Adobe Experience Platform Web SDK,是客户端JavaScript库,允许Adobe Experience Cloud客户通过Adobe Experience Platform Edge Network与Experience Cloud中的各种服务交互,这是一种新的布署方法,目前只能通过Adobe Experience Platform Debugger调试
- Analytics:发送给Adobe Analytics的数据请求
- Target:发送给Adobe Target的数据请求
- Audience Manager:发送给Adobe Audience Manger的数据请求
- Launch:Adobe Launch的调试
- Dynamic Tag Manager:Dynamic Tag Manager调试
- Experience Cloud ID Service:Experience Cloud ID调试。
- Logs:Adobe Launch上规则触发的日志,默认自动开启。
- Network:网络,就是发送给Adobe Experience Cloud所有的数据请求
- Event :事件,可视化Adobe产品的触发时间分布
- Auditor:审计监测,就是看页面布署情况,结果会反馈给你哪些需要修改的
- Settings:设置,主要设置调试页面的风格,有暗黑和高亮两种,默认是暗黑。
Adobe Experience Platform Debugger相比Adobe Experience Cloud Debugger支持调试的类型更多,对比下两者的区别:
Adobe Experience Cloud Debugger | Adobe Experience Platform Debugger | |
图标 | ||
使用方法 | 先打开测试页面,再打开Adobe Experience Cloud Debugger,就会自动收集数据 | 先打开测试页面,再打开Adobe Experience Platform Debugger,然后返回测试页面刷新一下,才会自动收集数据 |
支持的产品 | Adobe Analytics,Adobe Target,Adobe Audience Manager,Adobe Media Optimizer,Experience Cloud ID服务(ECID),动态标签管理(DTM)和Adobe Launch | Adobe Experience Cloud和Adobe Experience Platform产品,其实主要是AEP Web SDK
|
两者之间是有差异的,一些最新的技术,如AEP Web SDK,只能使用Adobe Experience Platform Debugger调试,因为Adobe Experience Cloud Debugger不支持。
另外,新旧版的使用方法是不一样的,旧版先打开需要测试的网站,然后打开Adobe Experience Cloud Debugger就会自动收集数据,而新版先需要打开测试网站后,再打开Adobe Experience Platform Debugger进入测试状态,最后返回到测试页面刷新一下,才会自动收集数据。
最后,在测试的过程中不要再去打开其他第三方的网站,不然第三方网站如果有布署Adobe的产品,那么它的数据也会被收集的,会影响到你所看到的报告。
更多内容请看:新的Adobe Experience Platform Debugger
浏览器开发者工具
浏览器开发者工具(Browser Developer Tools),这是很多浏览器都会内置的Web开发和调试工具,可用来对网站进行迭代、调试和分析。页面发送给第三方服务器的信息都可以在开发者工具中的控制台和网络中看到,所以可以通过这两个去调试。
打开Chrome 开发者工具的方式:
- 在Chrome菜单中选择 更多工具 > 开发者工具
- 在页面元素上右键点击,选择 “检查”
- 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
控制台
Console、控制台,浏览器开发者工具打开后默认就是控制台,在浏览器开发者控制台中输入_satellite.setDebug(true):
就进入测试状态,然后刷新刷新一下页面,或模拟要测试的动作,就可以看到很多的小?:
你就可以去找对应的规则是否触发。
如果你在Console里看到有这个小火箭符号?,表示目前处于调试状态,显示的内容是跟Adobe Experience Cloud Debugger的Logs是一样的,可以知道触发具体信息,有两种方式可以进入调试状态:
- 一种是使用Launch Switch,勾选上面的Debug。
- 一种是Console中输入命令setDebug (true)
还可以在Console输入一些命令,如_satellite.getVar (“element”)去获取Adobe Launch中变量的信息,比如输入_satellite.getVar (“dataLayer_page-name”):
这个功能非常有用,可以在测试的时候去看相关变量是否准确获取到想要的值,在测试中会经常用到的。
更多的信息,可以输入_satellite获取帮助信息,这个显示出来的数据,都可以_satellie.**的结构去获取:
理论上Library Code的代码里面的所有数据、信息都是可以通过这种方式获取到,如要获取Launch的环境可以用_satellite._container.environment,设置数据变量,可以用_satellite.setVar,而且这些代码是可以在Launch里自定义js里使用,获取相应的值。
实际上,也有一些第三方工具可以以可视化的结果呈现对Library Code的分析,如Launch Library Parser和Adobe Launch Viewer。
如果要退出调试状态就输入_satellite.setDebug(false)。
网络
Network,网络,就是插件发送给Adobe的请求,通过查看请求上的信息去判断传递的数据是否准确。
在网络里通过b/ss过滤出来的就是发送给Adobe Analytics请求:
点击它,然后看Header里,这里就是获得到的值和发送的数据了。
检查这里的数据是否如预期的那样。这些信息跟Adobe Experience Cloud Debugger里面Analytics看到的信息是一样。
Launch Switch
Launch Switch,也叫Launch and DTM Switch,是Search Discovery开发的一个可以随意切换环境的测试工具,借助这个工具可以实现模拟在不同环境中测试,在Adobe Launch中创建所有的环境都可以在这里实现切换。
这是免费的Chrome插件,使用前先需要在Chrome的插件市场安装这个插件,你可以在浏览器插件市场搜索Launch Switch或直接访问https://chrome.google.com/webstore/detail/launch-and-dtm-switch/nlgdemkdapolikbjimjajpmonpbpmipk?hl=en-US
使用方式:在Adobe Launch中打开要测试站点的媒体资源,然后打开需要测试的站点,最后打开这个Launch Switch插件,直接切换不同的环境,然后刷新即可:
注意:需要在页面中中打开要测试站点的媒体资源,Launch Switch才可以读取到不同的环境类型。
我们到开发者工具的控制台看:
可以看到现在的环境是Staging,测试环境的代码生效,这个Server Call是发送到Staging的报表包。
如果你没有两个真正的测试环境和正式环境,可以通过Launch and DTM Switch实现测试和正式环境的分离,将测试将代码库发布到开发环境,然后通过Launch and DTM Switch切换到开发环境去做测试,这样效率会更高。
Switchboard
Switchboard 是softcrylic公司开发的,作用和Launch Switch是一样的,这里就不展开讲解。
Tagtician
Tagtician是由Jim Gordon开发,随着Jim Gordon加入33 Sticks,现在由Jim Gordon和33 Sticks共同维护。
这是免费的浏览器插件,主要用于DTM和Adobe Launch的测试工具,目前只支持Chrome浏览器。
使用方式:打开浏览器开发者模式,然后找到Tagtician,刷新一下就会记录数据,如果页面刷新无效,点击Chrome的在右上角的Tagtician去刷新,就会跟踪Launch里面数据,默认显示的是触发的规则:
刷新一下就会记录数据,如果页面刷新无效,点击Chrome的在右上角的Tagtician去刷新,就会跟踪Launch里面数据,默认显示的是触发的规则。
如果你点击左上角的Library,那么就显示使用到的Extensions、Rules和Data Elements。再往右的Production表示Launch的环境类型。
点击触发规则后右侧会弹出一个具体的配置信息:
但配置信息里面都是配置的是变量设置,不是具体的值,不利于调试。
Omnibug
Tagtician是由Jim Gordon开发,随着Jim Gordon加入33 Sticks,现在由Jim Gordon和33 Sticks共同维护。
这是免费的浏览器插件,主要用于DTM和Adobe Launch的测试工具,目前只支持Chrome浏览器。
使用方式:打开浏览器开发者模式,然后找到Tagtician,刷新一下就会记录数据,如果页面刷新无效,点击Chrome的在右上角的Tagtician去刷新,就会跟踪Launch里面数据,默认显示的是触发的规则:
刷新一下就会记录第三方跟踪的数据,默认显示的是触发的规则。右上角的几个功能分别是:单击以清除页面之间的请求(页面刷新的时候记录到的信息也清除掉)、过滤、下载、设置和帮助。
点击触发规则后会弹出一个具体的数据采集信息:
这里面都是具体的数据采集信息,可以通过这个去判断获取和传递的值准确与
Debugger for Adobe Analytics
Debugger for Adobe Analytics是由Tomas Balciunas开发的,他目前工作于Search Discovery。
这也是一个免费的浏览器插件,专门用于Adobe Analytics的调试,目前只支持Chrome浏览器。
使用方法:打开测试网站,然后打开Debugger for Adobe Analytics,它会将信息打印在浏览器控制台,可以看到Adobe Analytics Server Call,这个就是发送给Adobe Analytics服务器的数据:
如果没有打印出信息,将鼠标移动到工具栏Debugger for Adobe Analytics,然后点击右键,选择This Can Read can Change Site Data,然后选择要测试的站点,再刷新一下页面就会打印出信息。
由于在浏览器开发者工具里的网络也可以看到类似的信息,所以这个工具在实际使用很少。
ObservePoint Tag Debugger
ObservePoint Tag Debugger是一个由ObservePoint开发的调试工具。
使用方法:先打开要测试的站点,然后打开浏览器开发者模式,然后在标签栏找到ObservePoint Tag Debugger,刷新一下页面就开始调试,会记录触发的第三方代码,不仅仅是Adobe Analytics:
然后刷新页面,就会记录触发的第三方代码,不仅仅是Adobe Analytics:
点击对应的请求就可以看到具体传递的数据:
由于在浏览器开发者工具里的网络也可以看到类似的信息,所以这个工具在实际使用很少。
分析工具
现在介绍一些在线的检测、分析工具,可以用于分析评估Adobe Launch的布署质量情况,还可以用于分析竞争对手布署了什么,如何设置,透过这个,可以还原别人Adobe Launch上的所有设置。
原理是解析Library Code,你可以直接看这个js去分析做了什么设置,但是都是源码,很难阅读,不容易看出来有价值的信息,而分析工具就能够将源码解析出,以可视化的形式呈现出来,便于理解阅读。
这类工具都是通过在线网站提供服务,进入后的界面往往非常简洁,但可视化呈现出来的结果就有很大的差异,有的复杂,有的简洁。
Adobe Launch Viewer
Adobe Launch Viewer是由 Hannes Schmieding开发。
网址:https://launch-viewer.ariak.dev,进入的页面如下:
直接将Library Code复制进去,直接将Library Code复制进去,Library Code的格式如:
就会可视化Lauch上的配置信息:
- Summary:是媒体资源的预览概要信息和发布版本信息
- Rules:可以知道有多少个规则
- Data Elements:可以知道有多少个数据元素
- Extensions:可以知道有多少个插件
部分信息可视化没做好,还是源码的。
Satellite Viewer
Satellite Viewer是由Michael Lee开发,这个工具是借鉴了Adobe Launch Viewer。
Launch Library Parser
Adobe Launch Parser是由Urs Boller开发,这个网站已经下线。
对比
接下来对比一下各个工具:
工具 |
用途 |
推荐指数 |
Adobe Experience Cloud Debugger | 调试 | ★★★★ |
Adobe Experience Platform Debugger | 调试 | ★★★★★ |
浏览器开发者工具 | 调试 | ★★★★★ |
Launch Switch | 调试 | ★★★ |
Tagtician | 调试 | ★★ |
Omnibug | 调试 | ★★ |
Debugger for Adobe Analytics | 调试 | ★ |
ObservePoint Tag Debugger | 调试 | ★ |
Satellite Viewer | 分析 | ★★ |
Adobe Launch Viewer | 分析 | ★★ |
Adobe Launch Parser | 分析 | ★★★★★ |