網站管理員為了瞭解網頁的改動是否具有成效，會對已經在線上的網站進行 A/B Test，以收集真實使用者的操作回饋，這是非常常見的商業操作方式。 身為一位 ASP.NET MVC 開發者，你滿足 A/B Testing 需求的方式是否足夠簡潔以及最少副作用呢？能不能發揮 ASP.NET MVC 的多項優點？這是我這次想要分享的主題，希望你也有共鳴。

1. twMVC #25 – ASP.NET MVC A/B Testing
ASP.NET MVC A/B Testing
Dino Wang

2. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 禾盛數碼科技 hexdigits
 twMVC 共同創辦人
 ASP.NET MVC 開發美學共同作者
 現任 Microsoft Azure MVP
 dino@hexdigits.com
Dino Wang
2

3. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 A/B Testing 概觀
 如何在 ASP.NET MVC 中實作 A/B Testing
 View
 Action
綱要
3

4. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 這裡不談你如何將對象(標的、隨機)分群
 假定你有能力為你的分群對象加以識別
 這裡不談採集以及運用工具分析測試資料
 著重在 ASP.NET MVC 開發方法
前言
4

5. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 又名 Split testing, Bucket testing
 進行分眾測試
 測試網站微調效果，以便調整商業決策。
 新的視覺引導  轉換率是否提升
 新的使用流程  試行者
關於 A/B Testing
5
Graph from https://goo.gl/Q9xOLP

6. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 Mozilla
Changing the Firefox Download Button (2008)
 Facebook
 Yahoo! 首頁
A/B Testing 經典案例
6

7. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 Mozilla
Changing the Firefox Download Button (2008)
https://goo.gl/fq5DKS
A/B Testing 經典案例
7

8. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw 8

9. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 僅僅只是變更了下載按鈕的文字，提升了 3.44% 轉換率
Firefox A/B test result
9

10. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 Just search "A/B testing case studies"
https://goo.gl/LikAz7
A/B Testing 經典案例
10

11. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 Google Analytics A/B Testing
https://goo.gl/xgy6rC
 Others
https://goo.gl/AmIb2o
A/B Testing 數據採集
11

12. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
你的網站實行過 A/B Testing 嗎？
 有
 需求提出者是誰？
 為什麼做 A/B 測試？
 用那種方法？
 具體效果如何？
 有沒有出現非預期的副作用？
 沒有
 完全沒有需求？
 不知道這玩意？
 沒有人要分析資料？
 工程太浩大？
12

13. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
1. 設定測試對象，分為兩個或以上的族群。
 匿名或具名使用者 (Cookie-base、IP、User data、…)
2. 一個族群擁有一個版本的網站內容，常見為特定頁面。
3. 利用工具或自行收集測試數據。
 Google Analytics、…
4. 展現測試數據，驗證是否符合預想結果。
完整的 A/B Testing
13

14. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
所以我們該怎麼讓網站能夠被很好的 A/B Test?
GO! A/B Testing
14

15. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
A 版
 http://localhost/Home/Index
B 版 (Preview)
 http://localhost/Home/Index2
GO! A/B Testing
15

16. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
A 版
 http://localhost/Home/Index
B 版 (Preview)
 http://localhost/Home/Index2
GO! A/B Testing
16

17. twMVC #25 – ASP.NET MVC A/B Testing 17

18. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 以相同的 URL 瀏覽，能得出 A/B 版不同的內容。
 除測試標的外，避免大幅度的改變使用者行為。
 50% 使用者瀏覽目前版本，50% 測試者瀏覽 B 版。
 透過設計，使搜尋引擎爬蟲不會得到 B 版內容。
 不產生冗余網址（SEO）。
 程式碼乾淨，A/B 版程式碼不交錯（less if else）。
定義 A/B Testing 的程式架構目標
18

19. twMVC #25 – ASP.NET MVC A/B Testing
Implement A/B Testing
View - Part 1
19

20. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
三年前我們介紹這技巧是這樣說的
20

21. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
現在我對他的感覺是這樣的
21

22. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 擁有結構簡單、容易使用的特性，適用於非常多的場景
 適用於所有的 視圖 技術
 View、Partial View、Layout、Display/Editor Templates
 與 ASP.NET MVC Output Cache 整合良好
 沿用其他所有 ASP.NET MVC 機制
ASP.NET MVC Display Modes
22

23. twMVC #25 – ASP.NET MVC A/B Testing 23
View – Part 1

24. twMVC #25 – ASP.NET MVC A/B Testing
Implement A/B Testing
View - Part 2
24

25. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 Display Modes 天生是單一維度的設計
 情境  Preview | Non-Preview (default)
 設備  Mobile | Tablet | Desktop (default)
 當上方的設備與情境需要同時要考慮時
