MTFlexbox自动化埋点探索

时间 2019-11-08

原文原文链接

1. 背景

跨平台动态化技术是目前移动互联网领域的重点关注方向，它既能节约人力，又能实现业务快速上线的需求。通过十年的发展，美团App已经变成了一个承载众多业务的超级平台，众多的业务方对业务形态的快速迭代和更新提出了愈来愈高的要求。传统移动端”静态“的开发方式存在一系列问题，好比包体积增加过快、线上Bug修复困难、发版周期长等，已经不能知足高速发展的业务须要。所以，美团平台自研了一套跨平台动态化方案——MTFlexbox。html

目前，MTFlexbox已经普遍应用于美团首页、搜索、外卖等多个业务场景，而且已稳定运行两年有余。在MTFlexbox规范下，只须要写一份布局文件，就能够适用多端。在实际开发中，客户端开发同窗开发布局的同时也要添加好埋点信息，帮助产品同窗来评估上线后的效果。但现有布局埋点存在成本太高、准确率较低等痛点，为了解决这些问题，咱们充分了解数据组开发人员和产品对数据统计的诉求，结合对MTFlexbox原理的深刻理解，围绕MTFlexbox的埋点上报作了不少持续、有针对性的自动化工做，帮助多个项目的效率获得了显著提高。本文主要介绍美团在MTFlexbox自动化埋点方向所进行的一些探索，但愿对你们可以有所帮助。前端

2. MTFlexbox介绍

2.1 MTFlexbox原理

MTFlexbox是美团内部一套很是成熟的跨平台动态化解决方案，遵循了CSS3中提出的Flexbox规范，抹平了多平台的差别。MTFlexbox首先按照Flexbox的规范，定义了一套三端统一的XML布局文件，并将布局文件上传至后台；客户端下载带有布局文件的JSON数据后，解析布局并绑定JSON数据，最终交由Native渲染成视图。MTFlexbox的总体架构图以下所示：

MTFlexbox架构图git

若是要用一句话来解释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控件。github

2.2 MTFlexbox适用场景

MTFlexbox基本上支持Native上经常使用的基础控件的展现，对有UI定制化的需求支持度很高。但MTFlexbox的XML布局须要在运行前编写完成，只支持简单的三元表达式，逻辑能力有限。所以，MTFlexbox特别适合布局样式复杂、变更频繁但交互简单的业务场景。例如美团App首页、搜索结果页等。这些业务场景都具有如下两个特色：json

面向多业务方：各业务方有本身的个性化丰富样式，且不一样时期可能须要不一样的样式。后端

交互简单：点击跳转完成流量输送的简单交互。数组

下面是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路径信息、坐标信息和截图信息，提供一套可视化的界面供数据同窗进行模块内任一控件的埋点圈选配置。数据同窗根据自身的需求，从目录树中圈选出本身但愿配置埋点的控件。以下图所示，右侧模块中会出现红圈将选中的控件标出。

目录树圈选控件

选中某个控件以后，数据同窗对该控件进行埋点配置，元素类型支持当前元素和同类元素。其中同类元素能够节省数据同窗对于同一种类型的控件的屡次配置。对于已经圈选出的控件，列表中会详细展现出相关的信息，并附上控件对于的位置截图，可以方便数据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. 参考资料

做者简介

叶梓、腾飞、田贝、张颖，美团终端业务研发团队研发工程师。

招聘信息

美团终端业务研发团队的职责是保障平台业务高效、稳定迭代的同时，持续优化用户体验和研发效率。团队负责的业务主要包括美团首页、美团搜索等千万级DAU高频业务以及分享、帐号、音/视频等基础业务，支撑和对接外卖、酒店等30多个业务方。团队经过动态化能力建设，加快业务上线速度，帮助产品（PM）快速验证业务选型，作出业务决策；架构/服务标准化体系建设，提高先后端以及平台与业务线的沟通、合做效率；业务监控和体验优化，有效保障核心业务服务成功率的同时，提高用户使用美团App过程当中的稳定性和流畅性。团队开发技术栈包括Android、iOS、ReactNative、Flexbox等。

美团终端业务研发团队是一个活力四射、对技术充满激情的团队，现诚聘Android、iOS工程师，欢迎有兴趣的同窗投简历至tech@meituan.com。