[譯]對 AngularJS 模板的A/B測試

編者按:本文翻譯自 Andrei Bondarev 在 Medium 上發布的“A/B Testing your AngularJS Templates ”,Andrei 是一名工程師,終身學習者。

cover-image

 

如果你想對單頁面應用程序模板進行A/B測試,創建一個干凈的可擴展的解決方案非常重要,而不是用條件語言讓模板更混亂,因此:

ag1

一個干凈的替代方法是為每個變量創建單獨的模板,這樣代碼能更容易地管理和跟蹤變量的特定錯誤。

在這個案例里,我們后端使用 Rails ,框架用 split 來驅動試驗。在初始數據提取時,我們的 API 控制器通過將變量值設置為叫做“X-Variant”的響應頭文件來返回變量值:

ag2

我們將創建一個攔截器來從 Angular 代碼的 HTPP 響應中捕獲這個變量值。攔截器會查看變量頭是否存在,并將其傳遞給存儲變量值的服務:

ag3

VariantService 會對我們傳遞給它的任何鍵值對進行簡單封裝:

ag4

我們將 sign_up_form.haml 分成兩個單獨的模板:

ag5

 

現在我們的 form 指令將根據 VariantService 的 variant 值獲取模板:

ag6

不是在指令的定義中指定 template 或 templateUrl ,而是在鏈接函數中請求并編譯模板。這種方法的實現寫在這里 https://jellekralt.com/2015/08/13/dynamically-load-a-templateurl-in-an-angular-directive/,核心代碼如下:

ag7

現在,對服務器的初始數據加載請求, API 將返回一個變量值,該值將確定呈現哪個模板( sign_up_form_a.haml 或 sign_up_form_b.haml )。

 

備注:示例代碼遵循 John Papa 的風格指南:https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

 

原文鏈接:https://medium.com/@rushing_andrei/a-b-testing-your-angularjs-templates-part-1-6b7e93f97074#.s7khy1ard

 

吆喝科技:國內唯一同時支持前端(Web/H5、iOS、Android)及后端(Node.js、PHP、Java 等) A/B 測試服務的專業 SaaS 平臺。支持線上灰度發布、多維度數據統計分析、科學的流量分配系統、一鍵發布新版本無需應用市場審核、定向測試。

 

用數據幫助用戶優化產品,提升轉化、留存和你想要的一切。 AppAdhoc 用數據驗證最佳方案,提高產品設計、研發、運營和營銷效率,降低產品決策風險。

4689 Views
即刻實踐文章理論 A/B測試 灰度發布 產品優化 免費申請
Please wait...

訂閱我們

對于每位訂閱讀者,每兩周,吆喝科技會為您發送4篇精選文章,可能是最新的A/B測試實踐,也會是你所期待的增長干貨。
qq宠物捕鱼大师 456棋牌游戏平台靠谱吗 山东时时彩手机下载 1000捕鱼游戏下载 吉林快三今日预测 nba直播 腾讯吧 福彩3d開奖结果今天是 山西11选5开奖结果一定牛 人体骨骼标注赚钱 体彩浙江61开奖结果 海南飞鱼彩票网上购买