僅支援一個尾綴字串的 Display Modes 該怎麼設計？
可事情往往不是這麼簡單 …
25

26. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 實作自己的 IDisplayMode
http://blog.shibayan.jp/entry/20130531/1369973364
似乎是解法，但一次客製化只能滿足一種情境，不俐落，不好復用
評估可用方法
26

27. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
PPAP 的啟發
27
Mobile Preview

28. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
PPAP 的啟發
28
Mobile Preview

29. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Mobile-Preview !!
29

30. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
2-dimension, hyphenated
30
Device Preview Display Mode Suffix
Mobile Tablet Desktop true false *.(suffix).cshtml
V V Mobile-Preview
V V Tablet-Preview
V V Mobile
V V Tablet
V V Preview
V V

31. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
3-dimension, hyphenated … and ?
31
Device Theme Preview Display Mode Suffix
Mobile Tablet Desktop Dark Light true false *.(suffix).cshtml
V V V Mobile-Dark-Preview
V V V Mobile-Preview
V V V Tablet-Dark-Preview
V V V Tablet-Preview
V V V Dark-Preview
V V V Preview
V V V Mobile-Dark
V V V Mobile
V V V Tablet-Dark
V V V Table
V V V Dark
V V V

32. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
膩看看
32

33. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 填了一個坑還有千千萬萬個坑要填
 哥幫你，介紹 DMM API
Display Modes 的困境
33

34. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
DMM API
34

35. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 Android 啟發，支援多維度資源
How Android Finds the Best-matching Resource
 任一維度可設計為可選 (optional) 或 必選 (required)
雖然如此，多個維度，且皆為可選 是較為常見場景
 盡可能簡化的 API 設計
Display Mode Matrix, DMM
35

36. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
重新定義
36

37. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
怎麼使用 DisplayModeMatrix
37

38. twMVC #25 – ASP.NET MVC A/B Testing 38
View – Part 2

39. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
DMM 是怎麼做的？
39

40. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 GitHub
https://github.com/dinowang/DisplayModeMatrix
 NuGet
DisplayModeMatrix (目前 v1.1.1)
DMM is OSS Project
40

41. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 行動版、桌面版
 發行版、預覽版
 一般客戶、VIP 客戶
 多租戶系統報表格式客製化
覺得只有 A/B Testing 能用這玩意嗎？
41

42. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
幫 DisplayModeMatrix 按個讚吧 
42

43. twMVC #25 – ASP.NET MVC A/B Testing
Implement A/B Testing
Action
43

44. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Action A/B Testing 的思路
44
User Controller Action View
request
response

45. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Action A/B Testing 的思路
45
User Controller Action View
request
response
Action 2

46. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Action A/B Testing 的思路
46
User
CtrlTest
(Controller)
Index
(Action)
Index.cshtml
(ViewResult)
/CtrlTest
response
IndexPreview
(Action)

47. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Action A/B Testing 的思路
47
User Controller Action View
request
response
Action 2 View 2

48. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Action A/B Testing 的思路
48
User
CtrlTest
(Controller)
Index
(Action)
Index.cshtml
(ViewResult)
/CtrlTest
response
IndexPreview
(Action)
IndexPreview.c
shtml
(ViewResult)

49. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 實作 IActionInvoker
竅門
49

50. twMVC #25 – ASP.NET MVC A/B Testing 50
Action

51. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 Sample code
https://github.com/dinowang/twmvc25samples
 DisplayModeMatrix
GitHub https://github.com/dinowang/DisplayModeMatrix
請 +1 及分享，鼓勵在下把這個套件更強的功能補完，謝謝
沒寫好的文件或範例碼歡迎送出 PR~ XD
NuGet https://www.nuget.org/packages/DisplayModeMatrix
twMVC #25
51

52. 52

53. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Blog 是記錄知識的最佳平台
53

54. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
感謝 Jetbrains 贊助贈品
54
https://www.jetbrains.com/resharper/

55. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
感謝 OzCode 贊助贈品
55
http://www.oz-code.com/

56. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
感謝 ALIVE 贊助贈品
56
https://comealive.io/

57. twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
業界師資、實戰教學
57
http://skilltree.my

58. twMVC #25 – ASP.NET MVC A/B Testing
謝謝各位
• 本投影片所包含的商標與文字皆屬原著作者所有。
• 本投影片使用的圖片皆從網路搜尋。
• 本著作係採用姓名標示-非商業性-相同方式分享 3.0 台灣授權。閱讀本授權條款，請到
http://creativecommons.org/licenses/by-nc-sa/3.0/tw/，或寫信至Creative Commons, 444 Castro
Street, Suite 900, Mountain View, California, 94041, USA.
h t t p : / / m v c . t w