基于UI Observer实现UI组件埋点

基于UI Observer实现UI组件埋点

HarmonyOS
2024-07-25 10:25:27
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
richard_li_li

组件埋点基本介绍

组件埋点是一种在前端开发中常用的数据采集方法,它通过在页面中的组件(例如按钮、输入框、下拉框等)上添加跟踪代码,来收集用户的操作行为数据。这些数据可以帮助开发人员分析用户的使用习惯、行为路径等信息,从而优化产品的设计和功能。

组件埋点的实现方式通常包括以下几个步骤:

1. 确定需要收集的数据类型和指标,例如点击次数、输入内容、页面停留时间等。

2. 在页面中的组件上添加跟踪代码,通常是在组件的事件处理函数中调用一个统一的数据采集函数。

3. 将采集到的数据发送到后端服务器进行存储和分析。

4. 对采集到的数据进行分析和处理,以便于开发人员进行产品优化和改进。

本文主要介绍如何在鸿蒙中实现埋点数据的收集,上报展示数据方式为反显到屏幕中,如下图所示,可根据实际进行调整

常见场景实现

按钮点击:全局监听用户在页面中触发的点击事件。

点击事件分为手势事件和click事件,通过UIObserver.on('willClick')方法注册点击事件和手势事件监听,后续页面中所有的onClick与gesture都可以监听到,这个监听在同一个UIContext下是全局生效的;在用户触发点击操作后,会回调返回当前点击元素的FrameNode对象和event事件对象,通过FrameNode可以获取到当前组件的相关信息,如ID、父子节点、组件大小等等,详情请见官网文档FrameNode。用户可根据自己实际需要获取对应信息上报,当前案例仅获取ID与相对屏幕的位置为例子。

下面代码中registerClickAndGestureListener可以同时注册手势监听与点击事件监听,非必填参数callBack用于处理用户一些自定义埋点逻辑,会在回调函数中带出当前的事件对象event和触发该事件的FrameNode节点,具体请看下面实现:

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) 
      } 
    }) 
  } 
 
  // ... 
}

在页面中使用,需要注意的在下面代码中按钮上的id属性为可选配置项,主要目的是用于标识具体点击的是哪个组件,自己定义的id更明显,如不想每一个组件都配置,可以使用FrameNode.getUniqueId接口获取系统分配的ID也可以。

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) 
  } 
}

页面滚动:记录用户页面滚动的位置和时间。

页面滚动监听调用UIObserver.on('scrollEvent')实现,记录滚动开始时间和结束时间,同时在滚动结束的时候显示对应的滚动距离offset,实现代码如下。

ps:当前实现的监听是页面中任何一个滚动组件List、Scroll等只要触发了滚动都该监听都能识别到,并且可以在回调的info中拿到滚动容器组件的ID,如需要精准监听对应的滚动组件可以参考官网示例

// 滚动监听 
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) 
    } 
  }) 
}

页面中注册

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

路由跳转:记录用户跳转页面,统计页面停留时间

路由跳转监听调用UIObserver.on('navDestinationSwitch')实现,代码如下:

这里仅介绍navigation路由,router路由监听实现使用UIObserver.on('routerPageUpdate')。

// 注册路由跳转监听 
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() 
  }) 
}

页面中注册,页面中注册的时候传递自己的处理逻辑,获取页面跳转时间统计页面停留时长。

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` }) 
    } 
  }) 
}

实现效果

FAQ

Q:Listener监听是根据context范围来的吗?用应用级的context注册监听是应用级监听?

A:Listener所有监听都是根据UIContext范围全局生效的,因为使用必须与UIContext强绑定,所以在首页的aboutappear里面实现的注册。

Q:手势事件和click事件如何区分监听?

A:当前提供的UIObserver.on('willClick')方法可以同时监听手势事件和click事件,只是回调方法中带出来的事件对象参数不同(手势事件带出来参数为GestureEvent,点击事件带出参数为ClickEvent),其它没什么区别。

分享
微博
QQ
微信
回复1
2024-07-25 19:13:17
相关问题
分析无法正常上报
1650浏览 • 1回复 待解决
HarmonyOS 关于页面方案的咨询
294浏览 • 1回复 待解决
鸿蒙平台 UI审核如何实现
4846浏览 • 1回复 待解决
在应用内采集数据的方式
333浏览 • 1回复 待解决
鸿蒙怎么实现UI控件样式复用 ?
7575浏览 • 3回复 待解决
HarmonyOS 想要实现图中这样的UI
66浏览 • 1回复 待解决
HarmonyOS UI组件事件拦截处理
228浏览 • 1回复 待解决
HarmonyOS UI组件的基类是什么?
188浏览 • 1回复 待解决
harmonyOS中有支持图表的UI组件
684浏览 • 1回复 待解决
Ark UI 和Java UI 可以混合开发么?
4262浏览 • 1回复 待解决
鸿蒙UI框架没有 C++的 UI框架
13168浏览 • 2回复 待解决
HarmonyOS UI组件自定义点击范围
136浏览 • 1回复 待解决
Tabs组件自定义导航栏UI问题
681浏览 • 1回复 待解决
如何获取UI组件的显示或隐藏状态
2046浏览 • 1回复 待解决
#鸿蒙学习大百科#如何实现ui优化?
58浏览 • 1回复 待解决