[译]对 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 用数据验证最佳方案,提高产品设计、研发、运营和营销效率,降低产品决策风险。

8126 Views
即刻实践文章理论 A/B测试 灰度发布 产品优化 免费申请
Please wait...

订阅我们

对于每位订阅读者,每两周,吆喝科技会为您发送4篇精选文章,可能是最新的A/B测试实践,也会是你所期待的增长干货。