一. 概述可视化实验,通过所见即所得的在线编辑(比如对页面中的图片、文字、颜色、位置等元素和属性进行编辑),降低在Web/H5页面优化的场景下,产品方和运营方使用A/B实验工具的成本,免除编码。
前置条件及限制:目前可视化实验支持在Web及H5页面开启。用于创建可视化实验的页面需要接入「A/B 测试」的Web/H5/WAP SDK。页面传输协议需使用HTTPS(Hypertext Transfer Protocol Secure:超文本传输安全协议)。实验类型: 可视化实验的实验类型为客户端实验。
浏览器建议: 主流的浏览器均可支持;iOS系统自带Safari浏览器支持iOS10及以上版本(若系统版本较低请升级到iOS10及以上)。建议使用最新版Chrome及Windows Edge。二. 应用场景 可视化实验适用于落地页、主页等单/多页面优化的场景。多页面可视化实验:在一个版本中可以包含多个页面,适用于优化前后有关联的多个页面。通过可视化编辑器对文本、图片等元素进行编辑和替换,进而生成多个版本进行实验,探究不同方案的页面效果,如用户停留时长、PV/UV等。目前可视化实验支持的页面包括可接入SDK的自建Web及H5页面,暂不支持第三方工具搭建的页面。三、操作演示 快速了解可视化实验创建流程
四. 可视化编辑操作说明单页面可视化实验:点击DataTester的「进入编辑器」,即可进入可视化编辑页面。 td {white-space:nowrap;border:1px solid #dee0e3;font-size:10pt;font-style:normal;font-weight:normal;vertical-align:middle;word-break:normal;word-wrap:normal;}模块子项操作说明顶部导航栏/内容字体排版支持对字号、颜色、文本内容、加粗/倾斜、对齐方式等属性进行编辑样式尺寸、布局、背景尺寸支持元素尺寸相关CSS样式编辑事件圈选事件针对「按钮」、「链接」、「图片」、「文本」类型的元素提供圈选事件能力。在编辑栏下,点击事件,新增事件名称;保存后新建指标:点击新建指标,会弹出指标新建页面。HTML新增元素/支持通过HTML代码的方式新增元素。(1)格式化 (2)换行和取消换行 (3)HTML代码格式校验 (4)手动输入标签,自动闭合标签 (5)优化默认初始化示例代码多页面可视化实验:点击【添加页面】,可在一个版本中添加多个页面,可对每个页面单独进行编辑。 注:页面顺序不会影响用户浏览页面体验。举例,假如用户首先看到的是页面2,然后再看到的是页面1,用户仍然会看到同一实验版本的页面1。多页面编辑:可在左上角切换至不同页面进行可视化编辑,具体可操作项同可视化编辑操作说明 。