mip-experiment 前端抽样实验

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

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

示例

1. 基本用法

每次刷新会重新分组。

  1. <style>
  2. button {
  3.     background-color: aquamarine;
  4.     color: black;
  5.     display: block;
  6.     margin:10px;
  7.     padding:20px;
  8. }
  9. body[mip-x-button-color=yellow] .exp-btn1 {
  10.     background-color: yellow;
  11. }
  12. body[mip-x-button-color=grey] .exp-btn1 {
  13.     background-color: #888888;
  14. }
  15. body[mip-x-button-color=blue] .exp-btn1 {
  16.     background-color: #3388ff;
  17. }
  18. </style>
  19. <mip-experiment layout="nodisplay" class="mip-hidden">
  20.     <script type="application/json" for="mip-experiment">
  21.         {
  22.             "button-color": {
  23.                 "sticky": false,
  24.                 "descri": "1.设置按钮背景色,黄-灰-蓝-绿",
  25.                 "variants": {
  26.                     "yellow": 30,
  27.                     "grey": 30,
  28.                     "blue": 30
  29.                 }
  30.             }
  31.         }
  32.     </script>
  33.     <p>设置按钮背景色,黄(30%)-灰(30%)-蓝(30%)-绿(默认10%)</p>
  34.     <p>每次刷新重新分组</p>
  35.     <button class="exp-btn1">修改背景色</button>
  36. </mip-experiment>

2. 固定分组用法

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

  1. <style>
  2. button {
  3.     background-color: aquamarine;
  4.     color: black;
  5.     display: block;
  6.     margin:10px;
  7.     padding:20px;
  8. }
  9. body[mip-x-button-color2=yellow] .exp-btn2 {
  10.     background-color: yellow;
  11. }
  12. body[mip-x-button-color2=grey] .exp-btn2 {
  13.     background-color: #888888;
  14. }
  15. body[mip-x-button-color2=blue] .exp-btn2 {
  16.     background-color: #3388ff;
  17. }
  18. </style>
  19. <mip-experiment layout="nodisplay" class="mip-hidden">
  20.     <script type="application/json" for="mip-experiment">
  21.         {
  22.             "button-color2": {
  23.                 "sticky": true,
  24.                 "descri": "2.设置按钮背景色,黄-灰-蓝-绿",
  25.                 "variants": {
  26.                     "yellow": 30,
  27.                     "grey": 30,
  28.                     "blue": 30
  29.                 }
  30.             }
  31.         }
  32.     </script>
  33.     <p>设置按钮背景色,黄(30%)-灰(30%)-蓝(30%)-绿(默认10%)</p>
  34.     <p>每次刷新【不】重新分组</p>
  35.     <button class="exp-btn2">修改背景色</button>
  36. </mip-experiment>

3. 多组抽样

  1. <style>
  2. button {
  3.     background-color: aquamarine;
  4.     color: black;
  5.     display: block;
  6.     margin:10px;
  7.     padding:20px;
  8. }
  9. body[mip-x-button-color3=yellow] .exp-btn3 {
  10.     background-color: yellow;
  11. }
  12. body[mip-x-button-color3=grey] .exp-btn3 {
  13.     background-color: #888888;
  14. }
  15. body[mip-x-button-color3=blue] .exp-btn3 {
  16.     background-color: #3388ff;
  17. }
  18. body[mip-x-font-color=black] .exp-btn3 {
  19.     color: black;
  20. }
  21. body[mip-x-font-color=white] .exp-btn3 {
  22.     color: white;
  23. }
  24. </style>
  25. <mip-experiment layout="nodisplay" class="mip-hidden">
  26.     <script type="application/json" for="mip-experiment">
  27.         {
  28.             "button-color3": {
  29.                 "sticky": false,
  30.                 "descri": "3.设置按钮背景色,黄-灰-蓝-绿",
  31.                 "variants": {
  32.                     "yellow": 30,
  33.                     "grey": 30,
  34.                     "blue": 30
  35.                 }
  36.             },
  37.             "font-color": {
  38.                 "sticky": false,
  39.                 "descri": "设置按钮字体颜色,黑-白",
  40.                 "variants": {
  41.                     "black": 50,
  42.                     "white": 50
  43.                 }
  44.             }
  45.         }
  46.     </script>
  47.     <p>设置按钮背景色,黄(30%)-灰(30%)-蓝(30%)-绿(默认10%)</p>
  48.     <p>设置按钮字体色,黑(50%)-白(50%)</p>
  49.     <p>每次刷新重新分组</p>
  50.     <button class="exp-btn3">修改背景色&字体颜色</button>
  51. </mip-experiment>

