接入Web & H5应用

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

重要

阿里云用户体验监控于2024062400:00:00(UTC+8)起正式商用,计费详情,请参见计费说明。如果您在使用中有任何问题,请联系用户体验监控答疑钉钉群(群号:67370002064)获取帮助。

创建应用

  1. 登录ARMS控制台

  2. 在左侧导航栏选择用户体验监 > 应用列表,并在顶部菜单栏选择目标地域。

  3. 应用列表页面单击添加应用

  4. 创建应用面板单击Web & H5

  5. 接入Web & H5面板输入应用名称和描述,然后单击创建

    说明

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

    创建成功后,当前应用将会在STEP2区域自动生成对应的pidendpoint地址。

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

    CDN同步加载

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

    说明

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

    <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>

    CDN异步加载

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

    说明

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

    <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

    1. 引入npm包。

      npm install @arms/rum-browser --save
    2. 初始化应用。

      说明

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

      import ArmsRum from '@arms/rum-browser';
      ArmsRum.init({
        pid: "your app id",
        endpoint: "your endpoint"
      });

    各安装方式说明如下:

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

      重要

      由于是异步加载,ARMS无法捕捉到监控SDK加载初始化完成之前的JS错误和资源加载错误。

    • 同步加载:又称为阻塞加载,表示当前JS加载完毕后才会进行后续处理。如需捕捉从页面打开到关闭的整个过程中的JS错误和资源加载错误,建议使用此方式。

    • npm包:使用npm包可以减少页面中Script的加载个数,可以自行控制页面ScriptCDN业务方向,并可以将用户体验监控作为单独模块进行后续处理。

    使用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');
    

相关文档

ARMS用户体验监控提供一系列SDK配置项,让您能够通过设置参数来满足额外需求。更多信息,请参见SDK配置参考