twMVC #25 – ASP.NET MVC A/B Testing
ASP.NET MVC A/B Testing
Dino Wang
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
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 A/B Testing 概觀
 如何在 ASP.NET MVC 中實作 A/B Testing
 View
 Action
綱要
3
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 這裡不談你如何將對象(標的、隨機)分群
 假定你有能力為你的分群對象加以識別
 這裡不談採集以及運用工具分析測試資料
 著重在 ASP.NET MVC 開發方法
前言
4
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
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 Mozilla
Changing the Firefox Download Button (2008)
 Facebook
 Yahoo! 首頁
A/B Testing 經典案例
6
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
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw 8
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 僅僅只是變更了下載按鈕的文字,提升了 3.44% 轉換率
Firefox A/B test result
9
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
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
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
你的網站實行過 A/B Testing 嗎?
 有
 需求提出者是誰?
 為什麼做 A/B 測試?
 用那種方法?
 具體效果如何?
 有沒有出現非預期的副作用?
 沒有
 完全沒有需求?
 不知道這玩意?
 沒有人要分析資料?
 工程太浩大?
12
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
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
所以我們該怎麼讓網站能夠被很好的 A/B Test?
GO! A/B Testing
14
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
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
twMVC #25 – ASP.NET MVC A/B Testing 17
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
twMVC #25 – ASP.NET MVC A/B Testing
Implement A/B Testing
View - Part 1
19
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
三年前我們介紹這技巧是這樣說的
20
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
現在我對他的感覺是這樣的
21
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
twMVC #25 – ASP.NET MVC A/B Testing 23
View – Part 1
twMVC #25 – ASP.NET MVC A/B Testing
Implement A/B Testing
View - Part 2
24
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 Display Modes 天生是單一維度的設計
 情境  Preview | Non-Preview (default)
 設備  Mobile | Tablet | Desktop (default)
 當上方的設備與情境需要同時要考慮時
僅支援一個尾綴字串的 Display Modes 該怎麼設計?
可事情往往不是這麼簡單 …
25
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 實作自己的 IDisplayMode
http://blog.shibayan.jp/entry/20130531/1369973364
似乎是解法,但一次客製化只能滿足一種情境,不俐落,不好復用
評估可用方法
26
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
PPAP 的啟發
27
Mobile Preview
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
PPAP 的啟發
28
Mobile Preview
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Mobile-Preview !!
29
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
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
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
膩看看
32
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 填了一個坑還有千千萬萬個坑要填
 哥幫你,介紹 DMM API
Display Modes 的困境
33
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
DMM API
34
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
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
重新定義
36
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
怎麼使用 DisplayModeMatrix
37
twMVC #25 – ASP.NET MVC A/B Testing 38
View – Part 2
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
DMM 是怎麼做的?
39
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
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 行動版、桌面版
 發行版、預覽版
 一般客戶、VIP 客戶
 多租戶系統報表格式客製化
覺得只有 A/B Testing 能用這玩意嗎?
41
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
幫 DisplayModeMatrix 按個讚吧 
42
twMVC #25 – ASP.NET MVC A/B Testing
Implement A/B Testing
Action
43
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Action A/B Testing 的思路
44
User Controller Action View
request
response
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Action A/B Testing 的思路
45
User Controller Action View
request
response
Action 2
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)
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
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)
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
 實作 IActionInvoker
竅門
49
twMVC #25 – ASP.NET MVC A/B Testing 50
Action
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
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
Blog 是記錄知識的最佳平台
53
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
感謝 Jetbrains 贊助贈品
54
https://www.jetbrains.com/resharper/
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
感謝 OzCode 贊助贈品
55
http://www.oz-code.com/
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
感謝 ALIVE 贊助贈品
56
https://comealive.io/
twMVC #25 – ASP.NET MVC A/B Testing http://mvc.tw
業界師資、實戰教學
57
http://skilltree.my
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

twMVC#25 | ASP.NET MVC A/B Testing 的眉眉角角

  • 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.
  • 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