4. 调试：打印实验信息

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

  1. <style>
  2. button {
  3.     background-color: aquamarine;
  4.     color: black;
  5.     display: block;
  6.     margin:10px;
  7.     padding:20px;
  8. }
  9. body[mip-x-button-color4=yellow] .exp-btn4 {
  10.     background-color: yellow;
  11. }
  12. </style>
  13. <mip-experiment layout="nodisplay" class="mip-hidden" needConsole>
  14.     <script type="application/json" for="mip-experiment">
  15.         {
  16.             "button-color4": {
  17.                 "sticky" : false,
  18.                 "descri": "4.设置按钮背景色,黄-绿",
  19.                 "variants": {
  20.                     "yellow": 50
  21.                 }
  22.             }
  23.         }
  24.     </script>
  25.     <p>设置按钮背景色,黄(50%)-绿(默认50%)</p>
  26.     <p>每次刷新重新分组</p>
  27.     <p>控制台显示分组过程信息</p>
  28.     <button class="exp-btn4">修改背景色</button>
  29. </mip-experiment>

5. 调试：URL 强制中抽样

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

  1. <style>
  2. button {
  3.     background-color: aquamarine;
  4.     color: black;
  5.     display: block;
  6.     margin:10px;
  7.     padding:20px;
  8. }
  9. body[mip-x-button-color5=yellow] .exp-btn5 {
  10.     background-color: yellow;
  11. }
  12. body[mip-x-button-color5=red] .exp-btn5 {
  13.     background-color: red;
  14. }
  15. </style>
  16. <mip-experiment layout="nodisplay" class="mip-hidden" needConsole>
  17.     <script type="application/json" for="mip-experiment">
  18.         {
  19.             "button-color5": {
  20.                 "sticky" : false,
  21.                 "descri": "5.设置按钮背景色,黄-红-绿",
  22.                 "variants": {
  23.                     "yellow": 50,
  24.                     "red": 1
  25.                 }
  26.             }
  27.         }
  28.     </script>
  29.     <p>设置按钮背景色,黄(50%)-红(1%)-绿(默认49%)</p>
  30.     <p>在url中添加‘#mip-x-button-color5=red’显示红色按钮</p>
  31.     <p>控制台显示分组过程信息</p>
  32.     <button class="exp-btn5">修改背景色</button>
  33. </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 中配置了页面加载的次数和按钮点击次数的统计。

  1. <style>
  2. button {
  3.     background-color: black;
  4.     display: block;
  5.     margin:10px;
  6.     padding:20px;
  7. }
  8. body[mip-x-button-color=red] #btn01 {
  9.     background-color: red;
  10. }
  11. body[mip-x-button-color=grey] #btn01 {
  12.     background-color: #888888;
  13. }
  14. </style>
  15. <mip-experiment layout="nodisplay" class="mip-hidden">
  16.     <script type="application/json" for="mip-experiment">
  17.         {
  18.             "button-color6": {
  19.                 "sticky": false,
  20.                 "descri": "设置按钮背景色,红-灰-黑（默认）",
  21.                 "variants": {
  22.                     "red": 30,
  23.                     "grey": 30
  24.                 },
  25.                 "baidu-stats": [
  26.                     ["window", "load"],
  27.                     ["#btn01", "click"，"2.23"]
  28.                 ]
  29.             }
  30.         }
  31.     </script>
  32.     <p>设置按钮背景色,红（30%）-灰（30%）-黑（默认40%）</p>
  33.     <p>每次刷新重新分组</p>
  34.     <button id="btn01">修改背景色</button>
  35. </mip-experiment>
  36. <script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>

最后数据的产生格式为：

— 次数 参数A 参数B 参数C
第1行 3083 window__load mip-x-button-color6=red
第2行 3013 window__load mip-x-button-color6=grey
第3行 4742 window__load mip-x-button-color6=default
第4行 127 #btn01__click mip-x-button-color6=red 2.23
第5行 210 #btn01__click mip-x-button-color6=grey 2.23
第6行 272 #btn01__click mip-x-button-color6=default 2.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-[button-color] 对应
必选项：是
类型：字符串

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 之前引入。