阿里无线11.11 | 手机淘宝主会场实践之路

传统会场在大促中的做用

每次为了让消费者在大促时能更快挑选到商品和进行平台的营销互动，都会有一个页面来承载大促的核心内容和主要的营销要素，咱们称之为主会场。 之前主会场开发，都是前端经过页面搭建系统或者经过源码方式制做PC页面和H5页面，且主会场素材图片都来源于官方素材。系统根据必定业务规则决定谁在坑位里展现，而用户须要从一个树形结构一级一级进行浏览到最后的宝贝页面。经过之前主会场的数据对比，无线主会场结构的跳失率较高且效能不如PC页面。

无线主会场目标

在无线成为主流的趋势下，须要提升无线的主会场的效能，技术和业务上须要解决两个问题:

1. 在移动端让用户可以更快的找到本身感兴趣的内容，提升流量的匹配和高效分发，减小用户跳失率，从而提升转化率

2. 业务层面，能够应对任何业务变化，能够按照不一样需求进行调整从而保障大促进行

应对方法

针对以上目标，从如下几个方面来解:

• 极致的浏览体验，主要从性能和体验作到最优

• 经过千人千面将用户感兴趣的内容优先呈现，打破树形结构的浏览方式，减小跳失率

• 经过首图一致提升转化率

• 针对业务灵活性要求，经过动态可配置业务框架、流量调配规则来进行保障

为了提高咱们的浏览体验以及减小跳失率，本次会场采用了一系列的全新设计和方案，主要包含了一个可复用的会场框架和一套完整的合图机制。

可复用的会场框架

为了将用户的浏览体验作到极致，咱们本次抛弃了传统H5主会场，采用一个native页面会场。从技术上来看，无线主会场面临的主要挑战:

• 在端侧，主要涉及版本发布、变动成本、个性化性能保障、离线缓存&同步策略、端侧监控

• 在云端，主要是流量调配和稳定性，要保证端到端的稳定性、容灾策略

• 素材来源的多样性，保障云端素材处理能力、个性化实时计算能力、首图一致性链路透传

• 从端到云的全方位监控体系

面对这些挑战，咱们从如下几个主要模块来知足这些能力:

灵活的框架容器和多策略调整

为了更好的用户体验，整个会场被包含在一个会场框架中，总体会场框架由动态渲染区域和框架容器组成，针对会场内容区域，经过WEEX(WEEX是阿里无线提供的一套将html5在客户端跨平台解释生成native体验的全新移动开发平台)渲染引擎知足动态性，基于WEB技术开发，无须要发版同时具有native体验。框架容器用来控制顶部和底部tab部分，目标是设计实现一个标准通用化的会场框架，且端侧展示元素和行为可经过配置灵活调整，知足双十一、双十二、年中促等不一样阶段大促活动需求。整个主会场结构拆解以下: 

针对会场框架容器，云端配置控制客户端上各导航动做及响应处理，端侧基于云端配置元数据，灵活渲染导航TAB数量及视觉样式和响应行为。同时考虑不一样终端设备用户体验兼容性，以更细粒度控制容器内各内容页行为，会场框架的策略中心可根据用户相关信息(如：app版本、机型、os版本等)来进行多种策略的变动和定向用户群体生效。

框架容器内的动态页面(WEEX)数据获取，相似传统静态H5页面。从用户体验角度考虑，基于数据就近用户原则，默认页面资源直接部署CDN节点;考虑页面内容涉及个性化，局部数据需实时请求动态获取。本方案采用页面框架及静态数据静态化部署至CDN，局部动态内容，直接调用云端服务异步填充。设计阶段同步考虑了极端状况下拉取静态文件失败的状况，云端同时需具有兼容支撑此类少许流量，以返回全页面数据。综上总体会场框架数据链路及渲染流程以下：

个性化数据由用户进入页面主动拉取，如何能让用户以为是跟从就近的地方获取的内容是同样的体验呢? 动态个性化数据异步渲染提高页面打开速度，但在用户视觉体验上，动静态数据分离并异步渲染，会致使页面局部区域数据加载和展现滞后与静态页面打开。低端机型下屏幕闪烁或刷新顿挫感明显。为实现极致用户体验，兼顾页面加载速度及页面数据完整性，借助富客户端能力，会场框架采用端侧预热技术来保障更好的用户体验。

