产品能力对比

1. 背景-真实用户体验介绍

真实用户体验基本包含访问网站的性能、可用性和正确性。通俗的讲，就是一把通过用户访问测量【设计者】意图的尺子。

网站如何传递出设计者的意图，可能页面加载时间太长、或者页面在用户的浏览器中渲染时间太慢，或者第三方设备或网络原因出现问题，内容显示不正确或者没有显示。 如果正确实施了真实用户体验，可以第一时间发现，确认影响了谁，评判是个例还是大规模事件，是否需要检测和修复错误，是否需要投入改变设计、优化，提高业务转化率。

接入真实用户访问数据，你可以：

• 通过洞察用户行为，改善业务

• 通过会话重放，降低错误率

• 使用漏斗图了解用户旅程，提高转化率

• 根据会话、页面访问，了解性能情况

2. 观测云 RUM 介绍

2.1 观测云RUM概述

  观测云真实用户体验（简称 RUM），是观测云可观测性平台的一项功能，能够优化前端性能，在客户发现问题前揭露性能问题，深度洞察用户行为。

2.2 观测云 RUM 主要功能

  更快地故障调试速度

• 理解用户体验，包括应用性能数据，比如网站核心指标等

• 实时识别报错的设备、系统或国家，快速标注错误的部位

• 解决客户端错误，包括特定用户，包括一键定位代码错误

  监控 100%前端错误和性能问题

• 分钟级别收集用户会话和告警

• 追踪 SPA 应用和识别所有客户端、服务端问题

• 通过错误聚合智能识别受影响的用户

• 定位根因，代码行级纠错，通过会话立刻关联问题

  轻松优化性能

• 通过地理位置、浏览设备信息或者任何自定义维度，洞察关键信息

• 分析网站加载速度，使用 LCP、DOM 解析速度等核心网站指标，以及自定义指标

• 定位加载缓慢的根因，包括代码、网络或者基础设施

• 可以使用各种指标、用户行为、业务指标紧密关联性能

  深度洞察产品使用、用户行为

• 通过会话重放，了解用户行为、产品设计和业务决策

• 使用漏斗图等数据探索用户行为，了解错误和性能瓶颈，定位 UX 痛点

• 统一界面，快速和相关研发、产品、运维，分享前端洞见和仪表板

  极简端到端的可视化

• 探测、诊断和解决用户体验，包括使用错误追踪、拨测、APM、日志和基础设施监控，均在一个平台

• 降低 MTTD，MTTR，在会话界面可以快速定位到错误行，包括链路、日志和基础设施指标

• 轻松定位用户事件是前端、后端、还是第三方问题

  提高端用户体验和满意度

• 发现加载性能问题，用户交互的响应，提高用户体验

• 发现极端问题，比如 js 报错、网络错误，通过 sourcemap 快速定位代码行

• 告警和自定义指标告警来积极主动发现和提高用户满意度

3. 如何分钟级别接入

观测云真实用户体验接入只需要不足 10 分钟，可能包括

• 注册账号

• 开通 RUM

• 创建应用

• 配置 SDK

3.1 注册账号（1-5min）

1. 点击注册链接。

2. 填写必填信息，包括：用户名、登录密码、邮箱、邮箱验证码

1. 填写企业信息，至少需填写信息企业名称

1. 选择开通方式，包括空间名称，关联亚马逊云市场可以直接获得 500 代金券

成功开通后登录空间即可

3.2 开通RUM （1-2min）

常见开通 RUM 的方式是通过在服务器上安装 datakit，这种方式较复杂多需要配置服务器等设置，详见安装datakit方式。

对于没有服务器或者想要寻求更简便快捷接入的同学，现在提供了一种叫做 Headless 的功能。以下便是具体的开通方式。

小建议：现在关联亚马逊账号，有 500 的代金券，能够满足用户尝鲜。。。。

第一步，进入菜单

在观测云最左侧的菜单中，选中用户访问监测--》RUM headless--》开通按钮

第二步，填写并开通

填写一个 http 地址--》（用来接受上报的数据）--》选择规格——》立即开通

温馨提示，

3.3 创建应用（1min）

在观测云最左侧的菜单中，选中用户访问监测--》应用列表--》新建应用--》输入应用名称+应用 ID+选择应用类型--》成功创建。

3.3 配置SDK（1-5min）

如果前面都 okay，这一步只需按照下图粘贴复制即可

