一、前言
对于 A/B 测试来说能够快速且正确地拿到用户反馈和数据，就意味着能够拥有更多的先机和决策可能。一个用户可见更改的优化类实验，例如对比不同文案或内容样式效果的实验，通过常规的参数实验方式来进行的话流程如下：
- 实验方确定优化实验需要对比的策略并在平台上设置对应的参数；
- 前端根据会下发的不同参数开发不同的逻辑来展示不同的界面内容；
- 测试和实验方对前端开发内容进行测试和验收，确认不同策略内容；
- 研发上线，用户在该页面下根据分流情况就能够生效不同的页面效果。
参数实验的方式需要专业的开发人员来介入写代码、配置SDK等，普通的产运人员无法胜任，上手门槛很高，而且每次开启实验都要业务代码进行一次上线相配合，步骤十分繁琐，这样的流程在一定程度上拉长了 AB 实验的时间影响了实验速度：
- 优化实验从研发到上线整体研发链路较长；
- 优化实验涉及研发产运等多方沟通成本大；
- 从实验参数到实际应用效果存在确认流程；
- ......
针对这一类实验场景，业界给出了可视化实验的这一特殊实验以供选择。可视化实验是指通过可视化（所见即所得）的方式对网页中想要进行实验的对象直接修改内容、样式、尺寸、位置等属性，修改完成后就能直接上线实验，在此过程中无需依赖研发人员进行代码编程即可快速且便捷地创建不同的实验方案，通过指标数据和用户反馈来验证不同版本的效果，从而确定哪个优化策略更能吸引用户。可视化实验使得业务方能够更加便捷且更加灵活地验证策略、发版产品，甚至可以作为临时性产品功能的有力支撑，同时这也在一定程度上缓解了 RD 研发人力带宽限制产品能力快速迭代的问题，产运人员无需研发人员也能较低成本地使用 AB 实验工具。
二、业界现状
目前，国内外大部分主流 AB 实验平台均提供了可视化实验的能力，例如火山引擎、神策数据、百度统计、腾讯云AB平台、网易Hubble、VWO、Optimizely、 GrowthBook、Convert、Apptimize、PageSense、AB Tasty等，我们主要选取了火山引擎、神策数据、VWO 等三个国内外平台来进行介绍。
2.1 实验创建流程
火山引擎、神策数据和 VWO 等三个平台的可视化实验创建流程，尽管设置内容和配置顺序等各不相同，但总体而言都可以分为四个部分：
- 基础设置：填写名称、描述、运行时长、负责人等内容；
- 受众设置：设置流量和用户受众规则等信息；
- 实验版本设置：设置 URL 匹配规则，并基于可视化编辑器编辑不同版本的生效内容；
- 指标设置：设置实验关注的指标等内容；
| # | 火山引擎 | 神策数据 | VWO |
|---|---|---|---|
| 基础设置 |  |
 |
🚫 |
| 受众设置 |  |
 |
 |
| 实验版本设置 |  |
 |
  |
| 指标设置 |  |
 |
 |
可视化实验的创建流程相对于与常规的参数实验创建流程而言几乎一致，主要区别在于第三部分，实验版本设置。常规的参数实验主要是对不同的分组设置相应的实验参数来实现，而对于可视化实验设置不同的实验版本（分组）主要是通过两个步骤来完成：
- 设置 URL 匹配规则：配置需进行实验的页面 URL ，可根据需要设置不同的匹配规则
- 可视化编辑器编辑：通过可视化编辑器进入相应 URL 页面操作形成不同的策略效果
2.2 可视化编辑器
可视化编辑器是可视化实验中最为重要的内容，其提供了可视化编辑页面内容的能力。可视化编辑器通过不同的编辑操作可生成不同的实验版本（也就是分组），当用户通过分流命中该实验版本时通过 JS SDK 结合实验版本数据就能将页面展示为该实验版本编辑的样式和内容。
2.2.1 编辑器模式
| iframe 内嵌模式 | 原页面编辑模式 |
|---|---|
 |
 |
