mip-experiment 前端抽样实验

mip-experiment 组件用于前端抽样实验。
可用于按钮,banner,广告等前端可控元素的改版实验,与mip-pix,可配合使用。

标题内容
类型通用
支持布局nodisplay
所需脚本https://mipcache.bdstatic.com/static/v1/mip-experiment/mip-experiment.js

示例

1. 基本用法

每次刷新会重新分组。

预览
<style>
button {
    background-color: aquamarine;
    color: black;
    display: block;
    margin:10px;
    padding:20px;
}
body[mip-x-button-color=yellow] .exp-btn1 {
    background-color: yellow;
}
body[mip-x-button-color=grey] .exp-btn1 {
    background-color: #888888;
}
body[mip-x-button-color=blue] .exp-btn1 {
    background-color: #3388ff;
}
</style>
<mip-experiment layout="nodisplay" class="mip-hidden">
    <script type="application/json" for="mip-experiment">
        {
            "button-color": {
                "sticky": false,
                "descri": "1.设置按钮背景色,黄-灰-蓝-绿",
                "variants": {
                    "yellow": 30,
                    "grey": 30,
                    "blue": 30
                }
            }
        }
    </script>
    <p>设置按钮背景色,黄(30%)-灰(30%)-蓝(30%)-绿(默认10%)</p>
    <p>每次刷新重新分组</p>
    <button class="exp-btn1">修改背景色</button>
</mip-experiment>

2. 固定分组用法

第一次实验抽样后,分组存储在localStorage中,再次刷新分组不变。

预览
<style>
button {
    background-color: aquamarine;
    color: black;
    display: block;
    margin:10px;
    padding:20px;
}
body[mip-x-button-color2=yellow] .exp-btn2 {
    background-color: yellow;
}
body[mip-x-button-color2=grey] .exp-btn2 {
    background-color: #888888;
}
body[mip-x-button-color2=blue] .exp-btn2 {
    background-color: #3388ff;
}
</style>
<mip-experiment layout="nodisplay" class="mip-hidden">
    <script type="application/json" for="mip-experiment">
        {
            "button-color2": {
                "sticky": true,
                "descri": "2.设置按钮背景色,黄-灰-蓝-绿",
                "variants": {
                    "yellow": 30,
                    "grey": 30,
                    "blue": 30
                }
            }
        }
    </script>
    <p>设置按钮背景色,黄(30%)-灰(30%)-蓝(30%)-绿(默认10%)</p>
    <p>每次刷新【不】重新分组</p>
    <button class="exp-btn2">修改背景色</button>
</mip-experiment>

3. 多组抽样

预览
<style>
button {
    background-color: aquamarine;
    color: black;
    display: block;
    margin:10px;
    padding:20px;
}
body[mip-x-button-color3=yellow] .exp-btn3 {
    background-color: yellow;
}
body[mip-x-button-color3=grey] .exp-btn3 {
    background-color: #888888;
}
body[mip-x-button-color3=blue] .exp-btn3 {
    background-color: #3388ff;
}
body[mip-x-font-color=black] .exp-btn3 {
    color: black;
}
body[mip-x-font-color=white] .exp-btn3 {
    color: white;
}
</style>
<mip-experiment layout="nodisplay" class="mip-hidden">
    <script type="application/json" for="mip-experiment">
        {
            "button-color3": {
                "sticky": false,
                "descri": "3.设置按钮背景色,黄-灰-蓝-绿",
                "variants": {
                    "yellow": 30,
                    "grey": 30,
                    "blue": 30
                }
            },
            "font-color": {
                "sticky": false,
                "descri": "设置按钮字体颜色,黑-白",
                "variants": {
                    "black": 50,
                    "white": 50
                }
            }
        }
    </script>
    <p>设置按钮背景色,黄(30%)-灰(30%)-蓝(30%)-绿(默认10%)</p>
    <p>设置按钮字体色,黑(50%)-白(50%)</p>
    <p>每次刷新重新分组</p>
    <button class="exp-btn3">修改背景色&字体颜色</button>
</mip-experiment>

4. 调试:打印实验信息

在mip-experiment上添加needConsole参数,可以在控制台看到分组过程和情况

预览
<style>
button {
    background-color: aquamarine;
    color: black;
    display: block;
    margin:10px;
    padding:20px;
}
body[mip-x-button-color4=yellow] .exp-btn4 {
    background-color: yellow;
}
</style>
<mip-experiment layout="nodisplay" class="mip-hidden" needConsole>
    <script type="application/json" for="mip-experiment">
        {
            "button-color4": {
                "sticky" : false,
                "descri": "4.设置按钮背景色,黄-绿",
                "variants": {
                    "yellow": 50
                }
            }
        }
    </script>
    <p>设置按钮背景色,黄(50%)-绿(默认50%)</p>
    <p>每次刷新重新分组</p>
    <p>控制台显示分组过程信息</p>
    <button class="exp-btn4">修改背景色</button>
</mip-experiment>

5. 调试:URL强制中抽样

测试时,可通过给URL添加hash强制中抽样,如#mip-x-button-color5=red