4. 用户反馈和帮助

官网帮助文档链接

5. 高级功能（自定义 tag、错误、事件）

存在一些特定场景，需要通过设置不同类型的标识去定位分析一些数据，所以针对这些情况，RUM SDK 提供了一些特定的 API 方便用户在自己的应用系统中，加入自己特定的逻辑：

1. 自定义标识用户（ID、name、email）
   

2. 自定义添加额外的数据 TAG
   

3. 自定义添加 Action
   

4. 自定义添加 Error
   

5.1 自定义用户

5.1.1 自定义标识用户

SDK 默认情况下，自动会给用户生成一个唯一标识 ID。这个 ID 不带任何标识属性，只能区别出不同用户属性。 为此我们提供了额外的 API 去给当前用户添加不同的标识属性。

以下属性是可选的，但建议至少提供其中一个。

添加用户标识

javascript复制代码window.DATAFLUX_RUM && window.DATAFLUX_RUM.setUser({    id: '1234',})

5.1.2 自定义添加额外的数据 TAG

初始化 RUM 后，使用addRumGlobalContext（key:string，value:any） API 向从应用程序收集的所有 RUM 事件添加额外的 TAG。

添加 TAG

javascript复制代码// Code examplewindow.DATAFLUX_RUM && window.DATAFLUX_RUM.addRumGlobalContext('isvip', 'xxxx');window.DATAFLUX_RUM && window.DATAFLUX_RUM.addRumGlobalContext('activity', {    hasPaid: true,    amount: 23.42});

替换 TAG

css复制代码// Code examplewindow.DATAFLUX_RUM &&    DATAFLUX_RUM.setRumGlobalContext({        codeVersion: 34,    });

5.1.3 自定义添加 Action

初始化 RUM 后，使用addAction（'<NAME>'，'<JSON_OBJECT>'） API,可以自定义添加采集之外的 action 指标数据。

php复制代码// Code examplewindow.DATAFLUX_RUM && window.DATAFLUX_RUM.addAction('cart', {    amount: 42,    nb_items: 2,    items: ['socks', 't-shirt'],});

5.1.4 自定义添加 Error

初始化 RUM 后，使用addError（'<NAME>'，'<JSON_OBJECT>'） API，可以自定义添加采集之外的 error 指标数据。

添加 Error

vbnet复制代码// Send a custom error with contextconst error = new Error('Something wrong occurred.');
window.DATAFLUX_RUM && DATAFLUX_RUM.addError(error, {    pageStatus: 'beta',});

1. 接入后效果说明和展示图

如果上传了数据，就能够在分析看板和查看器中，看到用户的数据，其中分析看板内容如下：

6.1 分析看板

A. 概览统计当前端口应用访问的 UV 数、PV 数、页面错误率、页面加载时间等指标，并辅助从会话分析、性能分析、错误分析三方面可视化的展示用户访问应用的数据统计，快速定位用户访问应用的问题，提高用户访问性能。

B. 性能分析统计 PV 数、页面加载时间、最受关注页面会话数、页面长任务分析、资源分析等指标，并从 Long Task 分析、XHR & Fetch 分析、资源分析三方面实时查看整体应用页面性能情况，进一步精准定位需要优化的页面。

C.资源分析通过统计资源分类、资源请求排行等指标，并从 XHR & Fetch 分析、资源耗时分析两方面，实时查看整体资源情况及需要优化的资源。

D.错误分析通过统计错误率、Crash 版本、网络错误状态分布、页面错误率等指标快速定位资源错误。

6.2 查看器

用户访问监测查看器可以帮助您查看与分析用户访问应用程序的详细信息。

在用户访问监测，点击应用列表 > 查看器，即可了解每个用户会话、页面性能、资源、长任务、操作中的错误、延迟对用户的影响，帮助您通过搜索、筛选和关联分析全面了解和改善应用的运行状态和使用情况。

观测云用户访问监测 > 查看器包括以下几种：

在查看器的数据分布图，您可以根据选择的时间范围统计，自动选取相应的时间间隔展示每个时间点上的用户访问数量分布趋势；若对数据进行了筛选过滤，将同步展示筛选后分布趋势，帮助您直观地查看不同时间点的用户访问数据。

效果如下：

1. 观测云相关文档汇总

用户访问监测 - 观测云文档

作者：观测云 Ted

链接：https://juejin.cn/post/7275150470670270524

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。