对比传统页面依赖客户端主动向服务端拉取数据，端侧预热技术借助移动端数据推送服务，在用户访问页面并渲染时优先读取端上预缓存内容，既对服务端请求量起到消峰做用，又保障全页面加载渲染的用户体验。会场框架的数据推送服务采用手淘自主研发的ACDS(Ali Cloud Data Service)SDK，实现端侧数据读取、云端同步、数据融合及远程过程调用的透明化服务，极大下降客户端处理复杂度，提高开发效率。会场框架同时借助云端控制策略，实现云推送和端拉取两种模式灵活切换。大体流程以下：

上述模块能力基础之上，考虑大促活动的造势、预热、正式、结束总体生命周期，运营所需的页面/模块定时或实时切换能力，需在框架层面对会场全局URL拦截策略进行统一管控、实时调配。针对此类特性，会场框架采用自定义拦截规则，基于云端控制下发url策略的方式，支持不一样时段、不一样目标请求被监控并拦截至会场框架内对应TAB处理，并可根据不一样大促和目标地址按需配置。基于时间的拦截规则总体处理流程以下:

最后，个性化场景下，当上亿用户基于拦截规则进入对应访问页面时，还需按业务策略将总体流量与页面各资源和内容进行灵活配比，即能严格保障业务在流量比例和总量的需求，又要保障用户始终能看到适合的商品/营销内容并更高效完成转化。为此，首先来看下所谓的个性化内容区域：

其中几个主要概念：图中的男装表示是一个楼层，一个楼层有7个坑位。千人千面(个性化)就是针对不一样用户，按其偏好结合大数据预测，分别展现不一样内容和楼层顺序。所以，对不一样用户，同一资源位下曝光的品牌、店铺、商品、卖点信息都可能不一样，且展现的图片素材会针对用户偏好组合同一品牌下不一样商品和卖点，从而不一样用户看到的同一品牌商品可能不一样，甚至同一商品卖点不一样。为此，需提早准备大量素材及原始营销信息，由算法和大数据处理引擎动态处理，后面会有单独章节相应介绍。

在个性化基础上，考虑不一样楼层的运营管控策略，可能个别楼层针对部分用户不输出个性内容，仅投放运营人工填充的固定数据，此类数据和楼层被称为非个性化数据。基于灵活性考虑，需可以针对不一样楼层个性化进行实时流量管控，容许对某楼层的个性化与非个性化流量比例进行控制；同时，各楼层顺序一样可设置是否个性化以及个性化排序的比例，从而灵活应对业务的多变性和变动稳定性。

最后，为进一步提升用户选品效率，提高点击效果，本次会场延展实现了首图一致性。即用户在资源位入口看到引导素材(通畅为某个商品)产生兴趣，点击进入承载页后，能在该页面列表内第一时间看到所点击的内容(基于页面制做者内容推广和引流策略，对应的商品可能不在首屏)。以此对用户点击转化和选品体验均达到最佳。所以会场总体个性化链路同步实现了下一跳承接页对应此前入口的首图一致处理。

稳定性保障

基于以上会场框架设计，基本知足了各种大促业务场景下的流量匹配和用户体验多维需求。接下来，重点在于保障总体架构的稳定性。首当其冲，需完善会场总体链路的监控能力，对线上运行的客户端版本和对应服务端逻辑可以快速排查和定位问题。为此，对会场总体链路各环节均进行了细致监控:

客户端监控

考虑端侧动态脚本异常、数据处理流程意外、页面数据加载错误、缓存及请求通道异常等各种出错可能，咱们需保证在亿级UV/PV访问量下，如何可以及时发现端测问题？以及具体发生在哪些环节？为此，会场框架结合端上渲染引擎采用自主开发的端上监控平台来监控主会场的端侧表现，细分至数据获取、数据处理、数据渲染、节点操做等各核心环节(包括js执行错误、cdn拉取js失败率、会场crash率、DOM操做的成功率)， 经过采集此类监控点数据，结合会场框架在端上的降级策略， 保证会场总体稳定性。

云端监控

服务端层面，业务角度主要核心为个性化数据获取成功率和流量管控准确性保障，同时大数据算法侧有内容异常监控(数据为空或数据片断缺失等)，从而保障总体链路效果。

基于以上设计和实现，会场框架基本完善。营销角度，框架承载流量的核心仍是内容。所谓巧妇难为无米之炊，个性化千人千面，实现移动时代的大数据效果，依赖如下一套全新的利器来完成。

可复用会场框架素材来源重要支撑——合图