| 待编辑页面内嵌在 AB 平台内，在 AB 平台内即可完成可视化编辑 | 待编辑页面直接打开编辑，在 AB 平台外完成编辑后数据传回平台 |
火山引擎、神策数据和 VWO 等三个平台的可视化编辑器模式主要分为两种：iframe 内嵌模式和原页面编辑模式：
- iframe 内嵌模式：通过 iframe 的方式将待编辑页面内嵌在 AB 平台内，结合可视化 SDK 在 AB 平台内完成内容的修改；
- 原页面编辑模式：在浏览器新 tab 打开待编辑的页面，结合浏览器扩展或可视化 SDK 在新页面完成内容的编辑并传回AB 平台。
三个平台对不同编辑器模式的支持各不相同，总体而言，火山引擎🏆提供了更多方式供用户选择：
| # | 火山引擎 🏆 | 神策数据 | VWO |
|---|---|---|---|
| iframe 内嵌模式 - 可视化 SDK | ✅ | ✅ | -- |
| iframe 内嵌模式 - 浏览器扩展 | ✅ DataTester | -- | -- |
| 原页面编辑模式 - 浏览器扩展 | ✅VisualEditor | -- | ✅ VWO |
iframe 内嵌模式更加贴近平台，用户在使用体验上与平台割裂感较小，但是在技术层面内嵌模式存在一定跨域等限制，扩展性差；原页面编辑模式需要打开新页面进行编辑，与平台的割裂感较强，并且需要用户安装浏览器扩展，但是没有跨域问题，可扩展性好。
2.2.2 编辑器内容
无论是哪个平台或者哪种编辑模式，工作区域均可以分为三个部分，页面区、属性设置区和工具栏区。在用户进入可视化编辑器后，先在页面区 选中需要进行编辑的元素，然后在属性设置区 对现有的属性进行编辑更改形成优化策略，最后在工具栏区可预览效果并保存配置。
- 页面区：进行编辑的页面，用户可在页面区选中需要编辑的元素，编辑内容实时更新；
- 属性设置区：对需要编辑的元素内容进行更改；
- 工具栏区：包括编辑模式/预览模式的切换、操作保存、切换不同页面尺寸等功能。
| 火山引擎 | 神策数据 | VWO |
|---|---|---|
 |
 |
 |
