這篇文章會討論：
- 在什么情況下需要做 AB 實驗
- 從產品/交互角度，如何設計一個實驗
- 前端工程師如何打點
- 如何統計數據，並保證數據准確可信
- 如何分析實驗數據，有哪些數據需要重點關注
- 附：如何搭建前端實驗項目，以 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 的簡書