1. 背景

跨平臺動態(tài)化技術(shù)是目前移動互聯(lián)網(wǎng)領(lǐng)域的重點(diǎn)關(guān)注方向，它既能節(jié)約人力，又能實(shí)現(xiàn)業(yè)務(wù)快速上線的需求。經(jīng)過十年的發(fā)展，美團(tuán)App已經(jīng)變成了一個承載眾多業(yè)務(wù)的超級平臺，眾多的業(yè)務(wù)方對業(yè)務(wù)形態(tài)的快速迭代和更新提出了越來越高的要求。傳統(tǒng)移動端”靜態(tài)“的開發(fā)方式存在一系列問題，比如包體積增長過快、線上Bug修復(fù)困難、發(fā)版周期長等，已經(jīng)不能滿足高速發(fā)展的業(yè)務(wù)需要。因此，美團(tuán)平臺自研了一套跨平臺動態(tài)化方案——MTFlexbox。

目前，MTFlexbox已經(jīng)廣泛應(yīng)用于美團(tuán)首頁、搜索、外賣等多個業(yè)務(wù)場景，并且已穩(wěn)定運(yùn)行兩年有余。在MTFlexbox規(guī)范下，只需要寫一份布局文件，就可以適用多端。在實(shí)際開發(fā)中，客戶端開發(fā)同學(xué)開發(fā)布局的同時也要添加好埋點(diǎn)信息，幫助產(chǎn)品同學(xué)來評估上線后的效果。但現(xiàn)有布局埋點(diǎn)存在成本過高、準(zhǔn)確率較低等痛點(diǎn)，為了解決這些問題，我們充分了解數(shù)據(jù)組開發(fā)人員和產(chǎn)品對數(shù)據(jù)統(tǒng)計的訴求，結(jié)合對MTFlexbox原理的深入理解，圍繞MTFlexbox的埋點(diǎn)上報做了很多持續(xù)、有針對性的自動化工作，幫助多個項(xiàng)目的效率得到了顯著提升。本文主要介紹美團(tuán)在MTFlexbox自動化埋點(diǎn)方向所進(jìn)行的一些探索，希望對大家能夠有所幫助。

2. MTFlexbox介紹

2.1 MTFlexbox原理

MTFlexbox是美團(tuán)內(nèi)部一套非常成熟的跨平臺動態(tài)化解決方案，遵循了CSS3中提出的Flexbox規(guī)范，抹平了多平臺的差異。MTFlexbox首先按照Flexbox的規(guī)范，定義了一套三端統(tǒng)一的XML布局文件，并將布局文件上傳至后臺；客戶端下載帶有布局文件的JSON數(shù)據(jù)后，解析布局并綁定JSON數(shù)據(jù)，最終交由Native渲染成視圖。MTFlexbox的整體架構(gòu)圖如下所示：

如果要用一句話來解釋MTFlexbox的原理，就是按照約定的規(guī)則將XML內(nèi)容映射成Native布局。從Android開發(fā)者的角度想，可以認(rèn)為是把傳統(tǒng)XML布局文件由內(nèi)置改成從網(wǎng)絡(luò)下發(fā)，實(shí)現(xiàn)展示樣式動態(tài)改變的效果。上圖第一層是MTFlexbox需要的輸入，包括XML布局文件和展示的業(yè)務(wù)數(shù)據(jù)。其中XML布局文件中包括UI標(biāo)簽和埋點(diǎn)信息，每一種類型的埋點(diǎn)信息都作為一種屬性和某一個UI標(biāo)簽相綁定。展示的業(yè)務(wù)數(shù)據(jù)可以通過后臺下發(fā)或者寫死在本地。為了將XML文件與具體的View進(jìn)行解耦，MTFlexbox在XML與View之間增加了一層Node層，即先將XML解析成Node樹，再將Node樹解析成View樹。MTFlexbox共有3層緩存：對XML文件的緩存、對Node節(jié)點(diǎn)的緩存、對View的緩存。其中緩存View指的是緩存一個XML創(chuàng)建的View，通常只會緩存rootView。在Node樹生成了View樹并綁定JSON數(shù)據(jù)后，才會最終渲染成Native控件。

2.2 MTFlexbox適用場景

MTFlexbox基本上支持Native上常用的基礎(chǔ)控件的展示，對有UI定制化的需求支持度很高。但MTFlexbox的XML布局需要在運(yùn)行前編寫完成，只支持簡單的三元表達(dá)式，邏輯能力有限。因此，MTFlexbox特別適合布局樣式復(fù)雜、變動頻繁但交互簡單的業(yè)務(wù)場景。例如美團(tuán)App首頁、搜索結(jié)果頁等。這些業(yè)務(wù)場景都具備以下兩個特點(diǎn)：

