abtest-可视化实验sdk编辑功能开发浅谈

前言

前不久Hubble推出AB测试平台，web端已支持了编程实验、多链接实验，现在又支持了可视化实验。可视化实验通过所见即所得的在线配置，降低了运营方使用A/B Testing 的成本，本文就web端可视化实验实现简单分享下。

分析

整个可视化实验流程大体如下：
1. 创建可视化实验，填入目标url；
2. 打开目标页，进入在线编辑状态；
3. 编辑完成后保存退出；
4. 进入可视化调试；
5. 分配流量开启A/B Testing；
6. 实验结束；

本次我们要讲解的就是第2个步骤实现。 技术实现方案离不开需求的确定，我们Hubble的可视化实验编辑需求简单归为以下几点：
1. 支持目标页在线编辑；
2. 支持编辑类型：文字、背景、边框、边界、页面布局、目标链接、输入框提示内容修改；

开发

目标页在线编辑

在Hubble平台打开目标页前，在链接后面添加进入编辑的标记；然后我们需要在Hubble的js-sdk中，新增可视化实验模块，支持识别该标记，远程拉取编辑js文件；拉取完毕后，初始化编辑控件；
大体实现:

let _isEditor = function() {
    const match = location.href.match(/hubble_abtest_visual_key=([^&#]+)/);
    let bool = false;
    // 判断省略
    return bool;
};
let _loadControlJs() {
    // 拉取代码后，初始化编辑控件
};

if (_isEditor()) {
    _loadControlJs();
}

选择页面元素

在选择页面元素过程中，我们需要阻止元素的默认事件，比如选中了一个a标签，我们需要阻止直接跳出页面。一种解决方法就是添加一个遮罩层，不让用户直接点击元素，Hubble是直接创建了一个覆盖整个body的遮罩层来解决。这时候会带来了一个问题，用户无法选择页面元素了。
思路：
1. 首先在body上添加hover事件，当用户hover到页面上时，隐藏遮罩层，此时触发hover事件，拿到了目标页面dom信息；
2. 然后立即显示遮罩层；

该思路是可行的，但有个问题需要解决，如何拿到目标页面dom信息。一种方式通过调用document.elementFromPoint(x,y)方法，获取hover坐标下的所有页面元素。
大体实现:

$("body").bind("click mousemove", handleEvent);
const handleEvent = function(e) {
    e.preventDefault();
    e.stopPropagation();
    let element;
    switch(e.type) {
        case 'mousemove':
           $(".mask").attr("style", "width: 0 !important");
           element = document.elementFromPoint(e.clientX, e.clientY);
           $(".mask").attr("style", "");
        break;  
    }
    return element;
}

上面就返回了选择的元素；

编辑元素信息

上面我们已经拿到元素信息，编辑元素信息方法也简单了，在相应的编辑控件内设置好值，sdk自动调用相应API设置，这样改动后立即可以查看效果，具体实现不再讲述。

自此，编辑这块实现已结束。

结尾

本文简单分享了下Hubble的可视化实验编辑实现的方法，希望对大家理解web客户端端可视化实现原理有些帮助。

这里推荐下我们Hubble数据分析和A/B test平台：点击查看Hubble平台。

@作者：白云飘飘（[email protected]）

@github: https://github.com/534591395

欢迎关注我的微信公众号：
或者微信公众号搜索 新梦想兔，关注我哦。