MTFlexbox自动化埋点探索
1. 背景
跨平臺(tái)動(dòng)態(tài)化技術(shù)是目前移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的重點(diǎn)關(guān)注方向，它既能節(jié)約人力，又能實(shí)現(xiàn)業(yè)務(wù)快速上線的需求。經(jīng)過(guò)十年的發(fā)展，美團(tuán)App已經(jīng)變成了一個(gè)承載眾多業(yè)務(wù)的超級(jí)平臺(tái)，眾多的業(yè)務(wù)方對(duì)業(yè)務(wù)形態(tài)的快速迭代和更新提出了越來(lái)越高的要求。傳統(tǒng)移動(dòng)端”靜態(tài)“的開(kāi)發(fā)方式存在一系列問(wèn)題，比如包體積增長(zhǎng)過(guò)快、線上Bug修復(fù)困難、發(fā)版周期長(zhǎng)等，已經(jīng)不能滿(mǎn)足高速發(fā)展的業(yè)務(wù)需要。因此，美團(tuán)平臺(tái)自研了一套跨平臺(tái)動(dòng)態(tài)化方案——MTFlexbox。
目前，MTFlexbox已經(jīng)廣泛應(yīng)用于美團(tuán)首頁(yè)、搜索、外賣(mài)等多個(gè)業(yè)務(wù)場(chǎng)景，并且已穩(wěn)定運(yùn)行兩年有余。在MTFlexbox規(guī)范下，只需要寫(xiě)一份布局文件，就可以適用多端。在實(shí)際開(kāi)發(fā)中，客戶(hù)端開(kāi)發(fā)同學(xué)開(kāi)發(fā)布局的同時(shí)也要添加好埋點(diǎn)信息，幫助產(chǎn)品同學(xué)來(lái)評(píng)估上線后的效果。但現(xiàn)有布局埋點(diǎn)存在成本過(guò)高、準(zhǔn)確率較低等痛點(diǎn)，為了解決這些問(wèn)題，我們充分了解數(shù)據(jù)組開(kāi)發(fā)人員和產(chǎn)品對(duì)數(shù)據(jù)統(tǒng)計(jì)的訴求，結(jié)合對(duì)MTFlexbox原理的深入理解，圍繞MTFlexbox的埋點(diǎn)上報(bào)做了很多持續(xù)、有針對(duì)性的自動(dòng)化工作，幫助多個(gè)項(xiàng)目的效率得到了顯著提升。本文主要介紹美團(tuán)在MTFlexbox自動(dòng)化埋點(diǎn)方向所進(jìn)行的一些探索，希望對(duì)大家能夠有所幫助。
2. MTFlexbox介紹
2.1 MTFlexbox原理
MTFlexbox是美團(tuán)內(nèi)部一套非常成熟的跨平臺(tái)動(dòng)態(tài)化解決方案，遵循了CSS3中提出的Flexbox規(guī)范，抹平了多平臺(tái)的差異。MTFlexbox首先按照Flexbox的規(guī)范，定義了一套三端統(tǒng)一的XML布局文件，并將布局文件上傳至后臺(tái)；客戶(hù)端下載帶有布局文件的JSON數(shù)據(jù)后，解析布局并綁定JSON數(shù)據(jù)，最終交由Native渲染成視圖。MTFlexbox的整體架構(gòu)圖如下所示：
如果要用一句話來(lái)解釋MTFlexbox的原理，就是按照約定的規(guī)則將XML內(nèi)容映射成Native布局。從Android開(kāi)發(fā)者的角度想，可以認(rèn)為是把傳統(tǒng)XML布局文件由內(nèi)置改成從網(wǎng)絡(luò)下發(fā)，實(shí)現(xiàn)展示樣式動(dòng)態(tài)改變的效果。上圖第一層是MTFlexbox需要的輸入，包括XML布局文件和展示的業(yè)務(wù)數(shù)據(jù)。其中XML布局文件中包括UI標(biāo)簽和埋點(diǎn)信息，每一種類(lèi)型的埋點(diǎn)信息都作為一種屬性和某一個(gè)UI標(biāo)簽相綁定。展示的業(yè)務(wù)數(shù)據(jù)可以通過(guò)后臺(tái)下發(fā)或者寫(xiě)死在本地。為了將XML文件與具體的View進(jìn)行解耦，MTFlexbox在XML與View之間增加了一層Node層，即先將XML解析成Node樹(shù)，再將Node樹(shù)解析成View樹(shù)。MTFlexbox共有3層緩存：對(duì)XML文件的緩存、對(duì)Node節(jié)點(diǎn)的緩存、對(duì)View的緩存。其中緩存View指的是緩存一個(gè)XML創(chuàng)建的View，通常只會(huì)緩存rootView。在Node樹(shù)生成了View樹(shù)并綁定JSON數(shù)據(jù)后，才會(huì)最終渲染成Native控件。
2.2 MTFlexbox適用場(chǎng)景
MTFlexbox基本上支持Native上常用的基礎(chǔ)控件的展示，對(duì)有UI定制化的需求支持度很高。但MTFlexbox的XML布局需要在運(yùn)行前編寫(xiě)完成，只支持簡(jiǎn)單的三元表達(dá)式，邏輯能力有限。因此，MTFlexbox特別適合布局樣式復(fù)雜、變動(dòng)頻繁但交互簡(jiǎn)單的業(yè)務(wù)場(chǎng)景。例如美團(tuán)App首頁(yè)、搜索結(jié)果頁(yè)等。這些業(yè)務(wù)場(chǎng)景都具備以下兩個(gè)特點(diǎn)：
面向多業(yè)務(wù)方：各業(yè)務(wù)方有自己的個(gè)性化豐富樣式，且不同時(shí)期可能需要不同的樣式。
交互簡(jiǎn)單：點(diǎn)擊跳轉(zhuǎn)完成流量輸送的簡(jiǎn)單交互。
下面是MTFlexbox使用場(chǎng)景的一些截圖：
2.3 MTFlexbox自動(dòng)化埋點(diǎn)前期工作
在美團(tuán)實(shí)際的業(yè)務(wù)場(chǎng)景中，卡片的點(diǎn)擊、曝光和加載數(shù)據(jù)是分析一個(gè)新產(chǎn)品形態(tài)上線效果好壞的最基本方式之一。相對(duì)應(yīng)的，客戶(hù)端的數(shù)據(jù)采集方式是洞察對(duì)于模塊的點(diǎn)擊、曝光和加載事件，然后結(jié)合上下文環(huán)境，比如頁(yè)面標(biāo)識(shí)、模塊標(biāo)識(shí)等，最后使用埋點(diǎn)上報(bào)工具和業(yè)務(wù)字段一起進(jìn)行上報(bào)。MTFlexbox作為模塊級(jí)別的動(dòng)態(tài)布局UI展示框架，對(duì)于數(shù)據(jù)采集方式的支持也是必不可少的。MTFlexbox針對(duì)數(shù)據(jù)采集的方式，做了以下兩件事：
制定了一套雙端統(tǒng)一的埋點(diǎn)標(biāo)準(zhǔn)化規(guī)范。
埋點(diǎn)類(lèi)型定義成Tag標(biāo)簽屬性，寫(xiě)入布局文件中。
MTFlexbox結(jié)合美團(tuán)自研的客戶(hù)端數(shù)據(jù)上報(bào)工具，定義了多個(gè)專(zhuān)門(mén)針對(duì)埋點(diǎn)的特有屬性字段，主要類(lèi)型如下：
客戶(hù)端開(kāi)發(fā)人員在編寫(xiě)布局文件時(shí)，可以根據(jù)具體的產(chǎn)品需求，對(duì)不同控件的標(biāo)簽添加埋點(diǎn)屬性，并且寫(xiě)入需要上報(bào)的業(yè)務(wù)字段。這樣可以達(dá)到與Native埋點(diǎn)相同的效果，并且雙端只需要配置一份埋點(diǎn)。以see-mge4-report埋點(diǎn)為例，布局埋點(diǎn)代碼如下：
<Container style="width:360pt;justify-content:center;" ><Var name="see_MGE4" type="json">{"bid":"xxxxx","cid":"yyyyy","lab":{"isDynamic":true,"gather_index":"{extra.gather_index}","index":"{extra.index}"}}</Var><Containersee-mge4-report="{see_MGE4}"click-url="{business.iUrl}"visibility="{{display.itemDynamic.imageUrl}?visible:displaynone}" ><Img style="width:331pt;height:106pt;justify-content:center;"border-radius="5pt"scale-type="center-crop"src="{display.itemDynamic.imageUrl}"background="#FFF8F8F8" /></Container> </Container>2.4 MTFlexbox動(dòng)態(tài)化研發(fā)流程
從上述MTFlexbox動(dòng)態(tài)化研發(fā)流程圖中可以看出，數(shù)據(jù)需求和產(chǎn)品需求需要客戶(hù)端開(kāi)發(fā)人員在同一份布局文件中耦合在一起去實(shí)現(xiàn)，而且埋點(diǎn)屬性和布局控件相綁定。這就導(dǎo)致在埋點(diǎn)過(guò)程中會(huì)出現(xiàn)很多問(wèn)題，總結(jié)如下：
埋點(diǎn)成本過(guò)高
溝通成本較高：對(duì)于一個(gè)新的產(chǎn)品需求，首先產(chǎn)品需要將埋點(diǎn)需求提給數(shù)據(jù)組，數(shù)據(jù)同學(xué)理解了產(chǎn)品需求后產(chǎn)出埋點(diǎn)文檔；然后產(chǎn)品、數(shù)據(jù)同學(xué)、客戶(hù)端開(kāi)發(fā)同學(xué)三方進(jìn)行需求評(píng)審和埋點(diǎn)評(píng)審，溝通埋點(diǎn)需要上報(bào)的字段和時(shí)機(jī)等細(xì)節(jié)。很多時(shí)候，一次溝通不到位，還需要反復(fù)溝通或者重新溝通，直到產(chǎn)品、數(shù)據(jù)同學(xué)和客戶(hù)端開(kāi)發(fā)人員三方對(duì)需求和埋點(diǎn)的理解一致為止。平均一個(gè)5PD（5PD指5個(gè)工作日）的需求需要消耗數(shù)據(jù)同學(xué)和客戶(hù)端開(kāi)發(fā)人員各1PD的時(shí)間來(lái)進(jìn)行理解和溝通。
開(kāi)發(fā)成本過(guò)高：客戶(hù)端開(kāi)發(fā)人員在編寫(xiě)XML布局文件時(shí)，往往要花30%左右的時(shí)間進(jìn)行手動(dòng)埋點(diǎn)和自測(cè)校驗(yàn)。
埋點(diǎn)線上事故多
- 因整個(gè)埋點(diǎn)缺乏自動(dòng)化的埋點(diǎn)校驗(yàn)和預(yù)警機(jī)制，一旦開(kāi)發(fā)人員出現(xiàn)人為的失誤，導(dǎo)致錯(cuò)埋、漏埋現(xiàn)象，都有可能引發(fā)嚴(yán)重的線上故障。例如，客戶(hù)端開(kāi)發(fā)人員手動(dòng)埋點(diǎn)時(shí)，出現(xiàn)人為失誤引入了錯(cuò)誤數(shù)據(jù)；產(chǎn)品驗(yàn)收階段需要修改布局樣式，客戶(hù)端開(kāi)發(fā)人員會(huì)出現(xiàn)”僅修改布局而遺漏埋點(diǎn)“的問(wèn)題。
鑒于MTFlexbox存在埋點(diǎn)成本過(guò)高和線上問(wèn)題較多的突出問(wèn)題，我們迫切的希望通過(guò)一些手段來(lái)最大程度的規(guī)避和解決這類(lèi)問(wèn)題。埋點(diǎn)成本過(guò)高的原因在于MTFlexbox將布局和埋點(diǎn)耦合在一起編寫(xiě)，客戶(hù)端開(kāi)發(fā)人員需要做的事情過(guò)于”雜“和”多“。找到了這個(gè)痛點(diǎn)，很容易想到將埋點(diǎn)上報(bào)和布局編寫(xiě)解耦，讓客戶(hù)端開(kāi)發(fā)人員只負(fù)責(zé)編寫(xiě)布局，數(shù)據(jù)同學(xué)只負(fù)責(zé)埋點(diǎn)配置，以此降低開(kāi)發(fā)和溝通成本；同時(shí)通過(guò)自動(dòng)化埋點(diǎn)校驗(yàn)手段提升埋點(diǎn)準(zhǔn)確率，優(yōu)化流程，減少線上事故的產(chǎn)生。基于此，產(chǎn)出我們理想的布局和埋點(diǎn)解耦之后的動(dòng)態(tài)化研發(fā)流程，如下圖所示：
3. 業(yè)內(nèi)自動(dòng)化埋點(diǎn)方案調(diào)研與參考
3.1 美團(tuán)外賣(mài)前端無(wú)痕埋點(diǎn)實(shí)踐
外賣(mài)團(tuán)隊(duì)在他們?cè)写a埋點(diǎn)方案的基礎(chǔ)上，演化出了一套輕量的、聲明式的前端埋點(diǎn)方案。詳細(xì)內(nèi)容可以參考博客：《美團(tuán)點(diǎn)評(píng)前端無(wú)痕埋點(diǎn)實(shí)踐》。此方案通過(guò)聲明式埋點(diǎn)的方式實(shí)現(xiàn)了埋點(diǎn)代碼與業(yè)務(wù)邏輯的解耦，并且支持對(duì)通用的業(yè)務(wù)數(shù)據(jù)的自動(dòng)化上報(bào)。但此方案不能完全實(shí)現(xiàn)自動(dòng)化埋點(diǎn)，并且實(shí)現(xiàn)成本較高。
3.2 Mixpanel
Mixpanel是一個(gè)已經(jīng)商業(yè)化的可視化埋點(diǎn)方案，采用了截屏的方式在IDE中完成控件的圈選操作，體驗(yàn)較好值得我們借鑒。不過(guò)該方案主要面向非技術(shù)人員，不支持上報(bào)業(yè)務(wù)字段數(shù)據(jù)。
3.3 HubbleData
HubbleData是網(wǎng)易開(kāi)發(fā)的一個(gè)洞察用戶(hù)行為的數(shù)據(jù)分析系統(tǒng)，提供一套完整的數(shù)據(jù)解決方案。
網(wǎng)易對(duì)XPath做了優(yōu)化，主要體現(xiàn)在View索引的計(jì)算上：
- 原始XPath計(jì)算方式：每個(gè)ViewGroup下的所有View作為一個(gè)數(shù)組，索引從0開(kāi)始。例如上圖Button控件的XPath標(biāo)識(shí)為：LinearLayout[0]/FrameLayout[0]/RelativeLayout[1]/Button[1]
- 網(wǎng)易XPath計(jì)算方式：每個(gè)ViewGroup下的所有View先按控件類(lèi)型分類(lèi)，然后再把每個(gè)類(lèi)型中的控件按照數(shù)組的方式，從0開(kāi)始。例如上圖Button控件的XPath標(biāo)識(shí)為：LinearLayout[0]#rootView/FrameLayout[0]/RelativeLayout[0]#container/Button[0]#btn
但是網(wǎng)易的這次優(yōu)化，并沒(méi)有解決由于同類(lèi)型控件位置變更而引發(fā)的埋點(diǎn)錯(cuò)誤問(wèn)題，根源在于控件唯一標(biāo)識(shí)不夠準(zhǔn)確。同時(shí)網(wǎng)易的修改僅限控件的一些固有屬性，并沒(méi)有搜集到更有價(jià)值的業(yè)務(wù)數(shù)據(jù)。
結(jié)合上述四種方案的優(yōu)缺點(diǎn)，自動(dòng)化埋點(diǎn)需要具備的幾個(gè)條件，即：簡(jiǎn)潔直接的流程、友好可視化的前端配置界面、業(yè)務(wù)字段的可配置化、埋點(diǎn)有效性的檢測(cè)。我們的方案就是基于這幾個(gè)目標(biāo)而誕生的。
4. 我們的方案
MTFlexbox自動(dòng)化埋點(diǎn)的核心流程，分為以下五步：
MTFlexbox管理后臺(tái)根據(jù)前端上報(bào)的埋點(diǎn)信息，生成包含業(yè)務(wù)埋點(diǎn)的XML樣式文件，供C端業(yè)務(wù)方后臺(tái)調(diào)用。
<?xml version="1.0" encoding="UTF-8"?> <Container><Var auto-mge="true" name="ff510aa110844bb78c0b86fb04b26460" type="json">{"bid" : "xxxxx","cid" : "sssss","lab" : {"index" : "{_index}",}}</Var><!-- 整個(gè)容器 --><Container background="#FFFFFF" border-radius="10pt"click-mge4-report="{ff510aa110844bb78c0b86fb04b26460}"click-url="{_iUrl}" padding-left="10pt" padding-right="10pt"><!-- 左半部分 --><Container style="flex-direction:column;justify-content:flex-start;margin-top:15pt;">當(dāng)客戶(hù)端請(qǐng)求業(yè)務(wù)后臺(tái)時(shí)，業(yè)務(wù)后臺(tái)將包含業(yè)務(wù)埋點(diǎn)的XML樣式文件下發(fā)給客戶(hù)端，客戶(hù)端根據(jù)配置完成埋點(diǎn)信息上報(bào)。
5. 總結(jié)與展望
目前MTFlexbox自動(dòng)化埋點(diǎn)方案已經(jīng)使用在美團(tuán)首頁(yè)、大搜等業(yè)務(wù)中，整體埋點(diǎn)成本降低了80%，上線后且無(wú)埋點(diǎn)故障。在此埋點(diǎn)方案的實(shí)現(xiàn)過(guò)程中，我們也踩了很多在設(shè)計(jì)之初沒(méi)有預(yù)想到的坑，遇到了一些難點(diǎn)，詳細(xì)設(shè)計(jì)問(wèn)題和解決方案稍后的博客中的詳細(xì)介紹，敬請(qǐng)關(guān)注美團(tuán)技術(shù)團(tuán)隊(duì)公眾號(hào)。
目前，我們基于MTFlexbox實(shí)現(xiàn)了View與埋點(diǎn)的自動(dòng)化綁定，后期我們規(guī)劃通過(guò)規(guī)范標(biāo)準(zhǔn)化后臺(tái)下發(fā)的數(shù)據(jù)，包括業(yè)務(wù)數(shù)據(jù)和埋點(diǎn)數(shù)據(jù)，進(jìn)而實(shí)現(xiàn)埋點(diǎn)數(shù)據(jù)的動(dòng)態(tài)化下發(fā)和自動(dòng)化綁定，進(jìn)一步節(jié)省在埋點(diǎn)配置階段和測(cè)試階段的人力投入。
6. 參考資料
- [1]?網(wǎng)易HubbleData之Android無(wú)埋點(diǎn)實(shí)踐
- [2]?商業(yè)化埋點(diǎn)實(shí)現(xiàn)方案mixpanel
- [3]?美團(tuán)點(diǎn)評(píng)前端無(wú)痕埋點(diǎn)實(shí)踐
作者簡(jiǎn)介
葉梓、騰飛、田貝、張穎，美團(tuán)終端業(yè)務(wù)研發(fā)團(tuán)隊(duì)研發(fā)工程師。
招聘信息
美團(tuán)終端業(yè)務(wù)研發(fā)團(tuán)隊(duì)的職責(zé)是保障平臺(tái)業(yè)務(wù)高效、穩(wěn)定迭代的同時(shí)，持續(xù)優(yōu)化用戶(hù)體驗(yàn)和研發(fā)效率。團(tuán)隊(duì)負(fù)責(zé)的業(yè)務(wù)主要包括美團(tuán)首頁(yè)、美團(tuán)搜索等千萬(wàn)級(jí)DAU高頻業(yè)務(wù)以及分享、賬號(hào)、音/視頻等基礎(chǔ)業(yè)務(wù)，支撐和對(duì)接外賣(mài)、酒店等30多個(gè)業(yè)務(wù)方。團(tuán)隊(duì)通過(guò)動(dòng)態(tài)化能力建設(shè)，加快業(yè)務(wù)上線速度，幫助產(chǎn)品（PM）快速驗(yàn)證業(yè)務(wù)選型，做出業(yè)務(wù)決策；架構(gòu)/服務(wù)標(biāo)準(zhǔn)化體系建設(shè)，提升前后端以及平臺(tái)與業(yè)務(wù)線的溝通、合作效率；業(yè)務(wù)監(jiān)控和體驗(yàn)優(yōu)化，有效保障核心業(yè)務(wù)服務(wù)成功率的同時(shí)，提升用戶(hù)使用美團(tuán)App過(guò)程中的穩(wěn)定性和流暢性。團(tuán)隊(duì)開(kāi)發(fā)技術(shù)棧包括Android、iOS、ReactNative、Flexbox等。
美團(tuán)終端業(yè)務(wù)研發(fā)團(tuán)隊(duì)是一個(gè)活力四射、對(duì)技術(shù)充滿(mǎn)激情的團(tuán)隊(duì)，現(xiàn)誠(chéng)聘Android、iOS工程師，歡迎有興趣的同學(xué)投簡(jiǎn)歷至 tech@meituan.com 。
總結(jié)
以上是生活随笔為你收集整理的MTFlexbox自动化埋点探索的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： RabbitMQ延迟消息的极限是多少？
- 下一篇： BAT面试进阶：最全Memcached面