基于UI Observer实现UI组件埋点

import { FrameNode, uiObserver, UIObserver } from '@kit.ArkUI'; 
import { ClickEventListenerCallback, GestureEventListenerCallback } from '@ohos.arkui.UIContext'; 
import { Callback } from '@kit.BasicServicesKit'; 
 
// 这里定义的时候需要注意，因为willClick可以触发手势监听也能触发click点击事情监听，但是这两者的事件对象是不一样的，需要具体区分来开 
type ClickAndGestureListenerCallBack = (event: ClickEvent | GestureEvent, node?: FrameNode) => void; 
 
export default class Listener { 
  context: UIContext 
  UIObserver: UIObserver 
  node: FrameNode | undefined 
  event: GestureEvent | ClickEvent | undefined 
  // ... 
  // 点击和手势事件监听，这里的回调函数是非必填参数，如果开发者有自己的上报逻辑，可以在回调函数中自定义，具体实现请看UI侧注册逻辑 
  registerClickAndGestureListener(callBack: ClickAndGestureListenerCallBack) { 
    this.UIObserver.on('willClick', (event, node) => { 
      this.node = node 
      this.event = event 
      if (callBack) { 
        callBack(event, node) 
      } 
    }) 
  } 
 
  // ... 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

import { promptAction } from '@kit.ArkUI' 
 
@Entry 
@Component 
struct Index { 
  @State listener: Listener = new Listener(this.getUIContext()) 
 
  aboutToAppear(): void { 
    // 点击监听 
    this.listener.registerClickListener((event, node) => { 
      // 这里在注册的时候传递回调函数给到callBack处理自己的逻辑，回调中可以拿到对应事件的事件对象和触发事件的FrameNode节点 
      // 这里就使用点击那个按钮，获取对应按钮的组件id并使用toast弹窗展示做一个简单示例 
      promptAction.showToast({ message: node?.getId() }) 
    }) 
  } 
  @Builder 
  ListenerTextBuilder() { 
    // 埋点数据反显 
    Text(` 
      ClickNodeId: ${this.listener.node?.getId()} 
      ScreenPositionX: ${this.listener.node?.getPositionToScreen().x} 
      ScreenPositionY: ${this.listener.node?.getPositionToScreen().y} 
      ScrollNodeId: ${this.listener.scrollInfo?.id} 
      ScrollOffset: ${this.listener.scrollInfo?.offset} 
      ScrollStartTime: ${this.listener.scrollStartTime} 
      ScrollEndTime: ${this.listener.scrollEndTime} 
      CurrentRouterInfoName: ${this.listener.routerInfo?.to} 
    `).hitTestBehavior(HitTestMode.Transparent) 
  } 
 
  build() { 
    Column({ space: 8 }) { 
      // 下面按钮中的id属性如不想每一个都配置可以在埋点反显逻辑中使用getUniqueId获取系统分配的ID 
      Button('点击事件按钮1').onClick(() => { 
        // 处理对应点击逻辑 
      }).id('clickButton1') 
      Button('点击事件按钮2').onClick(() => { 
        // 处理对应点击逻辑 
      }).id('clickButton2') 
      Button('按下手势按钮1').gesture(TapGesture({ count: 1 }).onAction(() => { 
        // 处理对应点击逻辑 
      })).id('TapGestureButton1') 
      Button('按下手势按钮2').gesture(TapGesture({ count: 1 }).onAction(() => { 
        // 处理对应点击逻辑 
      })).id('TapGestureButton2') 
    }.width('100%').height('100%') 
    .justifyContent(FlexAlign.Center) 
    .overlay(this.ListenerText) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

// 滚动监听 
registerScrollListener(callBack?: Callback<uiObserver.ScrollEventInfo>) { 
  this.UIObserver.on('scrollEvent', (info) => { 
    this.scrollInfo = info 
    if (info.scrollEvent == uiObserver.ScrollEventType.SCROLL_START) { 
      this.startTime = Date.now() 
    } 
    if (info.scrollEvent == uiObserver.ScrollEventType.SCROLL_STOP) { 
      this.endTime = Date.now() 
    } 
    if (callBack) { 
      callBack(info) 
    } 
  }) 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

aboutToAppear(): void { 
  ... 
  // 滚动监听，这里可以根据自己需要传递回调函数 
  this.listener.registerScrollListener() 
}
1.
2.
3.
4.
5.

// 注册路由跳转监听 
registerNavDestinationUpdateListener(callBack?: Callback<uiObserver.NavDestinationSwitchInfo>) { 
  this.UIObserver.on('navDestinationSwitch', (info) => { 
    this.routerInfo = info 
    if (callBack) { 
      callBack(info) 
    } 
    // 这里需要获取最后一次停留的页面名称和进入时间，方便后期相关埋点逻辑 
    if (info.to != 'navBar') { 
      this.lastRouterName = info.to.name 
    } else { 
      this.lastRouterName = info.to 
    } 
    this.lastRouterNameStartTime = Date.now() 
  }) 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

aboutToAppear(): void { 
  ... 
  // 路由监听 
  this.listener.registerNavDestinationUpdateListener((info) => { 
    let toName: ResourceStr = '' 
    // 跳转页面触发回调,自定义上报逻辑统计页面停留时间 
    if (info.to != 'navBar') { 
      toName = info.to.name 
    } else { 
      toName = info.to 
    } 
 
    if (toName != this.listener.lastRouterName) { 
      promptAction.showToast({ message: `页面停留时间${Date.now() - this.listener.lastRouterNameStartTime}ms` }) 
    } 
  }) 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.