【轉】AB實驗設計思路及實驗落地

這篇文章會讨論：

1. 在什麼情況下需要做 AB 實驗
2. 從産品/互動角度，如何設計一個實驗
3. 前端工程師如何打點
4. 如何統計資料，并保證資料準确可信
5. 如何分析實驗資料，有哪些資料需要重點關注
6. 附：如何搭建前端實驗項目，以 mip-experiment 為例

一. AB 實驗的使用場景和正确用法

通常，在頁面有樣式變化，但又不确定是修改影響好壞的時候進行 AB 實驗，實驗資料可以為改版提供有力支援。

某公司日常（1）

産品：把頁面标題變成之前的兩倍。标題就是要醒目，要大大大。

設計：打死都不同意，太大的标題不精緻不優雅。

BOSS：下面的按鈕點選導流就是收入。收入就是一切！！！你們做下實驗，采用收入高的方案。

前端：哦。

當不确認按鈕顔色，banner 大小，兩個宣傳語哪個效果好的時候，實驗資料可以幫你做決定。

二. 産品經理如何設計實驗？

在設計一個實驗時，需要考慮以下問題：

2.1 實驗的目的是什麼？

提升點選：提升單個按鈕轉化能力，提升頁面總體點選率，增加廣告收入

使用者留存：增加使用者在頁面的留存時長，拉升登入，減少多步驟頁面的使用者流失

強化功能：增加使用者搜尋次數，增加使用者點贊頻率，增加使用者購買次數

重點關注一個目标，并選擇其它幾個目标作為輔助，以免走偏。比如：提升廣告點選率，但不減少使用者的留存時長和購買次數。Jenny_L 多啰嗦一句，使用者體驗是絕對不能損失的。在頁面頭部多插入一條廣告，雖然可以短時間内提升廣告收入，但長期來看會造成使用者反感，造成永久的使用者流失。

2.2 實驗應設定哪些變量，哪些不變量？

樣式：按鈕變大，banner 底色，文章行間距和長度，中英混排樣式

互動：增加提醒，增加面包屑導航，增加 loading 動畫

文案：文案風格，文字長度

通常情況下，做實驗都是使用控制變量法，僅改變一個影響因素，保持其他因素不變。控制變量法在實體實驗中經常用到，比如自由落體實驗：使用相同的物體（保證空氣阻力不變），僅改變物體下落的初始高度，計算下落時間與高度的關系。類似地，在 web 樣式改版實驗中，僅改變标題大小，保持其他元素一緻，這樣就能得出标題文字大小和下方按鈕點選率的關系了。

某公司日常（2）

産品：我們做個實驗，驗證“标題變大，按鈕點選量增加”。

設計：title @2x 的設計稿給你。

前端：好。

2.3. 為得出實驗結論，需要關注哪些資料？

2.3.1 提升頁面的使用者體驗：

• 使用者停留時間
• 互動動作次數
• 頁面展現量(PV)
• 使用者數(UV)
• 單個使用者通路頁面數 = PV/UV

2.3.2 提升廣告收入：

• 廣告點選次數
• 頁面展現量(PV)
• 廣告點展比 = 點選次數/PV

2.3.3 提升 App 導流量/按鈕導流能力：

• 按鈕展示次數
• 按鈕點選量
• 按鈕點展比 = 點選量/展示次數

三. 為了得到實驗資料，如何抽樣，前端工程師如何打點？

3.1 如何抽樣

github/mip-experiment 實驗元件采用的方案是前端随機數抽樣。簡單來說，就是預先設定100個實驗分組，算一個100以内的随機數，随機數落在哪個區間，使用者就進入哪個實驗分組。

3.2 如何打點

打點請求的統計彙總方式有兩種：第三方統計與自行統計。前端工程師隻需要了解項目采用的是哪種就可以了。

3.2.1 PV & UV 打點

第三方統計：使用百度統計或類似服務，都不需要前端工程師手動打點，在頁面插入統計代碼後，在背景可以就看到 PV&UV。

自行統計：每次頁面加載時看下有沒有辨別單一使用者的 cookie，如果有，則在

document.readyState === 'complete'

時發送 PV 請求。資料分析時，彙總所有 http request 請求得到 PV, 根據 cookie 去重的到UV。如果沒有 cookie，則根據裝置特征産出及通路時間計算出一個字元串，用于辨別唯一使用者。

3.2.2 互動打點：滑動，點選

互動日志的打點需要前端工程師手動綁定事件。比如給按鈕綁定點選事件，給輪播圖綁定滑動事件等等。

第三方統計：在事件觸發時，調用統計服務的API，将參數傳入即可。例如百度統計的事件 API 是

_hmt.push(['_trackEvent', category, action, opt_label, opt_value]);

，那麼在事件中就可以寫

_hmt.push(['_trackEvent', '按鈕01', '點選']);

自行統計（百度系方法）：在事件觸發時，建立一個圖檔，在圖檔URL中拼上統計事件的連結。比如百度搜尋結果頁的滾動請求為

https://sp1.baidu.com/xxx/mwb.gif?type=3&fm=view…

，也可以拼接類似的 http request，比如

https://m.aa.com/a.gif?obj=按鈕01&event=點選

。

3.2.3 元素展現打點

在浏覽器自帶事件中，沒有“元素在浏覽器内可見”事件，但是可以用 JavaScript 判斷，或者引用第三方庫來實作。

JavaScript 判斷思路：根據頁面目前滾動距離 scrollY，元素距離頂部距離 top，和螢幕高度 screenHeight 可以計算出元素是否在頁面内可見。

某公司日常（3）

前端：監聽滾動事件。

if( top > scrollY + screenHeight) {

-___ 按鈕在螢幕内展現一次，發請求；

-___ 标記為已展現過。

}

