当前位置：首页 > article >正文

[ARMS用户体验监控]接入H5应用

article 2024/10/22 5:18:01

ARMS用户体验监控针对Web & H5主要监控浏览器页面以及移动应用中的H5页面，通过页面内嵌JS脚本或NPM包的方式，采集应用站点运行过程中的性能指标，追踪异常问题，帮助您提升自身应用站点的用户体验。

创建应用

登录ARMS控制台。
在左侧导航栏选择用户体验监控> > 应用列表，并在顶部菜单栏选择目标地域。
在应用列表页面单击添加应用。
在创建应用面板单击Web & H5。
在接入Web & H5面板输入应用名称和描述，然后单击创建。

说明

应用名称唯一，不能与已创建的应用名称重复。

创建成功后，当前应用将会在STEP2区域自动生成对应的pid和endpoint地址。

在STEP2区域选择安装方式并安装探针SDK。

CDN同步加载

复制下方代码，并粘贴至HTML页面<body>中的第一行。

说明

请将以下代码中的pid和endpoint替换为当前应用对应的pid和endpoint地址。

<script>
  window.__rum = {
    pid: "your app id",
    endpoint: "your endpoint"
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>

复制下方代码，并粘贴至HTML页面<body>中的第一行。

说明

请将以下代码中的pid和endpoint替换为当前应用对应的pid和endpoint地址。

CDN异步加载

<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
    pid: "your app id",
    endpoint: "your endpoint"
  };
  with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
  })(window, document, "https://sdk.rum.aliyuncs.com/v2/browser-sdk.js ", "__rum");
</script>

npm包

引入npm包。
```
npm install @arms/rum-browser --save
```
初始化应用。

说明

请将以下代码中的pid和endpoint替换为当前应用对应的pid和endpoint地址。
```
import ArmsRum from '@arms/rum-browser';
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint"
});
```

各安装方式说明如下：

使用CDN加载情况下，访问 SDK 监控实例，请使用全局命名空间 RumSDK.default

const ArmsRum = window.RumSDK.default;
// 访问 RumSDK 需确保SDK已经完成加载
// 如果SDK加载前没有定义 __rum 配置，可在此初始化
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// 以下继续使用，NPM 和 CDN 一致
ArmsRum.setConfig('env', 'pre');

异步加载：又称为非阻塞加载，表示浏览器在下载执行JS之后还会继续处理后续页面。若对页面性能的要求非常高，建议使用此方式。

重要

由于是异步加载，ARMS无法捕捉到监控SDK加载初始化完成之前的JS错误和资源加载错误。
同步加载：又称为阻塞加载，表示当前JS加载完毕后才会进行后续处理。如需捕捉从页面打开到关闭的整个过程中的JS错误和资源加载错误，建议使用此方式。
npm包：使用npm包可以减少页面中Script的加载个数，可以自行控制页面Script的CDN业务方向，并可以将用户体验监控作为单独模块进行后续处理。

查看全文

http://www.kler.cn/news/359711.html