MTFlexbox自動化埋點探索

傳統移動端“靜态”的開發方式存在一系列問題，比如包體積增長過快、線上Bug修複困難、發版周期長等，已經不能滿足高速發展的業務需要。基于此，美團平台自研了一套跨平台動态化方案——MTFlexbox。

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架構圖

如果要用一句話來解釋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>
    <Container
              see-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動态化研發流程

從上述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路徑資訊、坐标資訊和截圖資訊，提供一套可視化的界面供資料同學進行子產品内任一控件的埋點圈選配置。資料同學根據自身的需求，從目錄樹中圈選出自己希望配置埋點的控件。如下圖所示，右側子產品中會出現紅圈将選中的控件标出。
- MTFlexbox自動化埋點探索 - 美團技術團隊
  目錄樹圈選控件
選中某個控件之後，資料同學對該控件進行埋點配置，元素類型支援目前元素和同類元素。其中同類元素可以節省資料同學對于同一種類型的控件的多次配置。對于已經圈選出的控件，清單中會詳細展示出相關的資訊，并附上控件對于的位置截圖，能夠友善資料RD定位埋點的控件具體位置。
- MTFlexbox自動化埋點探索 - 美團技術團隊
  埋點配置

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工程師，歡迎有興趣的同學投履歷至 [email protected] 。