【轉】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 一下。