1. 背景

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

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

2. MTFlexbox介紹

2.1 MTFlexbox原理

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

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

2.2 MTFlexbox適用場景

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

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

交互簡單：點擊跳轉完成流量輸送的簡單交互。

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

2.3 MTFlexbox自動化埋點前期工作

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

制定了一套雙端統一的埋點標準化規范。

埋點類型定義成Tag標簽屬性，寫入布局文件中。

MTFlexbox結合美團自研的客戶端數據上報工具，定義了多個專門針對埋點的特有屬性字段，主要類型如下：

客戶端開發人員在編寫布局文件時，可以根據具體的產品需求，對不同控件的標簽添加埋點屬性，并且寫入需要上報的業務字段。這樣可以達到與Native埋點相同的效果，并且雙端只需要配置一份埋點。以see-mge4-report埋點為例，布局埋點代碼如下：

<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動態化研發流程

從上述MTFlexbox動態化研發流程圖中可以看出，數據需求和產品需求需要客戶端開發人員在同一份布局文件中耦合在一起去實現，而且埋點屬性和布局控件相綁定。這就導致在埋點過程中會出現很多問題，總結如下：

埋點成本過高

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

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

埋點線上事故多

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

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

3. 業內自動化埋點方案調研與參考

3.1 美團外賣前端無痕埋點實踐

外賣團隊在他們原有代碼埋點方案的基礎上，演化出了一套輕量的、聲明式的前端埋點方案。詳細內容可以參考博客：《美團點評前端無痕埋點實踐》。此方案通過聲明式埋點的方式實現了埋點代碼與業務邏輯的解耦，并且支持對通用的業務數據的自動化上報。但此方案不能完全實現自動化埋點，并且實現成本較高。

3.2 Mixpanel

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

3.3 HubbleData

HubbleData是網易開發的一個洞察用戶行為的數據分析系統，提供一套完整的數據解決方案。

網易對XPath做了優化，主要體現在View索引的計算上：

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

但是網易的這次優化，并沒有解決由于同類型控件位置變更而引發的埋點錯誤問題，根源在于控件唯一標識不夠準確。同時網易的修改僅限控件的一些固有屬性，并沒有搜集到更有價值的業務數據。

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

4. 我們的方案

MTFlexbox自動化埋點的核心流程，分為以下五步：

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

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

前端頁面從后臺拿到DPath路徑信息、坐標信息和截圖信息，提供一套可視化的界面供數據同學進行模塊內任一控件的埋點圈選配置。數據同學根據自身的需求，從目錄樹中圈選出自己希望配置埋點的控件。如下圖所示，右側模塊中會出現紅圈將選中的控件標出。

選中某個控件之后，數據同學對該控件進行埋點配置，元素類型支持當前元素和同類元素。其中同類元素可以節省數據同學對于同一種類型的控件的多次配置。對于已經圈選出的控件，列表中會詳細展示出相關的信息，并附上控件對于的位置截圖，能夠方便數據RD定位埋點的控件具體位置。

MTFlexbox管理后臺根據前端上報的埋點信息，生成包含業務埋點的XML樣式文件，供C端業務方后臺調用。

<?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;">

當客戶端請求業務后臺時，業務后臺將包含業務埋點的XML樣式文件下發給客戶端，客戶端根據配置完成埋點信息上報。

5. 總結與展望

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

目前，我們基于MTFlexbox實現了View與埋點的自動化綁定，后期我們規劃通過規范標準化后臺下發的數據，包括業務數據和埋點數據，進而實現埋點數據的動態化下發和自動化綁定，進一步節省在埋點配置階段和測試階段的人力投入。

6. 參考資料

• [1]?網易HubbleData之Android無埋點實踐
• [2]?商業化埋點實現方案mixpanel
• [3]?美團點評前端無痕埋點實踐

作者簡介

葉梓、騰飛、田貝、張穎，美團終端業務研發團隊研發工程師。

招聘信息

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

美團終端業務研發團隊是一個活力四射、對技術充滿激情的團隊，現誠聘Android、iOS工程師，歡迎有興趣的同學投簡歷至 tech@meituan.com 。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。