1. 概述

1.1. 什么是可视化试验?

可视化试验是指 通过可视化编辑的方式修改页面元素,无需代码编即可快速进行文本、图片的替换和样式调整,生成不同版本的试验方案。

具体包括文本的内容替换、字号、粗斜体、文本超链接地址以及超链接的打开方式(新窗口/当前窗口);图片的替换、宽高和边框样式等。

1.2. 应用场景

针对单个网页或者营销落地页,进行页面中某些文本、图片的替换和编辑,通过所见即所得的界面操作生成不同版本的试验策略。无需代码编程即可快速发布试验。

1.3. 应用接入

需集成Web SDK 开启使用,详情参见:SDK 集成指南

2. 新建试验

在试验列表中,点击“+新建”按钮,进入试验创建页面。

2.1. 基本信息

名称

必填,试验名称不可重复。长度不超过40字,只能包含中文、英文、数字和下划线,不支持特殊字符。

备注

选填,用于描述相关试验信息。长度不超过300字,只能包含中文、英文、数字和下划线,不支持特殊字符。

试验URL

试验URL作为触发试验的URL。当用户访问到某个原始页面时,如果当前的URL与试验平台填写的试验URL匹配时,SDK会自动根据分流结果,判断用户是否跳转到对应的试验版本。

URL匹配方式:用来判断用户当前访问的URL能否命中试验。

  • 模糊匹配:当用户访问的原始页面URL与试验URL(试验平台填写的试验URL)的域名、路径和文件扩展名(.html,.php等)相同时,即可命中试验。模糊匹配方式忽略了协议(http、https)、参数(  ?后面的字符串)、锚点( # 后面的字符串)和尾斜杠
  • 精确匹配:默认的匹配方式,当用户访问的URL与试验URL完全一致时,才会命中试验。

URL格式校验:输入的试验URL必须带有协议,即URL需要以 http:// 或 https:// 协议开头。

试验URL预览:输入合法的URL后,可以点击”预览“按钮,新标签页打开查看试验页面是否正确。

2.2. 配置关注指标

同编程试验,详情参照:新建编程试验-配置关注指标

2.3. 设置试验分组

2.3.1. 设置分组信息

试验分组信息

可以根据业务和试验情况合理规划试验分组数量,对照组+试验组的数量不超过 10 个。分组名称支持重命名,支持中文、英文和数字,不支持特殊字符,长度最多支持20个字符。

分配方式

为试验分组分类参与试验的流量比例。

  • 平均分配:将 100% 的流量均匀自动分配到每个组。
  • 手动分配:手动分配每个分组的流量,流量总和为100%。

预览图

在可视化编辑器内编辑试验分组,并且提交保存后,会将每个试验分组修改后的结果自动保存截图,上传到预览图。

描述信息

支持输入中文、英文和数字,不支持特殊字符,文本长度最多支持300个字符。

2.3.2. 编辑分组策略

2.3.2.1. 分组策略

对照组

对照组策略默认与初始试验URL保持一致。

试验组

通过点击分组卡片「编辑试验」按钮,打开可视化编辑器页面。

2.3.2.2. 可视化编辑器

导航栏

支持的操作内容:

  1. 支持快捷新增、修改和删除试验分组信息
  2. 支持切换视图模式(网页设备和移动设备)和视图区域大小(调整页面比例)
  3. 支持切换网页模式:例如访问试验页面前需要进行登录操作,切换到「网页模式」后,即可进行正常的页面访问跳转。(注意:当从网页模式切换到编辑模式后,需要确保当前编辑页面的URL与试验URL一致

文本编辑

支持修改的内容:

  1. 文本内容:支持文本内容的替换
  2. 字号大小:支持修改文本字号大小
  3. 文本颜色:支持修改文本颜色和文本背景颜色
  4. 文本样式:支持修改文本对齐方式、粗斜体以及下划线
  5. 文本链接:若编辑的文本为超链接,可替换要跳转的链接地址

图片编辑

支持修改的内容:

  1. 图片地址:支持图片的替换
  2. 图片尺寸:支持修改图片宽高
  3. 图片描边:支持修改图片边框样式

修改记录

  1. 查看修改记录:支持查看当前分组相对于对照组的所有修改点
  2. 回复初始设置:针对某条修改记录,一键恢复到初始值

2.4. 选取受众用户

同编程试验,详情参照:新建编程试验-选取受众用户

3. 附:支持修改的HTML标签范围

标签

描述

基础标签
<h1> to <h6>定义 HTML 标题
<p>定义一个段落
<title>为文档定义一个标题
样式/节
<span>定义文档中的节
<div>定义文档中的节
列表
<li>定义一个列表项
<ol>定义一个有序列表
<ul>定义一个无序列表
<dd>定义列表中项目的描述
dl定义一个定义列表
dt定义一个定义列表中的项目
格式
<pre>定义预格式文本
<i>定义斜体文本
<b>定义粗体文本
<cite>定义引用(citation)
<em>定义强调文本
<mark>定义带有记号的文本
<small>定义小号文本
<strong>定义语气更为强烈的强调文本
<sub>定义下标文本
<sup>定义上标文本
<u>定义下划线文本
表单
<button>定义按钮
<label>定义input元素的标注
表格
<td>定义表格中的单元
链接
<a>定义一个链接
图像
<img>定义图像