Adobe Launch开发者必备:调试工具与分析工具全解析

Adobe Launch Haran 5年前 (2021-02-08) 4786次浏览 0个评论

更新时间:2025年12月10日

本篇文章将介绍我在实际项目中常用的 Adobe Launch / AEP Web SDK 调试工具与分析工具。

调试工具(Debugging Tools)

在 Adobe Launch 配置完成后,上线前一定要进行完整调试,确保数据、事件、规则触发、变量读取、扩展加载等都完全正常。以下工具可帮助你验证:

  • 规则是否正确触发
  • Data Elements 是否能准确获取值
  • 哪些扩展被加载
  • 发送给 Analytics / Target / AAM / AEP Edge 的网络请求
  • 是否存在重复触发、变量为空、条件未满足等隐藏问题

 

Adobe Experience Cloud Debugger(旧版,已停用)

Adobe Experience Cloud Debugger 是 Adobe 早期推出的官方调试工具,目前已停止更新,并由新版 Adobe Experience Platform Debugger 完全取代。

旧版工具仍可查看:Analytics / Target / AAM / Launch / DTM / ECID 等,但 不支持 AEP Web SDK。

 

Adobe Experience Platform Debugger(最新版,推荐)

这是 Adobe 官方目前唯一持续更新的调试工具。如果你的网站使用 AEP Web SDK(alloy.js),只能用这个工具调试。

Chrome 插件商店: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 Launch开发者必备:调试工具与分析工具全解析

工具界面说明(核心模块)。

  • 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 Cloud Debugger Adobe Experience Platform Debugger
图标 Adobe Launch开发者必备:调试工具与分析工具全解析 Adobe Launch开发者必备:调试工具与分析工具全解析
使用方法 先打开测试页面,再打开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

 

更多内容请看:Adobe Launch实战调试:Experience Platform Debugger全流程指南

 

 

浏览器开发者工具(Chrome DevTools)

浏览器开发者工具(Browser Developer Tools),这是很多浏览器都会内置的Web开发和调试工具,可用来对网站进行迭代、调试和分析。页面发送给第三方服务器的信息都可以在开发者工具中的控制台和网络中看到,所以可以通过这两个去调试。

打开Chrome 开发者工具的方式:

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击,选择 “检查”
  • 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

控制台(Console)

Console、控制台,浏览器开发者工具打开后默认就是控制台,在浏览器开发者控制台中输入_satellite.setDebug(true):

Adobe Launch开发者必备:调试工具与分析工具全解析

就进入测试状态,然后刷新刷新一下页面,或模拟要测试的动作,就可以看到很多的小?:

Adobe Launch开发者必备:调试工具与分析工具全解析

你就可以去找对应的规则是否触发。

如果你在Console里看到有这个小火箭符号?,表示目前处于调试状态,显示的内容是跟Adobe Experience Cloud  Debugger的Logs是一样的,可以知道触发具体信息,有两种方式可以进入调试状态:

  • 一种是使用Launch Switch,勾选上面的Debug。
  • 一种是Console中输入命令setDebug (true)

还可以在Console输入一些命令,如_satellite.getVar (“element”)去获取Adobe Launch中变量的信息,比如输入_satellite.getVar (“dataLayer_page-name”):

Adobe Launch开发者必备:调试工具与分析工具全解析

这个功能非常有用,可以在测试的时候去看相关变量是否准确获取到想要的值,在测试中会经常用到的。

更多的信息,可以输入_satellite获取帮助信息,这个显示出来的数据,都可以_satellie.**的结构去获取:

Adobe Launch开发者必备:调试工具与分析工具全解析

理论上Library Code的代码里面的所有数据、信息都是可以通过这种方式获取到,如要获取Launch的环境可以用_satellite._container.environment,设置数据变量,可以用_satellite.setVar,而且这些代码是可以在Launch里自定义js里使用,获取相应的值。

实际上,也有一些第三方工具可以以可视化的结果呈现对Library Code的分析,如Launch Library ParserAdobe Launch Viewer

如果要退出调试状态就输入_satellite.setDebug(false)。

网络(Network)

Network,网络,就是插件发送给Adobe的请求,通过查看请求上的信息去判断传递的数据是否准确。

在网络里通过b/ss过滤出来的就是发送给Adobe Analytics请求:

Adobe Launch开发者必备:调试工具与分析工具全解析

 

点击它,然后看Header里,这里就是获得到的值和发送的数据了。

Adobe Launch开发者必备:调试工具与分析工具全解析

检查这里的数据是否如预期的那样。这些信息跟Adobe Experience Cloud Debugger里面Analytics看到的信息是一样。

 

第三方调试插件

Launch Switch(Search Discovery)

作用:自由切换 Launch 环境(Dev / Staging / Prod),无需修改代码即可模拟不同环境的 Library。

Chrome 插件商店:https://chrome.google.com/webstore/detail/launch-and-dtm-switch/nlgdemkdapolikbjimjajpmonpbpmipk?hl=en-US

使用方式:在Adobe Launch中打开要测试站点的媒体资源,然后打开需要测试的站点,最后打开这个Launch Switch插件,直接切换不同的环境,然后刷新即可:

Adobe Launch开发者必备:调试工具与分析工具全解析

注意:需要在页面中中打开要测试站点的媒体资源,Launch Switch才可以读取到不同的环境类型。

我们到开发者工具的控制台看:

 

Adobe Launch开发者必备:调试工具与分析工具全解析