如前所述，千人千面对会场投放的内容复杂度、计算量级提出了史无前例的挑战。本次双十一主个性化主会场为此衍生出了一个横向的创新产品——合图。前面也提到过从来会场的图片素材都是来自官方素材(商家或者设计师人肉制做)。在全面升级为个性化会场后，对素材库的要求也随之巨变。若是将个性化推荐比做大数据时代的重型武器，那么图片素材库就比如重型武器的弹药库。个性化推荐能不能打响，打的有多猛，首先要看商品素材的质量够不够好、数量够不够多。缘由很简单，每个消费者都是独特的，个性化推荐要知足成千上万消费者的喜爱，固然首先你得有成千上万种商品。面对双十一的海量用户，若是素材搞不定，任何推荐算法都没法施展威力。  

传统的运营投放方式比如左轮手枪，依靠运营的经验命中消费者喜爱。而个性化推荐则是在海量的数据之上，为每一个用户定制他专属的双十一。通过前期评估，个性化主会场想要在双十一这种量级的场景中取得效果，这个素材库的图片数量至少须要百万级别的，若是让商家或设计师来人肉制做这个"弹药库"，显然这是一个mission impossible。

目标

1. 宝贝图片和利益点文字合并成一整张图片输出，减小客户端渲染压力。

2. 主会场图片展现个性化，须要准备百万级别的素材图片。

解法

针对以上目标，咱们须要一种可以高质量、大规模、结构化，生产图片的能力。在这种背景下，咱们的合图系统应运而生。

合图系统需处理的问题：

• 图片质量，海量图片的筛选，识别人脸，牛皮癣，非白底等badcase。

• 抽象模板 灵活的DSL语言表达，设计师可操做的修改，调整。

• 合图服务，按照DSL模板定义产出标准的图片。

• 图片质量:双十一的会场图片主要来源与商家提报的素材，这些素材参差不齐，没法直接使用，须要针对性的进行过滤处理，好比由于涉及版权，咱们不能直接使用带有人脸的图片。pc时代商家习惯性的图片带牛皮癣的case也须要可以过滤，以及最基本的图片是否清晰等等，针对这些要求，咱们会对每幅图像进行预约义的多种图像处理，输出基于图像内容的语义标签，完成图像自动的标签化过程，以便于按特征过滤或提早所须要的素材。

• 抽象模板：双十一会场坑位具备多种尺寸，多种布局。咱们建立了一套用于合图的领域专用语言(DSL)，一方面利于修改，便于业务灵活调整；一方面阅读友好，利于设计师参与。

• 合图服务： 重点在于按主体宽高进行自动化适配，这个直接决定了最终产出的图片效果。(下面两张对比图，对于竖型素材，经过边缘检测自动化适配，优化有效展现区域)

 

产出

 咱们在双十一期间共计制造出了百万级别的图片素材，完美的解决了这百万级弹药库的mission impossible！

• 经过素材收集平台，咱们向商家赋能，商家能够低成本的制做适用于无线会场的图片，获取更多曝光流量。

• 经过合图DSL语言，咱们向设计师赋能，设计师能够将视觉稿无差别的标准量产，提升生产力。

• 经过整套合图系统，咱们向个性化赋能，使得个性化的弹药库填充满满。

将来与展望

在支撑彻底球狂欢节以后，咱们用现成的会场框架体系支撑了淘宝双12活动以及阿里年货节，整套会场框架已经稳定，将来会经过系统配置的方式进行自动化的页面搭建，咱们但愿端上可以有一套完整的会场框架，在云端的数据产出以及各类规则的配置都能自动化，系统化，更好知足常态化的大促场景需求。

另外针对合图系统，除了继续应用于大促个性化会场搭建之外，计划将此能力输送到更多的个性化场景，好比手机淘宝，手机天猫平常的千人千面个性化。在进一步完善和扩展合图DSL的基础前提下，可以横向的对集团内业务方提供对应的场景支持。真正作到赋能商家，赋能小二，充分挖掘流量价值。

关于阿里百川

阿里百川（baichuan.taobao.com)是阿里巴巴集团“云”+“端”的核心战略是阿里巴巴集团无线开放平台，基于世界级的后端服务和成熟的商业组件，经过“技术、商业及大数据”的开放，为移动创业者提供可快速搭建App、商业化APP并提高用户体验的解决方案；同时提供多元化的创业服务-物理空间、孵化运营、创业投资等，为移动创业者提供全面保障。