🔬可视化编辑器简介

可视化编辑器VisualEditor是一款"无代码 "修改网站元素的内容，样式，布局的工具**，**面向非研发同学使用，通过识别元素和可视化配置等方式来创建页面内容和交互体验，支持任意网页进行可视化编辑。

AB相关可视化实验可以通过可视化编辑器，降低用户使用A/B实验工具的成本，实现业务增长的目标。产品运营可以不需要编写代码 的情况下轻松地创建和管理不同版本的页面，以确定哪个版本更能吸引用户，提高用户留存率和转化率等业务指标，实现业务目标，同时可以解决RD研发人力的带宽限制产品能力快速迭代的问题。

基本概念

概念	说明
无代码	不需要编写编程语言
页面设计	包含内容，字体，样式，布局
元素	DOM元素
属性	DOM元素的属性
可交互元素	指网页或应用程序中的一些元素，用户可以与之进行交互，例如下拉菜单、打开导航栏、打开对话框、输入框、按钮、链接等
编辑身份认证页面	需要登陆或者鉴权之后才能访问的页面
widgets组件	包含基础组件（文本，链接，图片，视频，弹窗等），业务组件（公告，轮播，倒计时）等
AI文本建议	通过AIGC对已有的内容进行文本生成

技术架构

可视化编辑器主要是由VE SDK作为底层支撑。

VE SDK：Core SDK，Config SDK，Switch SDK组成。
可视化编辑能力
- 按照「编辑行为」分类：编辑元素和属性，新增widgets组件，删除元素，编辑方式。
  - 编辑：编辑文本，编辑链接，编辑图片，编辑可交互元素，编辑身份认证页面，编辑视频。
  - 新增：新增元素，widgets，模板，AI文本建议，动态变量。
  - 删除：隐藏，移除。
  - 方式：编码Coding，可视化Visual
- 按照「编辑复杂性」分类：基础视觉，高级视觉
  - 基础视觉：设计网页元素
  - 高级视觉：代码编辑器，新增Widgets组件，widgets模板组件
可视化编辑模式：iframe内嵌模式，Chrome扩展模式。
可视化编辑业务：可视化实验，多页可视化实验，MVT多变体实验，灰度发布。

功能清单

快速了解使用流程👇

具体功能清单👇（5个模块，45个细分能力）

模块能力	元素类型	细分能力
基础配置	全部元素	模式切换
刷新
帮助中心
保存
编辑元素和属性	文本	编辑-文本-内容
编辑-字体-颜色
编辑-字体-加粗
编辑-字体-下划线
编辑-字体-斜体
编辑-样式-背景色
编辑-样式-边框
编辑-布局-外边距
编辑-布局-内边距
链接	编辑-链接-地址
编辑-链接-方式
编辑-链接-内容
编辑-字体-颜色
编辑-字体-加粗
编辑-字体-下划线
编辑-字体-斜体
编辑-样式-背景色
编辑-样式-边框
编辑-布局-外边距
编辑-布局-内边距
图片	编辑-图片-地址
编辑-图片-描述
编辑-样式-宽
编辑-样式-高
编辑-样式-背景色
编辑-样式-边框
编辑-布局-外边距
编辑-布局-内边距
新增widgets组件	全部元素	新增-widgets-文本-预览
新增-widgets-文本-保存
新增-widgets-链接-预览
新增-widgets-链接-保存
新增-widgets-图片-预览
新增-widgets-图片-保存
新增-widgets-公告-预览
新增-widgets-公告-保存
删除元素	全部元素	删除-删除
删除-隐藏
操作历史	全部元素	操作历史-编辑
操作历史-新增
操作历史-删除

产品优势

无需编写代码：使用可视化编辑器，产品运营无需编写代码，即可创建和管理AB测试，大大降低了技术门槛，提高了工作效率。
快速迭代：使用可视化编辑器，产品运营可以快速创建和管理不同版本的页面，进行快速迭代，以便更快地优化产品，提高用户体验和转化率。
实时预览：使用可视化编辑器，产品运营可以实时预览不同版本的页面，以便更好地了解不同版本的效果，从而做出更好的决策。
数据分析：使用可视化编辑器，产品运营可以轻松地进行数据分析，以便更好地了解不同版本的效果，从而做出更好的决策。
可视化报告：使用可视化编辑器，产品运营可以轻松地生成可视化报告，以便更好地向团队和上级汇报AB测试的结果，从而更好地推动产品优化。

应用场景

