利用各种手段来监听用户的操作行为
|
在很多场景下，除了异常监控有用，收集用户的行为数据同样有意义。 在一个产品中，用户最基本的行为就是切换页面。用户使用了哪些功能，也能从切换页面中体现出来。因此通用数据一般是在页面切换时产生，表示某个用户访问了某个页面。 页面切换对应到前端就是路由切换，可以通过监听路由变化来拿到新页面的数据。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：离开时间 上面的字段中，应用标识、环境、版本号统称应用字段，用于标志数据的来源。其他字段主要分为 用户，页面，时间三类，通过这三类数据就可以简单的判断出一件事：谁到过哪个页面，并停留了多长时间。 最简单的方法，在函数 recordBehaviors() 所处的 js 文件中，直接导入用户状态： // 从状态管理里中导出用户数据 import { UserStore } from '@/stores'; let { user_id, user_name } = UserStore; 这里的 @/stores 指向我项目中的文件 src/stores/index.ts，表示状态管理的入口文件，使用时替换成自己项目的实际位置。实际情况中还会有用户数据为空的问题，这里需要单独处理一下，方便我们在后续的数据查看中能看出分别： import { UserStore } from '@/stores'; // 收集行为函数 const recordBehaviors = ()=> { let report_date = { ... } if(UserStore) { let { user_id, user_name} = UserStore report_date.user_id = user_id || 0 report_date.user_name = user_name || '未命名' } else { report_date.user_id = user_id || -1 report_date.user_name = user_name || '未获取' } } 上面代码中，首先判断了状态管理中是否有用户数据，如果有则获取，没有则指定默认值。这里指定默认值的细节要注意，不是随便指定的，比如 user_id 的默认值有如下意义： user_id 为 0：表示有用户数据，但没有 user_id 字段或该字段为空 user_id 为 -1：表示没有用户数据，因而 user_id 字段获取不到 用户数据是经常容易出错的地方，因为涉及到登录状态和权限等复杂问题。指定了上述默认值后，就可以从收集到的行为数据中判断出某个页面用户状态是否正常。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