面向多業(yè)務(wù)方：各業(yè)務(wù)方有自己的個性化豐富樣式，且不同時期可能需要不同的樣式。

交互簡單：點(diǎn)擊跳轉(zhuǎn)完成流量輸送的簡單交互。

下面是MTFlexbox使用場景的一些截圖：

2.3 MTFlexbox自動化埋點(diǎn)前期工作

在美團(tuán)實(shí)際的業(yè)務(wù)場景中，卡片的點(diǎn)擊、曝光和加載數(shù)據(jù)是分析一個新產(chǎn)品形態(tài)上線效果好壞的最基本方式之一。相對應(yīng)的，客戶端的數(shù)據(jù)采集方式是洞察對于模塊的點(diǎn)擊、曝光和加載事件，然后結(jié)合上下文環(huán)境，比如頁面標(biāo)識、模塊標(biāo)識等，最后使用埋點(diǎn)上報工具和業(yè)務(wù)字段一起進(jìn)行上報。MTFlexbox作為模塊級別的動態(tài)布局UI展示框架，對于數(shù)據(jù)采集方式的支持也是必不可少的。MTFlexbox針對數(shù)據(jù)采集的方式，做了以下兩件事：

制定了一套雙端統(tǒng)一的埋點(diǎn)標(biāo)準(zhǔn)化規(guī)范。

埋點(diǎn)類型定義成Tag標(biāo)簽屬性，寫入布局文件中。

MTFlexbox結(jié)合美團(tuán)自研的客戶端數(shù)據(jù)上報工具，定義了多個專門針對埋點(diǎn)的特有屬性字段，主要類型如下：

