相关问题
HarmonyOS 统一UI操作如何创建例如页面打开埋点、关闭埋点
318浏览 • 1回复 待解决
如何在可滚动的容器组件中实现曝光埋点
1633浏览 • 1回复 待解决
HarmonyOS 点击埋点和曝光埋点的最佳实践是什么?
305浏览 • 1回复 待解决
分析埋点无法正常上报
1650浏览 • 1回复 待解决
HarmonyOS 关于页面埋点方案的咨询
294浏览 • 1回复 待解决
鸿蒙平台 UI审核如何实现?
4846浏览 • 1回复 待解决
在应用内埋点采集数据的方式
333浏览 • 1回复 待解决
鸿蒙怎么实现UI控件样式复用 ?
7575浏览 • 3回复 待解决
HarmonyOS 想要实现图中这样的UI
66浏览 • 1回复 待解决
#鸿蒙学习大百科#如何实现Navigation路由生命周期全局埋点?
97浏览 • 1回复 待解决
基于鸿蒙JS UI,使用远程真机拍照上传报错
6874浏览 • 2回复 待解决
HarmonyOS UI组件事件拦截处理
228浏览 • 1回复 待解决
HarmonyOS UI组件的基类是什么?
188浏览 • 1回复 待解决
harmonyOS中有支持图表的UI组件吗
684浏览 • 1回复 待解决
#鸿蒙学习大百科#开发者如何实现应用的埋点采集数据?
48浏览 • 1回复 待解决
Ark UI 和Java UI 可以混合开发么?
4262浏览 • 1回复 待解决
鸿蒙UI框架没有 C++的 UI框架
13168浏览 • 2回复 待解决
HarmonyOS UI组件自定义点击范围
136浏览 • 1回复 待解决
TS UI组件太少,没有想要的组件,如何解决?
4843浏览 • 2回复 已解决
HarmonyOS 声明式UI组件如何获取FrameNode节点
272浏览 • 1回复 待解决
使用LazyForEach渲染语法渲染组件,UI不刷新。
779浏览 • 1回复 待解决
Tabs组件自定义导航栏UI问题
681浏览 • 1回复 待解决
如何获取UI组件的显示或隐藏状态
2046浏览 • 1回复 待解决
HarmonyOS 请问如何根据组件id获取对应的UI组件对象?
145浏览 • 1回复 待解决
#鸿蒙学习大百科#如何实现ui优化?
58浏览 • 1回复 待解决
组件埋点基本介绍
组件埋点是一种在前端开发中常用的数据采集方法,它通过在页面中的组件(例如按钮、输入框、下拉框等)上添加跟踪代码,来收集用户的操作行为数据。这些数据可以帮助开发人员分析用户的使用习惯、行为路径等信息,从而优化产品的设计和功能。
组件埋点的实现方式通常包括以下几个步骤:
1. 确定需要收集的数据类型和指标,例如点击次数、输入内容、页面停留时间等。
2. 在页面中的组件上添加跟踪代码,通常是在组件的事件处理函数中调用一个统一的数据采集函数。
3. 将采集到的数据发送到后端服务器进行存储和分析。
4. 对采集到的数据进行分析和处理,以便于开发人员进行产品优化和改进。
本文主要介绍如何在鸿蒙中实现埋点数据的收集,上报展示数据方式为反显到屏幕中,如下图所示,可根据实际进行调整
常见场景实现
按钮点击:全局监听用户在页面中触发的点击事件。
点击事件分为手势事件和click事件,通过UIObserver.on('willClick')方法注册点击事件和手势事件监听,后续页面中所有的onClick与gesture都可以监听到,这个监听在同一个UIContext下是全局生效的;在用户触发点击操作后,会回调返回当前点击元素的FrameNode对象和event事件对象,通过FrameNode可以获取到当前组件的相关信息,如ID、父子节点、组件大小等等,详情请见官网文档FrameNode。用户可根据自己实际需要获取对应信息上报,当前案例仅获取ID与相对屏幕的位置为例子。
下面代码中registerClickAndGestureListener可以同时注册手势监听与点击事件监听,非必填参数callBack用于处理用户一些自定义埋点逻辑,会在回调函数中带出当前的事件对象event和触发该事件的FrameNode节点,具体请看下面实现:
在页面中使用,需要注意的在下面代码中按钮上的id属性为可选配置项,主要目的是用于标识具体点击的是哪个组件,自己定义的id更明显,如不想每一个组件都配置,可以使用FrameNode.getUniqueId接口获取系统分配的ID也可以。
页面滚动:记录用户页面滚动的位置和时间。
页面滚动监听调用UIObserver.on('scrollEvent')实现,记录滚动开始时间和结束时间,同时在滚动结束的时候显示对应的滚动距离offset,实现代码如下。
ps:当前实现的监听是页面中任何一个滚动组件List、Scroll等只要触发了滚动都该监听都能识别到,并且可以在回调的info中拿到滚动容器组件的ID,如需要精准监听对应的滚动组件可以参考官网示例。
页面中注册
路由跳转:记录用户跳转页面,统计页面停留时间
路由跳转监听调用UIObserver.on('navDestinationSwitch')实现,代码如下:
这里仅介绍navigation路由,router路由监听实现使用UIObserver.on('routerPageUpdate')。
页面中注册,页面中注册的时候传递自己的处理逻辑,获取页面跳转时间统计页面停留时长。
实现效果
FAQ
Q:Listener监听是根据context范围来的吗?用应用级的context注册监听是应用级监听?
A:Listener所有监听都是根据UIContext范围全局生效的,因为使用必须与UIContext强绑定,所以在首页的aboutappear里面实现的注册。
Q:手势事件和click事件如何区分监听?
A:当前提供的UIObserver.on('willClick')方法可以同时监听手势事件和click事件,只是回调方法中带出来的事件对象参数不同(手势事件带出来参数为GestureEvent,点击事件带出参数为ClickEvent),其它没什么区别。