0
点赞
收藏
分享

微信扫一扫

#yyds干货盘点#聊聊前端监控

前端监控其实是对用户行为进行监控。

怎么定义行为数据?顾名思义,就是用户在使用产品过程中产生的行为轨迹。比如去过哪几个页面,点过哪几个按钮,甚至在某个页面停留了多长时间,某个按钮点击了多少次,如果有需求都可以记录下来。

但是记录行为数据是一个和业务紧密关联的事情,不可能把每个用户每一步操作都极其详细的记录下来,这样会产生极其庞大的数据,很显然不现实。

合理的做法是,根据产品的实际情况评估,哪个模块哪个按钮需要重点记录,则可以采集的详细一些;哪些模块不需要重点关注,则简单记录一下基本信息。

根据这个逻辑,我们可以把行为数据分为两类:

  1. 通用数据
  2. 特定数据

下面分别介绍这两类数据该如何收集。

通用数据

在一个产品中,用户最基本的行为就是切换页面。用户使用了哪些功能,也能从切换页面中体现出来。因此通用数据一般是在页面切换时产生,表示某个用户访问了某个页面。

页面切换对应到前端就是路由切换,可以通过监听路由变化来拿到新页面的数据。Vue 在全局路由守卫中监听路由变化,任意路由切换都能执行这里的回调函数。

// Vue3 路由写法
const router = createRouter({ ... })
router.beforeEach(to => {
// to 代表新页面的路由对象
recordBehaviors(to)
})

React 在组件的 useEffect 中实现相同的功能。不过要注意一点,监听所有路由变化,则需要所有路由都经过这个组件,监听才有效果。具体的方法是配置路由时加 ​*​ 配置:

import HomePage from '@/pages/Home'
<Route path="*" component={HomePage} />,

然后在这个组件的的 useEffect 中监听路由变化:

// HomePage.jsx
const { pathname } = useLocation();
useEffect(() => {
// 路由切换这个函数触发
recordBehaviors(pathname);
}, [pathname]);

上面代码中,在路由切换时都调用了 ​​recordBehaviors()​​ 方法并传入了参数。Vue 传的是一个路由对象,React 传的是路由地址,接下来就可以在这个函数内收集数据了。

明确了在哪里收集数据,我们还要知道收集哪些数据。收集行为数据最基本的字段如下:

  • ​app​​:应用的名称/标识
  • ​env​​:应用环境,一般是开发,测试,生产
  • ​version​​:应用的版本号
  • ​user_id​​:当前用户 ID
  • ​user_name​​:当前用户名
  • ​page_route​​:页面路由
  • ​page_title​​:页面名称
  • ​start_at​​:进入时间
  • ​end_at​​:离开时间

上面的字段中,应用标识、环境、版本号统称应用字段,用于标志数据的来源。其他字段主要分为 用户页面时间三类,通过这三类数据就可以简单的判断出一件事:谁到过哪个页面,并停留了多长时间。

特定数据

除了通用数据,大部分情况我们还要在具体的页面中收集某些特定的行为。比如某个关键的按钮有没有点击,点了多少次;或者某个关键区域用户有没有看到,看到(曝光)了多少次等等。

收集数据还有一个更专业的叫法 ———— 埋点。直观理解是,哪里需要上报数据,就埋一个上报函数进去。

通用数据针对所有页面自动收集,特定数据就需要根据每个页面的实际需求手动添加。以一个按钮为例:

<button onClick={onClick}>点击</button>;
const onClick = (e) => {
// console.log(e);
repoerEvents(e);
};

上面代码中,我们想记录这个按钮的点击情况,所以做了一个简单的埋点 ———— 在按钮点击事件中调用 ​​repoerEvents()​​ 方法,这个方法内部会收集数据并上报。

这是最原始的埋点方式,直接将上报方法放到事件函数中。repoerEvents() 方法接收一个事件对象参数,在参数中获取需要上报的事件数据。

特定数据与通用数据的许多字段是一样的,收集特定数据需要的基本字段如下:

  • ​app​​:应用的名称/标识
  • ​env​​:应用环境,一般是开发,测试,生产
  • ​version​​:应用的版本号
  • ​user_id​​:当前用户 ID
  • ​user_name​​:当前用户名
  • ​page_route​​:页面路由
  • ​page_title​​:页面名称
  • ​created_at​​:触发时间
  • ​event_type​​:事件类型
  • ​action_tag​​:行为标识
  • ​action_label​​:行为描述

这些基本字段中,前 7 个字段与前面通用数据的获取完全一样,这里就不赘述了。实际上特定数据需要获取的专有字段只有 3 个:

  • ​event_type​​:事件类型
  • ​action_tag​​:行为标识
  • ​action_label​​:行为描述

这三个字段也非常容易获取。event_type 表示事件触发的类型,比如点击、滚动、拖动等,可以在事件对象中拿到。action_tag 和 action_label 是必须指定的属性,表示本次埋点的标识和文字描述,用于在后续的数据处理时方便查阅和统计。

举报

相关推荐

0 条评论