客戶端開發(fā)人員在編寫布局文件時，可以根據(jù)具體的產(chǎn)品需求，對不同控件的標(biāo)簽添加埋點(diǎn)屬性，并且寫入需要上報的業(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動態(tài)化研發(fā)流程

從上述MTFlexbox動態(tài)化研發(fā)流程圖中可以看出，數(shù)據(jù)需求和產(chǎn)品需求需要客戶端開發(fā)人員在同一份布局文件中耦合在一起去實(shí)現(xiàn)，而且埋點(diǎn)屬性和布局控件相綁定。這就導(dǎo)致在埋點(diǎn)過程中會出現(xiàn)很多問題，總結(jié)如下：

埋點(diǎn)成本過高

• 溝通成本較高：對于一個新的產(chǎn)品需求，首先產(chǎn)品需要將埋點(diǎn)需求提給數(shù)據(jù)組，數(shù)據(jù)同學(xué)理解了產(chǎn)品需求后產(chǎn)出埋點(diǎn)文檔；然后產(chǎn)品、數(shù)據(jù)同學(xué)、客戶端開發(fā)同學(xué)三方進(jìn)行需求評審和埋點(diǎn)評審，溝通埋點(diǎn)需要上報的字段和時機(jī)等細(xì)節(jié)。很多時候，一次溝通不到位，還需要反復(fù)溝通或者重新溝通，直到產(chǎn)品、數(shù)據(jù)同學(xué)和客戶端開發(fā)人員三方對需求和埋點(diǎn)的理解一致為止。平均一個5PD（5PD指5個工作日）的需求需要消耗數(shù)據(jù)同學(xué)和客戶端開發(fā)人員各1PD的時間來進(jìn)行理解和溝通。

• 開發(fā)成本過高：客戶端開發(fā)人員在編寫XML布局文件時，往往要花30%左右的時間進(jìn)行手動埋點(diǎn)和自測校驗(yàn)。

埋點(diǎn)線上事故多

• 因整個埋點(diǎn)缺乏自動化的埋點(diǎn)校驗(yàn)和預(yù)警機(jī)制，一旦開發(fā)人員出現(xiàn)人為的失誤，導(dǎo)致錯埋、漏埋現(xiàn)象，都有可能引發(fā)嚴(yán)重的線上故障。例如，客戶端開發(fā)人員手動埋點(diǎn)時，出現(xiàn)人為失誤引入了錯誤數(shù)據(jù)；產(chǎn)品驗(yàn)收階段需要修改布局樣式，客戶端開發(fā)人員會出現(xiàn)”僅修改布局而遺漏埋點(diǎn)“的問題。

鑒于MTFlexbox存在埋點(diǎn)成本過高和線上問題較多的突出問題，我們迫切的希望通過一些手段來最大程度的規(guī)避和解決這類問題。埋點(diǎn)成本過高的原因在于MTFlexbox將布局和埋點(diǎn)耦合在一起編寫，客戶端開發(fā)人員需要做的事情過于”雜“和”多“。找到了這個痛點(diǎn)，很容易想到將埋點(diǎn)上報和布局編寫解耦，讓客戶端開發(fā)人員只負(fù)責(zé)編寫布局，數(shù)據(jù)同學(xué)只負(fù)責(zé)埋點(diǎn)配置，以此降低開發(fā)和溝通成本；同時通過自動化埋點(diǎn)校驗(yàn)手段提升埋點(diǎn)準(zhǔn)確率，優(yōu)化流程，減少線上事故的產(chǎn)生。基于此，產(chǎn)出我們理想的布局和埋點(diǎn)解耦之后的動態(tài)化研發(fā)流程，如下圖所示：

3. 業(yè)內(nèi)自動化埋點(diǎn)方案調(diào)研與參考

3.1 美團(tuán)外賣前端無痕埋點(diǎn)實(shí)踐

外賣團(tuán)隊(duì)在他們原有代碼埋點(diǎn)方案的基礎(chǔ)上，演化出了一套輕量的、聲明式的前端埋點(diǎn)方案。詳細(xì)內(nèi)容可以參考博客：《美團(tuán)點(diǎn)評前端無痕埋點(diǎn)實(shí)踐》。此方案通過聲明式埋點(diǎn)的方式實(shí)現(xiàn)了埋點(diǎn)代碼與業(yè)務(wù)邏輯的解耦，并且支持對通用的業(yè)務(wù)數(shù)據(jù)的自動化上報。但此方案不能完全實(shí)現(xiàn)自動化埋點(diǎn)，并且實(shí)現(xiàn)成本較高。

3.2 Mixpanel

Mixpanel是一個已經(jīng)商業(yè)化的可視化埋點(diǎn)方案，采用了截屏的方式在IDE中完成控件的圈選操作，體驗(yàn)較好值得我們借鑒。不過該方案主要面向非技術(shù)人員，不支持上報業(yè)務(wù)字段數(shù)據(jù)。

3.3 HubbleData

HubbleData是網(wǎng)易開發(fā)的一個洞察用戶行為的數(shù)據(jù)分析系統(tǒng)，提供一套完整的數(shù)據(jù)解決方案。

網(wǎng)易對XPath做了優(yōu)化，主要體現(xiàn)在View索引的計算上：

• 原始XPath計算方式：每個ViewGroup下的所有View作為一個數(shù)組，索引從0開始。例如上圖Button控件的XPath標(biāo)識為：LinearLayout[0]/FrameLayout[0]/RelativeLayout[1]/Button[1]
• 網(wǎng)易XPath計算方式：每個ViewGroup下的所有View先按控件類型分類，然后再把每個類型中的控件按照數(shù)組的方式，從0開始。例如上圖Button控件的XPath標(biāo)識為：LinearLayout[0]#rootView/FrameLayout[0]/RelativeLayout[0]#container/Button[0]#btn

但是網(wǎng)易的這次優(yōu)化，并沒有解決由于同類型控件位置變更而引發(fā)的埋點(diǎn)錯誤問題，根源在于控件唯一標(biāo)識不夠準(zhǔn)確。同時網(wǎng)易的修改僅限控件的一些固有屬性，并沒有搜集到更有價值的業(yè)務(wù)數(shù)據(jù)。

結(jié)合上述四種方案的優(yōu)缺點(diǎn)，自動化埋點(diǎn)需要具備的幾個條件，即：簡潔直接的流程、友好可視化的前端配置界面、業(yè)務(wù)字段的可配置化、埋點(diǎn)有效性的檢測。我們的方案就是基于這幾個目標(biāo)而誕生的。

4. 我們的方案

MTFlexbox自動化埋點(diǎn)的核心流程，分為以下五步：

客戶端開發(fā)人員根據(jù)設(shè)計稿開發(fā)XML樣式文件，自測通過后將XML樣式文件與接口數(shù)據(jù)上傳至MTFlexbox管理后臺。

MTFlexbox管理后臺自動連接遠(yuǎn)程移動設(shè)備，并發(fā)送布局處理命令。遠(yuǎn)程移動設(shè)備將布局渲染結(jié)束后，抓取截圖和布局層級信息（包括控件父子關(guān)系、控件位置、大小等信息）并上傳至管理后臺。

前端頁面從后臺拿到DPath路徑信息、坐標(biāo)信息和截圖信息，提供一套可視化的界面供數(shù)據(jù)同學(xué)進(jìn)行模塊內(nèi)任一控件的埋點(diǎn)圈選配置。數(shù)據(jù)同學(xué)根據(jù)自身的需求，從目錄樹中圈選出自己希望配置埋點(diǎn)的控件。如下圖所示，右側(cè)模塊中會出現(xiàn)紅圈將選中的控件標(biāo)出。

選中某個控件之后，數(shù)據(jù)同學(xué)對該控件進(jìn)行埋點(diǎn)配置，元素類型支持當(dāng)前元素和同類元素。其中同類元素可以節(jié)省數(shù)據(jù)同學(xué)對于同一種類型的控件的多次配置。對于已經(jīng)圈選出的控件，列表中會詳細(xì)展示出相關(guān)的信息，并附上控件對于的位置截圖，能夠方便數(shù)據(jù)RD定位埋點(diǎn)的控件具體位置。

MTFlexbox管理后臺根據(jù)前端上報的埋點(diǎn)信息，生成包含業(yè)務(wù)埋點(diǎn)的XML樣式文件，供C端業(yè)務(wù)方后臺調(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><!-- 整個容器 --><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)客戶端請求業(yè)務(wù)后臺時，業(yè)務(wù)后臺將包含業(yè)務(wù)埋點(diǎn)的XML樣式文件下發(fā)給客戶端，客戶端根據(jù)配置完成埋點(diǎn)信息上報。

5. 總結(jié)與展望

目前MTFlexbox自動化埋點(diǎn)方案已經(jīng)使用在美團(tuán)首頁、大搜等業(yè)務(wù)中，整體埋點(diǎn)成本降低了80%，上線后且無埋點(diǎn)故障。在此埋點(diǎn)方案的實(shí)現(xiàn)過程中，我們也踩了很多在設(shè)計之初沒有預(yù)想到的坑，遇到了一些難點(diǎn)，詳細(xì)設(shè)計問題和解決方案稍后的博客中的詳細(xì)介紹，敬請關(guān)注美團(tuán)技術(shù)團(tuán)隊(duì)公眾號。

目前，我們基于MTFlexbox實(shí)現(xiàn)了View與埋點(diǎn)的自動化綁定，后期我們規(guī)劃通過規(guī)范標(biāo)準(zhǔn)化后臺下發(fā)的數(shù)據(jù)，包括業(yè)務(wù)數(shù)據(jù)和埋點(diǎn)數(shù)據(jù)，進(jìn)而實(shí)現(xiàn)埋點(diǎn)數(shù)據(jù)的動態(tài)化下發(fā)和自動化綁定，進(jìn)一步節(jié)省在埋點(diǎn)配置階段和測試階段的人力投入。

6. 參考資料

• [1]?網(wǎng)易HubbleData之Android無埋點(diǎn)實(shí)踐
• [2]?商業(yè)化埋點(diǎn)實(shí)現(xiàn)方案mixpanel
• [3]?美團(tuán)點(diǎn)評前端無痕埋點(diǎn)實(shí)踐

作者簡介

葉梓、騰飛、田貝、張穎，美團(tuán)終端業(yè)務(wù)研發(fā)團(tuán)隊(duì)研發(fā)工程師。

招聘信息

美團(tuán)終端業(yè)務(wù)研發(fā)團(tuán)隊(duì)的職責(zé)是保障平臺業(yè)務(wù)高效、穩(wěn)定迭代的同時，持續(xù)優(yōu)化用戶體驗(yàn)和研發(fā)效率。團(tuán)隊(duì)負(fù)責(zé)的業(yè)務(wù)主要包括美團(tuán)首頁、美團(tuán)搜索等千萬級DAU高頻業(yè)務(wù)以及分享、賬號、音/視頻等基礎(chǔ)業(yè)務(wù)，支撐和對接外賣、酒店等30多個業(yè)務(wù)方。團(tuán)隊(duì)通過動態(tài)化能力建設(shè)，加快業(yè)務(wù)上線速度，幫助產(chǎn)品（PM）快速驗(yàn)證業(yè)務(wù)選型，做出業(yè)務(wù)決策；架構(gòu)/服務(wù)標(biāo)準(zhǔn)化體系建設(shè)，提升前后端以及平臺與業(yè)務(wù)線的溝通、合作效率；業(yè)務(wù)監(jiān)控和體驗(yàn)優(yōu)化，有效保障核心業(yè)務(wù)服務(wù)成功率的同時，提升用戶使用美團(tuán)App過程中的穩(wěn)定性和流暢性。團(tuán)隊(duì)開發(fā)技術(shù)棧包括Android、iOS、ReactNative、Flexbox等。

美團(tuán)終端業(yè)務(wù)研發(fā)團(tuán)隊(duì)是一個活力四射、對技術(shù)充滿激情的團(tuán)隊(duì)，現(xiàn)誠聘Android、iOS工程師，歡迎有興趣的同學(xué)投簡歷至 tech@meituan.com 。

總結(jié)

以上是生活随笔為你收集整理的MTFlexbox自动化埋点探索的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。