界面设计优化：通过AB可视化编辑器，产品运营可以轻松创建和管理不同版本的界面设计，以确定哪个版本更能吸引用户，提高用户留存率和转化率。
内容优化：通过AB可视化编辑器，产品运营可以轻松创建和管理不同版本的内容，以确定哪个版本更能吸引用户，提高用户留存率和转化率。
功能优化：通过AB可视化编辑器，产品运营可以轻松创建和管理不同版本的功能，以确定哪个版本更能满足用户需求，提高用户留存率和转化率。
营销策略优化：通过AB可视化编辑器，产品运营可以轻松创建和管理不同版本的营销策略，以确定哪个版本更能吸引用户，提高用户留存率和转化率。

🏃快速开始（2步）

推荐使用Chrome浏览器版本 >= 90.0.0.0，主要分为 2 步，整体流程为：

【1⃣️下载添加/Chrome商城添加】
- 方式 1：在chrome商城添加
- 方式 2：或者直接下载添加，在扩展列表中，固定扩展。
【2⃣️开始使用】
- 方式 1：在扩展中打开可视化编辑器的开关，然后对页面的可视化操作，保存。
- 方式 2 ：在DataTester/BytePlus Optimize中的可视化实验，点击进入编辑器，新开页面，自动打开开关，然后对页面进行可视化操作，保存。

1⃣️下载添加/Chrome商城添加

提供2种下载方式：

方式 1 ：在chrome商城添加，下载地址
方式 2：或者在AB实验的实验版本中直接离线下载，在扩展列表中添加，固定扩展。

2⃣️直接使用/结合AB使用

方式 1：在扩展中打开可视化编辑器的开关，然后对页面的可视化操作，保存。在页面中编辑，新增，删除元素等操作。

方式2 ：在 DataTester / BytePlus Optimize中的可视化实验，点击进入编辑器，新开页面，自动打开开关，然后对页面进行可视化操作，保存，从而进行AB实验。

✍️ 新增核心能力

【新增】可视化实验使用 Chrome 扩展模式

Chrome扩展是一种可以帮助用户在浏览网页时直接进行编辑的工具。它可以让用户在浏览器中直接编辑网页内容，而无需进入网站后台或使用其他编辑工具。

Chrome扩展可以帮助用户更方便地进行网页编辑，提高编辑效率和准确性。同时可以帮助网站管理员更好地管理网站内容，提高管理效率。无需种SDK，可直接编辑和渲染。

可视化实验的流程：

1、创建可视化实验，填入目标url；

2、打开目标页，进入在线编辑状态；

3、编辑完成后保存退出；

4、进入可视化调试；

5、分配流量开启A/B实验；

6、实验结束

可视化实验使用chrome扩展的编辑模式，可以在「打开目标页，进入在线编辑状态」的时候，打开目标页，Chrome扩展会在目标页dom加载之后，再加载chrome扩展自动打开可视化编辑的开关，而不需要用户手动打开开关。默认进入的时候chrome扩展的模式，同时我们会保留之前iframe的可视化编辑的模式。

演示地址：console.volcengine.com/datatester/...

演示Gif图：

【新增】可视化交互元素

可交互元素是网页或应用程序中非常重要的一部分，它们直接影响用户体验和用户行为。好的可交互元素可以提高用户体验和转化率，而不好的可交互元素则会降低用户体验和转化率。

编辑交互元素目的是让你在可视化编辑器中与应用进行交互。比如：你可以使用预览模式来编辑下拉菜单的元素，或打开对话框模式，或打开导航栏。切换到预览模式，就可以禁用可视化编辑器的元素选择器功能，以便你可以与页面交互。

预览模式向您显示"真实"页面，以便您可以与其交互。当切换回编辑模式时，你会看到可选择可编辑的页面。

❗️如果您使用交互模式离开 Web/H5 应用程序中最初加载的 URL，比如：新开页面，或者原页面发生了跳转，都可能导致可视化编辑器将无法工作。

演示地址：console.volcengine.com/datatester/...

演示Gif图：

【新增】可视化需要身份验证页面

编辑需要身份验证页面是指在网站或应用程序中，需要用户登录或验证身份后才能进行编辑操作的页面。这种页面通常用于管理后台、个人资料页面等需要保护用户隐私和安全的场景。对于编辑需要登陆或者鉴权之后才能访问的页面，只需要在该Chrome浏览器中先完成身份验证之后，然后再进入可视化编辑器，这样目标页面就不会发生重定向或者页面路由变化。

演示地址：console.volcengine.com/datatester/...

演示Gif图：

第 1 种情况：如果在未登录的情况下，直接打开需要身份验证页面的目标页面，如果目标页面 url 的跳转到其他页面 url ，这时候可视化编辑器加载就会失败，你可以在其他页面中完成身份验证后，再次进入可视化编辑器的目标页面即可。