2.2.3 编辑器功能
火山引擎、神策数据和 VWO 等三个平台的可视化编辑器在主要功能上基本一致，都提供了对页面元素进行编辑的能力，但在细节上和功能上各有差异各有特色，以下列举各个平台一些亮点功能：
| 平台 | 亮点功能 | 示意图 | 说明 |
|---|---|---|---|
| 火山引擎 | Widgets组件 |  |
可视化编辑器可选择文本、链接、图片和公告等组件模板快速创建内容，无需代码 |
| 火山引擎 | 新增元素（代码编辑器） |  |
支持在选中元素之前、之后、内部之前和内部之后位置自定义 HTML 进行元素新增 |
| 神策数据 | 代码编辑器 |  |
可视化编辑器支持自定义新增 CSS 和 JS 代码，并可直接应用在页面区预览效果 |
| VWO | 代码编辑器 |  |
除了支持自定义 JS/CSS 代码之外，还能对变体修改的内容根据特定语法进行修改 |
| VWO | 自定义属性 |  |
除了属性设置区提供的可配置属性之外，还支持自定义添加属性，功能更强大 |
| VWO | 组件 Libray |  |
在 Library 集合了 widgets 和基础组件模版以供使用者选择和使用 |
| VWO | 智能 AI |  |
通过 GPT-3.5 Turbo 大模型对文案的优化给出建议选项 |
火山引擎、神策数据和 VWO 等三个平台的可视化编辑器功能对比，总体而言 VWO 的可视化编辑器功能最为强大完善，以下列举部分功能对比：
| 功能 | 火山引擎 | 神策数据 | VWO 🏆 |
|---|---|---|---|
| 编辑元素 | ✅ | ✅ | ✅ |
| 页面预览 | ✅ | ✅ | ✅ |
| 新增元素 | ✅ | -- | ✅ |
| 删除元素 | ✅ | -- | ✅ |
| 撤销/恢复 | ✅ | ✅ | ✅ |
| 操作记录 | ✅ | ✅ | ✅ |
| 分组增删 | -- | ✅ | ✅ |
| 分组切换 | ✅ | ✅ | ✅ |
| 自定义尺寸 | ✅ | ✅ | ✅ |
| 自定义属性 | -- | -- | ✅ |
| Widgets 组件 | ✅ | -- | ✅ |
| 智能 AI | -- | -- | ✅ |
| 代码编辑器 | -- | ✅ | ✅ |
2.3 实验版本详情
在可视化编辑器完成编辑点击保存后，此时就完成了一个实验版本的配置，当用户命中这一实验版本的时候就会展示为所配置的内容。在实验创建和实验详情中用户需要查看自己所配置的实验版本，可视化编辑是一系列的变更并涉及具体页面，不同的平台对于可视化编辑详情的展示方式也各不相同，主要有以下三种:
- 文本记录：通过文本的方式记录了每一个实验版本中的编辑内容，例如火山引擎和神策数据就提供了这种方式；
- 缩略图：以快照的形式非常直观清楚的可以看到更改后的页面样式内容，例如神策数据和 VWO 就提供了这种方式；
- 预览模式：直接通过可视化编辑器的预览模式打开页面进行预览查看变更内容，例如 VWO 就提供了这种方式；
| # | 示意图 | 说明 |
|---|---|---|
| 火山引擎 |  |
火山引擎在详情页面中，每一项操作变更为一条记录，卡片式展示了用户所执行的可视化编辑操作记录，包括所操作元素位置、操作日期、操作类型以及操作前后的取值等内容，但没有提供更加直观的缩略图进行预览. |
| 神策数据 |  |
在神策数据中完成编辑后可在详情中进行内容查看，主要分为两种方式：1. 缩略图：通过 chromium 截图，每个试验的页面修改能够通过预览截图清晰看到；2.文本记录：以变更元素为维度进行聚合，展示了每个元素所进行的每项变更操作 |
| VWO |    |
在创建流程 中完成编辑返回后没有地方能查看编辑内容，也没有缩略图供查看，只有重新进入可视化编辑器查看。在实验详情中可查看每个变体的缩略图或者打开新页面预览每个变体的变更效果，在预览模式的调试器中可查看变更记录。 |
实验版本详情的使用体验神策数据最佳🏆，既提供了缩略图这样直观的方式，又提供了文本记录这样详细的方式。
三、应用场景
3.1 前置条件及限制
- 仅支持 Web 及 H5 页面，包括 App 内的 H5 页面
- 可视化实验的页面需要接入 Web/JS SDK
- 通过 Chrome 扩展方式使用可视化编辑器则需使用 Chrome 浏览器并安装插件
3.2 使用场景
可视化实验最常在首页、详情页、搜索页、落地页、H5活动页 等位置应用于与前端紧密相连的表现层（UI 层）实验，通过更改文案内容、图片样式、元素大小、元素颜色、元素位置等来提高目标信息的传达率和功能使用率，吸引用户的注意力，提高用户留存率和转化率。
| # | 场景 | 说明 | 示例 |
|---|---|---|---|
| 1 | 界面设计优化 | 通过对比不同版本的界面设计，确定哪个版本更能吸引用户，提高用户留存率和转化率 | 例如通过调整商品卡片的样式的实验来确定优化以提高对用户的吸引程度 |
| 2 | 内容优化 | 通过对比不同版本的内容，确定哪个版本更能吸引用户，提高用户留存率和转化率 | 例如通过调整推荐位的样式和内容的实验来确定优化以提高点击转化率等 |
| 3 | 功能优化 | 通过对比不同版本的功能，确定哪个版本更能满足用户需求，提高用户留存率和转化率 | 例如通过调整不同功能模块的位置和布局的实验来确定优化以提高转化率等 |
| 4 | 营销策略优化 | 通过对比不同版本的营销策略，确定哪个版本更能吸引用户，提高用户留存率和转化率 | 例如通过调整签到页面的样式和文案的实验来确定优化以提高用户粘性等 |
四、使用价值
1. 实时编辑预览，降低使用门槛
可视化实验中使用可视化编辑器操作可以实时预览所进行变更的内容，相比于通过参数所进行的实验而言更加直观，优化了实验策略的确认流程，使用者可以更好地了解不同版本之间的效果。可视化实验基于可视化编辑器的实验创建方式全程无需进行编程，通过可视化拖拽形式就能改变产品/页面布局和各种前端元素，对于产品和运营等不具有研发背景的同学来说无疑是大大降低了使用 AB 工具的门槛，正所谓人人都是实验官。
2. 提升实验效率，助力业务指标
对于 Web 页面中进行内容的替换或编辑等实验场景，通过所见即所得的可视化编辑器即可快速且便捷地生成不同版本的实验策略，不再依赖于研发编码即可快速发布实验，大大降低了实验的人力和沟通成本，提高了实验的效率。可视化实验的使用门槛降低，实验成本降低，这使得业务人员在相同条件下能够进行更多的实验，进行更加快速的迭代，提升相关业务指标的机率相应也就会变大。
3. 与大模型结合，提供应用场景
可视化实验这一形式对 AB 与大模型相结合提供了应用场景，可结合大模型提供智能助手，对用户编辑页面和设计优化策略时给出建议，例如：
- 实验方在面对如何快速找到效果最佳的文案时，可结合大语言模型给出文案建议或润色文案等，可视化编辑器快速完成配置更改；
- 实验方在验证一个按钮不同样式对用户的吸引程度时，可以结合大模型给出多种按钮样式方案供选择，可支持一键完成配置；
- 实验方在对落地页的背景图片对转化率提升进行实验时，可以结合文生图大模型生成多种图片供实验选择；
- ......