第三方庫：jquery 插件-github，原生實作- github

四. 如何統計資料，并保證資料準确可信

4.1 統計的兩種方式：第三方統計與自行統計

如果選擇第三方統計，就選擇了 Easy 模式。百度統計，Google Analytics 等統計服務會幫你計算很多需要的資料。首推百度統計，除了因為它是自家産品，有問題随時可以找接口人解決之外，還因為它是免費的中文統計，投放簡單，資料産出快。

如果選擇自行統計，那麼面對的就是浩大的工程了，儲存量和計算量驚人。百度系的統計是将統計參數拼接到圖檔 URL 後面，帶給服務端。知乎的統計是發送了 POST 請求。無論哪種方案，每次使用者點選，滑動，資料加載都會産生一條 http request，儲存和計算這些 request 會耗費不少伺服器資源。Jenny_L 沒有實踐過，如有需要，可以 google 一下。

4.2 為保證資料可信，請空轉流量

解釋：空轉是指先抽樣，統計關鍵資料，而不修改頁面樣式的流程，相當于AA實驗。

原因：雖然前端随機數抽樣及類似方法理論上能夠保證兩份流量 pv 和 uv 相同，關鍵資料相差不大，但畢竟存在抽樣不均的特殊情況。空轉可以明顯地發現抽樣不均，摒棄掉這部分流量，保證明驗資料的變化僅僅是實驗本身（樣式改變）引起的。

具體做法：如果要做 AB 實驗，需要實驗組 A 和對照組 B 兩組流量。一次性抽取5-6組流量，空轉3天，監控 pv，uv，點選數量等關鍵資料。選擇兩組資料最接近的上實驗，其他流量可以釋放。

4.3 為驗證結論正确，請反轉實驗

解釋：當得出實驗正向結論後，将實驗反轉，對照組變成實驗組，實驗組變成對照組。

某公司日常（4）

産品：實驗資料正了，标題就是要大大大！

設計：這不科學，應該是資料波動。需要反轉驗證。

前端：嗯，我反轉一下。

原因：反轉實驗能夠驗證明驗資料的差别是由實驗（樣式改變）引起的。但需要注意的是，建議隻在實驗為正向收益時反轉實驗。如果收益為負，反轉實驗，隻會多損傷原對照組的使用者體驗。

具體做法：舉個例子，實驗目的為“按鈕大小對該按鈕點選率的影響”。A 組流量按鈕變大，B 組為對照組，按鈕大小正常，資料顯示A組的按鈕點選率升高，效果更好。在反轉試驗中，A 組流量按鈕回複正常，B 組變為實驗組，按鈕變大。如果此時資料顯示B組按鈕點選率升高，說明按鈕大小對點選率有影響。

4.4 為減少多個實驗互相影響，請分流量實驗，不要分層實驗

解釋：“分流量實驗”是指一次抽取流量，分别進行多個實驗。“分層實驗”是指每個實驗都從100%中抽取一次流量。

原因：“分流量實驗”能夠保證明驗間沒有重合，一份流量不會同時中兩個實驗。而“分層實驗”相當于從總流量中抽取多次，一份流量有機率同時中兩個實驗，這會對實驗結果有一定影響。

具體做法：

• 分流量實驗: 抽取40%的流量，20% 用于 Foo 實驗，20% 用于 Bar 實驗。
• 分層實驗: 抽取20%的流量用于 Foo 實驗；再抽取 20% 流量用于 Bar 實驗。（此時約有 4% 流量即Foo 又 Bar）

某公司日常（5）

産品：反轉資料也是正的，說明标題應該大大大。

設計：不對，不科學，是不是流量之間有幹擾？

前端：采用的分流量實驗，确認沒有幹擾。

4.5 考慮到使用者習慣性，請保證明驗黏性及持續時間

解釋：實驗黏性 (sticky)指的是實驗流量中的 pv 配置設定固定，單個使用者每次都被分入相同分組。實驗的持續時間建議至少3天，一周左右為好。

某公司日常（6）

前端：正常情況下，應該使用黏性的實驗抽樣。

原因：在頁面改版後，使用者可能有一段時間的學習過程和習慣期，顯示為資料的下降，以及緩慢回升。

具體做法：當某個使用者中抽樣時，本地記錄（localstorage）他的抽樣情況，下次他進入同樣的頁面，讀取記錄，進入同樣的分組。

五. 如何分析實驗資料，有哪些資料需要重點關注?

如文章 2.1 提到的，重點關注一個目标，并選擇其它幾個目标作為輔助，以免走偏。

常見的目标為：pv, uv, 首屏按鈕點展比，廣告點展比。

六. 附：如何搭建前端實驗項目，以 mip-experiment 為例

mip-experiment 是 MIP 開源項目中的一個元件，從零搭建了一個前端抽樣的實驗系統。抽樣系統實作了上文提到的抽樣功能：

• 使用者分組
• 實驗黏性設定
• 分流量抽樣，分層抽樣
• 實驗空轉
• 實驗AB樣式設定
• 實驗反轉

除此之外，

mip-experiment

還與 mip-pix 和百度統計深度整合，實作了統計功能：

• mip-pix 将實驗資料拼裝在圖檔 URL 中，将請求發往站長伺服器，由站長自行統計。
• mip-experiment&百度統計 通過配置，可将請求發送到百度統計背景，實驗資料可在百度統計->通路分析->事件分析中看到。

mip-experiment 的源碼可在 github 上找到，有建議可以提 issue 給我。

MIP 官網也使用了mip-experiment 做實驗，現在正處于空轉階段。實驗完成後将發出整體實驗的流程和結論。

文章作者：Jenny_L

轉發自Jenny_L 的簡書

轉載于:https://www.cnblogs.com/mipengine/p/AB_experiment_design_idea.html