预览
<style>
button {
    background-color: aquamarine;
    color: black;
    display: block;
    margin:10px;
    padding:20px;
}
body[mip-x-button-color5=yellow] .exp-btn5 {
    background-color: yellow;
}
body[mip-x-button-color5=red] .exp-btn5 {
    background-color: red;
}
</style>
<mip-experiment layout="nodisplay" class="mip-hidden" needConsole>
    <script type="application/json" for="mip-experiment">
        {
            "button-color5": {
                "sticky" : false,
                "descri": "5.设置按钮背景色,黄-红-绿",
                "variants": {
                    "yellow": 50,
                    "red": 1
                }
            }
        }
    </script>
    <p>设置按钮背景色,黄(50%)-红(1%)-绿(默认49%)</p>
    <p>在url中添加‘#mip-x-button-color5=red’显示红色按钮</p>
    <p>控制台显示分组过程信息</p>
    <button class="exp-btn5">修改背景色</button>
</mip-experiment>

6. 与百度统计配合使用

<mip-experiment>可以和<mip-stats-baidu>标签配合统计页面元素事件的触发次数。这个功能使用百度统计的_trackEvent API发送统计请求,在百度统计后台-访问分析-事件分析可以看到统计结果。

注意事项:

  1. 需要按照<mip-stats-baidu>文档引入百度统计代码和标签,请保证 mip-stats-baidu.js 在 mip-experiment.js 之前引入。
  2. 如果引入了多个百度统计,请以_hmt.id中的token为准,在token对应的统计后台查看数据。
  3. 开发时请关注控制台报错。
  4. 百度统计的数据产出有一定延迟,请在第二天查看数据

统计使用说明:

  1. 配置多个统计:baidu-stats 为统计配置的数组,里面每一个元素相当于一句 js 的addEventListener
  2. 配置统计参数:每个配置可以传入三个参数
    1. 第一个为元素选择器(支持element, id, class)
    2. 第二个为事件(click, touchend)
    3. 第三个可以自定义(可以选择填写广告的单价或事件的权重)
  3. 统计结果:在站长平台看到的统计结果有三个参数:
    1. 第一个对应元素加事件,相当于统计参数的1和2,格式为element__click
    2. 第二个对应当前实验名和实验分组,格式为mip-x-name=group
    3. 第三个对应参数3,自定义

下面例子可用于实验 “改变按钮的背景色,计算按钮的点展比”。在baidu-stats中配置了页面加载的次数和按钮点击次数的统计。

预览
<style>
button {
    background-color: black;
    display: block;
    margin:10px;
    padding:20px;
}
body[mip-x-button-color=red] #btn01 {
    background-color: red;
}
body[mip-x-button-color=grey] #btn01 {
    background-color: #888888;
}
</style>
<mip-experiment layout="nodisplay" class="mip-hidden">
    <script type="application/json" for="mip-experiment">
        {
            "button-color6": {
                "sticky": false,
                "descri": "设置按钮背景色,红-灰-黑(默认)",
                "variants": {
                    "red": 30,
                    "grey": 30
                },
                "baidu-stats": [
                    ["window", "load"],
                    ["#btn01", "click""2.23"]
                ]
            }
        }
    </script>
    <p>设置按钮背景色,红(30%)-灰(30%)-黑(默认40%)</p>
    <p>每次刷新重新分组</p>
    <button id="btn01">修改背景色</button>
</mip-experiment>
<script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>

最后数据的产生格式为:

--次数参数A参数B参数C
第1行3083window__loadmip-x-button-color6=red
第2行3013window__loadmip-x-button-color6=grey
第3行4742window__loadmip-x-button-color6=default
第4行127#btn01__clickmip-x-button-color6=red2.23
第5行210#btn01__clickmip-x-button-color6=grey2.23
第6行272#btn01__clickmip-x-button-color6=default2.23
  • 第1行和第4行为按钮红色情况,点展比为127/3083 = 4.12%
  • 第2行和第5行为按钮灰色情况,点展比为210/3013 = 6.97%
  • 第3行和第6行为按钮黑色情况(默认,对照组),点展比为272/4742 = 5.74%

可见,红色按钮实验点展比降低,灰色按钮实验点展比升高。

属性

layout, class

说明:组件布局,建议使用,避免实验初始化时页面抖动
必选项:否
类型:字符串
取值:layout="nodisplay" class="mip-hidden"

实验名

说明:示例中button-color处,注意和css中的mip-x-对应
必选项:是
类型:字符串

descri

说明:实验描述,不参与实验分组计算
必选项:否
类型:字符串

variants

说明:实验分组配置。填写key-value组成的对象。key对应css中的属性选择器,value对应分组流量。如果value填写30,则有30%的流量进入该分组
必选项:是
类型:JSON对象

sticky

说明:实验分组配置。填写key-value组成的对象。key对应css中的属性选择器,value对应分组流量。如果value填写30,则有30%的流量进入该分组
必选项:否
类型:布尔值
默认值:true
取值:true, false

baidu-stats

说明:实验分组统计配置。具体配置方法,请参考本文【6. 与百度统计配合使用】 必选项:否
类型:数组

注意事项

  1. <application/json>为实验分组配置,要求填写合法的JSON对象。开发时请注意控制台是否有报错。
  2. 如果使用百度统计,请保证mip-stats-baidu.js在mip-experiment.js之前引入。