阿里無線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並提高用戶體驗的解決方案；同時提供多元化的創業服務-物理空間、孵化運營、創業投資等，爲移動創業者提供全面保障。