可以看到现在的环境是Staging,测试环境的代码生效,这个Server Call是发送到Staging的报表包。

如果你没有两个真正的测试环境和正式环境,可以通过Launch and DTM Switch实现测试和正式环境的分离,将测试将代码库发布到开发环境,然后通过Launch and DTM Switch切换到开发环境去做测试,这样效率会更高。

Switchboard(Softcrylic)

作用和Launch Switch是一样的,这里就不展开讲解。

 

Tagtician

Tagtician是由Jim Gordon开发,随着Jim Gordon加入33 Sticks,现在由Jim Gordon和33 Sticks共同维护。

这是免费的浏览器插件,主要用于DTM和Adobe Launch的测试工具,目前只支持Chrome浏览器。

使用方式:打开浏览器开发者模式,然后找到Tagtician,刷新一下就会记录数据,如果页面刷新无效,点击Chrome的在右上角的Tagtician去刷新,就会跟踪Launch里面数据,默认显示的是触发的规则:

Adobe Launch开发者必备:调试工具与分析工具全解析

     

刷新一下就会记录数据,如果页面刷新无效,点击Chrome的在右上角的Tagtician去刷新,就会跟踪Launch里面数据,默认显示的是触发的规则。

如果你点击左上角的Library,那么就显示使用到的Extensions、Rules和Data Elements。再往右的Production表示Launch的环境类型。

点击触发规则后右侧会弹出一个具体的配置信息:

Adobe Launch开发者必备:调试工具与分析工具全解析

 

但配置信息里面都是配置的是变量设置,不是具体的值,不利于调试。

Omnibug(非常常用)

Tagtician是由Jim Gordon开发,随着Jim Gordon加入33 Sticks,现在由Jim Gordon和33 Sticks共同维护。

这是免费的浏览器插件,主要用于DTM和Adobe Launch的测试工具,目前只支持Chrome浏览器。

使用方式:打开浏览器开发者模式,然后找到Tagtician,刷新一下就会记录数据,如果页面刷新无效,点击Chrome的在右上角的Tagtician去刷新,就会跟踪Launch里面数据,默认显示的是触发的规则:

Adobe Launch开发者必备:调试工具与分析工具全解析     

刷新一下就会记录第三方跟踪的数据,默认显示的是触发的规则。右上角的几个功能分别是:单击以清除页面之间的请求(页面刷新的时候记录到的信息也清除掉)、过滤、下载、设置和帮助。

     Adobe Launch开发者必备:调试工具与分析工具全解析

点击触发规则后会弹出一个具体的数据采集信息:

Adobe Launch开发者必备:调试工具与分析工具全解析

这里面都是具体的数据采集信息,可以通过这个去判断获取和传递的值准确与

Debugger for Adobe Analytics(Tomas Balciunas)

Debugger for Adobe Analytics是由Tomas Balciunas开发的,他目前工作于Search Discovery。

这也是一个免费的浏览器插件,专门用于Adobe Analytics的调试,目前只支持Chrome浏览器。

使用方法:打开测试网站,然后打开Debugger for Adobe Analytics,它会将信息打印在浏览器控制台,可以看到Adobe Analytics Server Call,这个就是发送给Adobe Analytics服务器的数据:

Adobe Launch开发者必备:调试工具与分析工具全解析

如果没有打印出信息,将鼠标移动到工具栏Debugger for Adobe Analytics,然后点击右键,选择This Can Read can Change Site Data,然后选择要测试的站点,再刷新一下页面就会打印出信息。

由于在浏览器开发者工具里的网络也可以看到类似的信息,所以这个工具在实际使用很少。 

ObservePoint Tag Debugger

ObservePoint Tag Debugger是一个由ObservePoint开发的调试工具。

使用方法:先打开要测试的站点,然后打开浏览器开发者模式,然后在标签栏找到ObservePoint Tag Debugger,刷新一下页面就开始调试,会记录触发的第三方代码,不仅仅是Adobe Analytics:

Adobe Launch开发者必备:调试工具与分析工具全解析

 

然后刷新页面,就会记录触发的第三方代码,不仅仅是Adobe Analytics:

Adobe Launch开发者必备:调试工具与分析工具全解析

 

点击对应的请求就可以看到具体传递的数据:

Adobe Launch开发者必备:调试工具与分析工具全解析

由于在浏览器开发者工具里的网络也可以看到类似的信息,所以这个工具在实际使用很少。 

分析工具(Analysis Tools)

现在介绍一些在线的检测、分析工具,可以用于分析评估Adobe Launch的布署质量情况,还可以用于分析竞争对手布署了什么,如何设置,透过这个,可以还原别人Adobe Launch上的所有设置。

原理是解析Library Code,你可以直接看这个js去分析做了什么设置,但是都是源码,很难阅读,不容易看出来有价值的信息,而分析工具就能够将源码解析出,以可视化的形式呈现出来,便于理解阅读。

这类工具都是通过在线网站提供服务,进入后的界面往往非常简洁,但可视化呈现出来的结果就有很大的差异,有的复杂,有的简洁。

 

Adobe Launch Viewer 

Adobe Launch Viewer是由 Hannes Schmieding开发。

网址:https://launch-viewer.ariak.dev,进入的页面如下:

Adobe Launch开发者必备:调试工具与分析工具全解析

直接将Library Code复制进去,直接将Library Code复制进去,Library Code的格式如:

就会可视化Lauch上的配置信息:

Adobe Launch开发者必备:调试工具与分析工具全解析

  • 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 分析 ★★★★★

 


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

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

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