上一章： OTT端性能優化建設之Weex實踐之路 | 《優酷OTT網際網路大屏前端技術實踐》第三章>>> 下一章： 我在優酷OTT端做自動化制圖 | 《優酷OTT網際網路大屏前端技術實踐》第五章>>> 點選免費下載下傳 《優酷OTT網際網路大屏前端技術實踐》>>>
一、背景
阿裡巴巴文娛闆塊的OTT端業務，是由天貓魔盒硬體、酷喵APP、TV廠商專供APP等組成的大屏影視業務結合。業務平台為會員制，涉及付費會員、付費點播等多種業務類型。
相對于其它端，OTT端在體驗上存在一定的局限性，一是受限于遙控器操作尺度較小；二是OTT端頁面元素需要依賴焦點切換，深層級展示效果受限。于是在OTT端業内，各廠商APP頁面均是走“扁平路線”：沒有下拉展開、沒有懸浮露出、沒有多級菜單……在OTT頁面建設開發過程中，使用者體驗與操作複雜度直接影響使用者參與率。
會員營收業務作為OTT端（酷喵APP）核心目标之一，前端開發也緊緊圍繞體驗更新和收單能力更新兩大方向進行技術探索，接下來我們就近一年“OTT端-酷喵APP收單能力更新建設”進行總結介紹。
二、原能力
關鍵詞：Native收銀台、綜合收銀台
描述：
以往OTT端-酷喵APP收單業務由Native開發完成， OTT端隻有Native收銀台一項收單能力，因原生Native開發，整體加載效率較好，并在持續疊代過程中得到更新優化。但是收銀台作為Native獨立頁面，所有下單均需要由原頁面跳轉至該收銀台頁面，并由手機端掃碼後操作下單，使用者操作起來非常繁瑣。
收單鍊路
OTT投放頁面-->跳轉Native收銀台-->手機掃碼-->自動下單-->支付
思考
就OTT端影視類APP而言，各大廠商均使用該邏輯鍊路，而使用中，也似乎沒有什麼不妥或者硬傷。但是，集合以往财年資料，我們發現OTT端在付費轉化率方面，與其它端相比，水位較低。于是OTT産研團隊，一直在思考，如何改變這一困局？經過多元度調研和測算，明确一個路線，即：簡化付費鍊路。
與用戶端相比，前端具備發版靈活、快速覆寫兩大特性，也正是基于這一點，我們業務團隊内達成方案統一，由前端進行能力創新更新，用戶端予以必要能力支援。于是，收單能力更新正式立項下面對這三個階段性成果，進行分析講解。
三、能力1.0
關鍵詞：同步登入态、前端簡易收銀台、可視化搭建
在《OTT端登入态裝置穿透：掃碼登入與掃碼反登入》一文中提到，在OTT端，我們實作了賬号登入态的同步（相關原理圖：傳送門），為大小屏互動提供了先決條件。我們前期将該能力使用在大小屏各大戰役主會場連通承接互動上，諸如“快快掃碼，手機端抽大獎”、“掃碼檢視獎品”等等。
之後，面臨越來越多的會員産品優惠促銷活動，我們轉換玩法，在OTT端投放的酷喵會員售賣相關頁面，放置同步登入态二維碼，手機端掃碼後，實作賬号登入态同步，之後指定跳轉至手機端H5收銀台，由使用者在H5收銀台操作下單。而此時OTT端頁面一直存在，并未跳轉，圍繞會員産品售賣的宣傳文案和引導一直呈現在使用者面前，勢必可以加強下單刺激，提高付費量。
于是，一條新的付費收單鍊路産生：
1) 借助會員商品背景，通過配置優惠活動和指定會員産品；
2) 将1中相關參數添加至H5收銀台URL中，獲得指定商品和優惠的收銀台商品連結；
3) 通過OTT搭投平台，使用前端同步登入态可視化搭建元件，将H5收銀台URL配置其中；
4) 配置其它搭投元件，釋出頁面。
至此，OTT端獨立于Native收銀台，單獨開辟出一條無需跳轉的收單鍊路。
OTT投放頁面-->手機掃碼-->操作下單-->支付
特點
同步登入态裝置穿透；
下單賬号統一無偏差；
掃碼下單，由H5收銀台承接，業務穩定；
四、能力2.0
關鍵詞：同步登入态、前端單商品收銀台、訂單回顯、可視化搭建
在實作能力1.0之後，使用者下單轉化率得到了一定的提升，可視化搭建投放也節約了營運時間成本，但是正如該項能力的初衷，是為解決同步登入态問題，收單能力隻是衍生品，部分收單體驗存在一定局限性，比如：
1) H5下單後退出，二次掃碼無法回顯訂單；
2) 一經下單，優惠被占用，未支付情況下，二次掃碼無指定優惠。
綜合以上兩點缺陷，我們通常在H5收銀台配置訂單提醒，以規避因第一次掃碼下單使用了優惠，未支付情況下，二次掃碼帶來問題。當然這是一種保守方案，且在能力1.0中使用者操作步驟仍為3步，這點與Native收銀台并無提升。那麼如果進一步簡化鍊路，同時彌補能力1.0中的訂單回顯和優惠占用呢？我們對業務進行拆解：
a) 必須具備大小屏兩端同步登入态能力；
b) 采用可視化搭建元件方案，在OTT搭投平台，使用該元件并經過配置後，在投放頁面生成收單二維碼；
c) 使用者掃碼後，無需操作，自動下單，一步直達付款；
d) 原訂單未支付情況下，使用者二次掃碼，能回顯訂單；
e) 原訂單已支付情況下，二次進頁面，提示購買成功，或者提供新商品展示；
參照該邏輯用例，其複雜性遠高于能力1.0，但是一經實作，則可以真正實作簡化收單付費鍊路，提高付費轉化。那麼既然業務拆解已經明确，且無明顯硬傷，接下來，我們對OTT酷喵APP前後端現有收單能力和邏輯進行了解讀和分析，最終，經過多方驗證，該方案具備可行性，同時也梳理明确了開發鍊路：
圍繞該開發邏輯圖我們如期完成了真正意義上的前端會員商品收銀台開發，實際效果展示：
收單鍊路：
OTT投放頁面-->手機掃碼-->自動下單-->支付
特點：
掃碼自動下單，一步至付費；
訂單可回顯，已購狀态可區分；
五、能力3.0
關鍵詞：半屏收銀台、半屏互動、圈人定投、可視化搭建、超高曝光量級
如果說，能力1.0和2.0隻是簡短了付費鍊路，提高了付費轉化率；那麼，能力3.0的建設則具備裡程碑式的意義。
在《不一樣的煙火：記OTT端半屏互動能力建設》一文中，我們簡單介紹了，OTT端半屏投放能力的建設，結尾處我們提到，半屏收銀台。大體描述為，在特定視訊、特定播放時間點位、螢幕指定區域露出引導元素、遙控器OK鍵拉出半屏頁面、半屏頁面呈現引導文案及收單二維碼。雖然在手機APP端也存在“半屏”概念，也建設有半屏收銀台，但是與OTT端的半屏有相當大的差異，
首先我們看下OTT端半屏互動示意圖：
上述頁面中的，播放器和半屏頁面是存在于兩種層級的視圖，更準确的說，屬于兩種語言技術棧的視圖，播放器屬于原生Native，而半屏頁面則是前端Weex，憑借高層級，覆寫于播放器之上，而左半邊镂空設定，實作“半屏假象”。當然，這也并不是簡單的頁面視圖疊加，邏輯進行中包括了搶奪頁面焦點等等OTT端特有的情況處理。
說回收單能力，3.0能力建設，引入了“精細化圈人定投”邏輯，與能力2.0的“坑位定投”相比，半屏定投具備更多元度以及更精細化邏輯處理，實作賬号權益、軟硬體、指定視訊及播放點位、疲勞度等多方位綜合圈人投放。其原理圖如下：
實際效果展示：
OTT半屏投放頁面-->手機掃碼-->自動下單-->支付
1) 同步登入态裝置穿透；
2) 下單賬号統一無偏差；
3) 掃碼自動下單，一步至付費；
4) 訂單可回顯，已購狀态可區分；
5) 半屏場景，滲透量級巨大；
6) 具備定投圈人配置能力，滲透曝光量級巨大。
六、總結與展望
經過OTT端酷喵會員線團隊共同努力，在一年時間内，對現有能力進行更新擴充，取得一定成績。尤其在場景适配方面，體驗更為良好，經過資料測算，付費轉化率方面也取得較大程度提升。此外，多種形式收單能力，也反向促進營運同學的營銷方案思路擴散，開戰了多種營銷方案創新，整體效果良好。