埋点可视化

青团社埋点系统的变迁

t_5.png

使用

Android

在application中初始化埋点库

QTracker.init(app, qTrackerBuilder);

注册点位

用注册的方式代替手动曝光和点击

之前已有的注册方式

TraceTagHelper.INSTANCE.makeTag(findViewById(R.id.page_title_right_group), "rightGrouop", EventEntityCompat.INSTANCE.getEventEntity(TrackerConstant.Page.MESSAGE_P2P, TrackerConstant.Module.MODULE_SIX, 1), true);

结合HADES的点位特点，改造成

TrackerTagHelper.makeTag(view, "4232", "400110010000") // view处理

埋点的目标就是将点位和View绑定，通过设置HADES提供的id和positionId，可支持后续的校验，上报，查询等功能。

Dialog

Dialog，PopWindow都有自己的DecorView，因此不在Activity的ViewTree上，无法直接关联Activity。QTracker库封装了几个基础组件，内部托管了生命周期中的曝光和点击逻辑

• Dialog -> TrackerDialog
• DialogFragment -> TrackerDialogFragment
• BottomSheetDialogFragment -> BottomSheetTrackerDialogFragment
• PopupWindow -> TrackerPopupWindow

RecyclerView

原生的RV将绑定的逻辑放在onBindView中，参考Demo中的RV目录

TraceTagHelper.makeItemTag(holder.itemView, "4232", "400110010000", position) // ViewHolder等列表处理

特殊场景

网络请求后在根据数据进行绑定，需要在请求返回后更新tag，并手动调用曝光请求

曝光请求：ActivityTrackerHelper.instance.exposure()

Flutter

1. BaseTrack作为TrackerEvent的父类，实现toJSON方法

2. UME中新增TrackerInfoInspector，在回调中调用原生的上报插件

  if(kDebugMode){
    bool enableUME = true;

    //Ume调试插件初始化
    PluginManager.instance // 注册插件
      ..register(TrackerInfoInspector(uploadCallback: (eventMap){
        FlutterTrackerPlugin.uploadHades(eventMap);
      },))
    }

3. 原生端实现上报插件

埋点可视化

开发环境中有配套的工具集，在dev tool中可开启

Android

1. 开启埋点可视化工具

打开左上角dev tool，点击埋点可视化工具开启“T”浮窗。

t_2.png

2. 点位查询

t_3.png

页面会有可视化开关“T”，点击开启，页面会新增蒙层。

开启可视化工具后，所有事件都会被拦截，单击需要查看的View，工具会在对应View上覆盖一层点位信息图层，同时复制点位到剪切板上。

再次点击开关“T”，关闭，同时恢复页面交互。

3. 上报点位

长按需要上报的View，可视化工具会将id和positionId一起传递到上报弹窗，检查，点击上报即可。

4. 校验点位

长按需要上报的View，在上报弹窗中点击校验，即可校验id和positionId是否匹配。匹配成功按钮变绿，失败变红

t_4.png

Flutter

1. flutter页面点击UME，打开TrackerInfo

trace_1.png

2. 点击widget查看点位

trace_2.png

3. 长按Widget唤起上报工具

trace_3.png