首创Flutter全埋点方案

引言:无痕埋点,众所周知是移动端一个收集用户行为和数据分析很重要的一项技术手段。Flutter作为近几年年大热的移动端跨平台技术生态圈已慢慢建设起来,而全埋点始终没有很好的解决方案,于是通过阅读源码找寻了一些思路分享出来。

一、页面埋点

思路:在CupertinoApp中添加NavigatorObserver全局页面监听,当页面push和pop时维护一个自定义的路由栈用来存储需要的信息,方便回溯。监听方法:didPush、didPop、didRemove、didReplace。当触发页面push时监听页面渲染完成,然后从根节点遍历Element树寻找类型为Scaffold或CupertinoPageScaffold的Element,则最后一个元素命中当前页面,记录保存信息在堆栈中。当页面pop时从栈顶取出页面信息上报。

定位到Scaffold或CupertinoPageScaffold则需要遍历子节点寻找我们需要的信息。确定AppBar或NavigationBar有PreferredSize或ObstructingPreferredSizeWidget两种实例,如果AppBar有Title为Text,则data则为我们需要的信息,否则向下遍历子树寻找第一个Text标签。

二、用户点击行为埋点

思路:系统处理手势是在底层生成GestureDetector,传入OnTap等手势事件调用CallBack,分离widget树。包装GestureArenaMember进行竞技场竞争,由获胜者acceptGesture调用手势事件(分层解耦思想体现地淋漓尽致)。当然竞技场还有管理者GestureArenaManager,竞技场管理者放在GestureBinding中,最后调用dispatchEvent处理。我们需要获取到获胜手势,并且关联RenderObject,然后遍历Element树匹配获胜者。因为GestureDetector为Button的chid或者只有自身,所以我们判断常用的Button类,当无法匹配到的前提下说明没有包装Button,则再去寻找最近的GestureDetector,获取其Widget。最后提炼关键信息Text、Icon、Image、SvgPicture等(总体思路就是继承系统组件,添加自己需要的字段,然后回传给系统调用,最方便还是在运行时动态插入代码)。

第一步:参照Flutter框架的WidgetsFlutterBinding进行实现,将其子类化,并将必要的变量与方法替换掉(类似Flutter的testing框架,自定义了TestWidgetsFlutterBinding)。

  void runApp(Widget app) {
    var widget = EventMonitorWidget(
      monitor: eventMonitor,
      child: app,
    );
    //此处应当照搬Flutter的全局函数runApp中的代码
    scheduleAttachRootWidget(widget);
    scheduleWarmUpFrame();
  } 

第二步:替换掉竞技场管理者的实例,安插一个由我们实现的实例,用于监测获胜的手势。

  @override
  final GestureArenaManager gestureArena = EventMonitorGestureArenaManager();

第三步:覆盖原先的dispatchEvent方法。将HitTestResult替换为由我们实现的实例,将用于建立手势GestureArenaMember与手势的创建者HitTestTarget之间的对应关系。

@override
  void dispatchEvent(PointerEvent event, HitTestResult hitTestResult, {TestBindingEventSource source: TestBindingEventSource.device}) {
    var monitoredResult = (gestureArena as EventMonitorGestureArenaManager).dispatchEvent(event, hitTestResult);
    super.dispatchEvent(event, monitoredResult);
  }

第四步:在自定义的竞技场成员获胜者调用acceptGesture方法里通知监听者。并传入RenderObject遍历Element树确定widget,然后向下查找需要的标识信息。

  void acceptGesture(int pointer) {
    if ((member is GestureRecognizer) && (onAcceptGesture != null)) {
      onAcceptGesture(this);
    }
    member.acceptGesture(pointer);
  }

优化:点击事件up状态并不一定还在原触发控件里,需要过滤掉部分手势事件,防止误报信息。

思路:hook掉系统的类GestureArenaMember、GestureArenaManager、HitTestTarget、HitTestEntry、HitTestResult方便添加我们需要的信息。用户的触摸事件在从Down到Up的整个历程中,某个手势一旦获得竞技胜利,只会触发一次AcceptGesture,为了保证整个历程中的每一个事件都能通知给外部处理者,需要补发一次回调。在监听者处过滤event不为PointerUpEvent且GestureRecognizerState不为possible的Tap手势胜利者进行点击处理上报。

  //只在Tap手势结束时刻才进行进一步的判断处理
  if (!(ge.event is PointerUpEvent)) {
    return;
  }

  //Tap手势仍为成功状态,或者Tap手势是在PointerUpEvent事件中才竞技胜出的,都视为有效的点击事件
  var gesture = ge.gesture as TapGestureRecognizer;
  if ((gesture.state != GestureRecognizerState.possible) &&
      (ge.type != EventMonitorGestureEventType.winArena)) {
    return;
  }
架构图

三、列表元素曝光

思路:在widget顶部添加全局滑动监听NotificationListener<ScrollNotification>。我们发现在ScrollNotification中带有滚动发起者context(为GestureDetector),则可通过往上查找widget树匹配第一个为ScrollView或SingleChildScrollView类型的列表目标element。需要拿到列表全部cell高度,则可以通过ScrollNotification中metrics.pixels的偏移量,结合列表高度计算出曝光范围width和height。这里我们往下查找第一个元素为RenderSliverMultiBoxAdaptor的RenderObject(通过看源码得知常用ListView等列表widget底层生成的RenderObject),记录.paintBounds.size并查询所有的child为RenderIndexedSemantics类型是我们找到的cell。注意:这里获取到的曝光cell和缓存区的cell,并不一定是全部的列表元素,所以我们需要记录一个Map类型数据缓存用来进行列表数据更新,保证获取到所有cell的size。考虑到内存问题,所以引入了LRU缓存机制进行优化。最后计算在曝光范围内元素的索引范围。

上报规则:在用户开始滚动时记录曝光元素和当前时间,当有额外交互时检查是否有之前的记录,并且超过一定间隔才做上报处理,否则清空记录。自定义了widget方便业务侧上传需要上报的源数据或提供列表的上下Globalkey获取上下组件的坐标计算出模板列表坐标和size。

优化:1.复杂列表比如NestedScrollView有头部和内容联动,导致查找出来的元素偏多,因为获取到列表高度是整体nestedScrollView不是内部内容高度。2.列表查询的RenderObject覆盖面有待查验,可能有遗漏特殊列表类型。3.当页面加载完毕就应该记录初始化曝光的元素。

  int start, end;
  double addHeigh = 0;
  for (var i = 0; i < itemHeighList.length; i++) {
    double itemHeigh = itemHeighList[i];
    if (start == null && (addHeigh + itemHeigh * 0.5) >= 偏移量) {
      //确定开始范围
      start = i;
    } 
    if ((addHeigh + itemHeigh * 0.5) < (offset + 列表高度)) {
      //确定结束范围
      end = i;
    }
    addHeigh += itemHeigh;
  }

四、用户切换前后台

思路:在最顶层widget中聚合WidgetsBindingObserver,监听didChangeAppLifecycleState方法。当AppLifecycleState为paused表示进入后台,resumed表示进入前台。

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.paused) {
      //后台
    }
    if (state == AppLifecycleState.resumed) {
      //前台
    }
  }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容