AI 助理
备案控制台
官方文档
输入文档关键字查找
首页 云监控 云监控2.0 快速入门 用户体验监控 Web & H5应用快速入门

Web & H5应用快速入门

更新时间：
产品详情
我的收藏

如果您需要了解浏览器页面、移动应用H5页面的用户Session数、PV、UV、页面加载时间等数据，或者根据用户ID快速定位问题，从而提升网站的用户体验，可以在网页程序中引入云监控2.0用户体验监控的Web & H5 SDK。

方案概览

  1. 创建应用：在控制台创建一个用于监控Web & H5页面的应用，复制和保存JavaScript脚本，该脚本以CDN方式引入Web & H5 SDK。

  2. 引入SDK：对于单个HTML文件，可以在<body>部分插入脚本代码。对于多个HTML文件，可以通过布局文件引入脚本，然后在所有页面中引用该布局文件。

  3. 查看监控：SDK会自动上报数据，您可以在应用详情页查看访问网站的用户数据。

  4. 创建告警：配置告警规则和通知策略，查看告警历史。

数据准备

本文提供一个简单的网站示例程序，并以一台绑定公网IP的ECS实例作为网站的服务器。登录ECS的步骤，请参见使用Workbench工具以SSH协议登录Linux实例。

用户体验监控按照会话（Session）数 、自定义上报次数进行计费， 一个OCU对应一定数量的会话数和自定义上报次数，每个用户每个月有100 OCU的免费额度，计费信息请参见计费说明。

前提条件

  • 您已开通阿里云云监控2.0服务。

  • 您已开通阿里云日志服务。

1. 创建应用

  1. 登录云监控2.0控制台，选择目标工作空间，在左侧导航栏选择接入中心 > 接入中心。

  2. 选择前端应用 > Web & H5。

  3. 在右侧弹出的窗口中，开始接入应用设置。

    1. 创建应用：

      • 选择地域：选择接入目标应用的地域。

      • 应用名称：自定义接入应用的名称。

      • 应用描述：自定义应用的描述内容。

      • 地域语言：支持地域和运营商展示语言切换，满足不同地域客户使用习惯。

    2. 参数配置：

      • (1) 请您根据实际接入需求填入以下参数，后续步骤中的代码示例将会自动引用该步骤中设置的参数信息。

        • 安装方式：根据您的需求选择接入应用的安装方式（异步加载、同步加载、NPM包）。

        • 配置应用环境：设置环境信息，参考值：prod，gray、pre、daily、local。

        • 路由模式：根据需求选择路由模式， 参考值：history、hash。

        • 配置项：根据您的需求选择配置项（多选）。

        说明

        以上参数设置，将会在下方接入代码参数中变更设置。

      • (2) 引入SDK。

        异步加载

        <script>
    !(function(c,b,d,a){c[a]||(c[a]={});c[a]=
    {
      pid: 'cpxxxxx8lc@b755xxxxxxf7ed9xxxe63',
      endpoint: 'https://cpxxxxx8lc-ecxxxxxab4-cn-heyuan.rum.aliyuncs.com',
      // 设置环境信息，参考值：'prod' | 'gray' | 'pre' | 'daily' | 'local'
      env: 'prod', 
      // 设置路由模式， 参考值：'history' | 'hash'
      spaMode: 'history',
      collectors: {
        // 页面性能指标监听开关，默认开启
        perf: true,
        // WebVitals指标监听开关，默认开启
        webVitals: true,
        // Ajax监听开关，默认开启
        api: true,
        // 静态资源开关，默认开启
        staticResource: true,
        // JS错误监听开关，默认开启
        jsError: true,
        // 控制台错误监听开关，默认开启
        consoleError: true,
        // 用户行为监听开关，默认开启
        action: true,
      },
      // 链路追踪配置开关，默认关闭
      tracing: true,
    }
    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>

        同步加载

        <script>
  window.__rum = {
    pid: 'cpxxxxx8lc@b755xxxxxxf7ed9xxxe63',
    endpoint: 'https://cpxxxxx8lc-ecxxxxxab4-cn-heyuan.rum.aliyuncs.com',
    // 设置环境信息，参考值：'prod' | 'gray' | 'pre' | 'daily' | 'local'
    env: 'prod', 
    // 设置路由模式， 参考值：'history' | 'hash'
    spaMode: 'history',
    collectors: {
      // 页面性能指标监听开关，默认开启
      perf: true,
      // WebVitals指标监听开关，默认开启
      webVitals: true,
      // Ajax监听开关，默认开启
      api: true,
      // 静态资源开关，默认开启
      staticResource: true,
      // JS错误监听开关，默认开启
      jsError: true,
      // 控制台错误监听开关，默认开启
      consoleError: true,
      // 用户行为监听开关，默认开启
      action: true,
    },
    // 链路追踪配置开关，默认关闭
    tracing: true,
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

        NPM包

        1. 引入NPM包。

          npm install @arms/rum-browser --save

        2. 初始化。

          import ArmsRum from '@arms/rum-browser';

ArmsRum.init({
  pid: 'cpxxxxx8lc@b755xxxxxxf7ed9xxxe63',
  endpoint: 'https://cpxxxxx8lc-ecxxxxxab4-cn-heyuan.rum.aliyuncs.com',
  // 设置环境信息，参考值：'prod' | 'gray' | 'pre' | 'daily' | 'local'
  env: 'prod', 
  // 设置路由模式， 参考值：'history' | 'hash'
  spaMode: 'history',
  collectors: {
    // 页面性能指标监听开关，默认开启
    perf: true,
    // WebVitals指标监听开关，默认开启
    webVitals: true,
    // Ajax监听开关，默认开启
    api: true,
    // 静态资源开关，默认开启
    staticResource: true,
    // JS错误监听开关，默认开启
    jsError: true,
    // 控制台错误监听开关，默认开启
    consoleError: true,
    // 用户行为监听开关，默认开启
    action: true,
  },
  // 链路追踪配置开关，默认关闭
  tracing: true,
});

export default ArmsRum;

        参数

        说明

        pid

        Web & H5应用的ID。

        endpoint

        Web & H5应用数据的上报地址。

        <script type="text/javascript" src="...">

        通过CDN方式加载Web & H5 SDK。

      • (3) 校验前确认。在前端接入代码完成后，确认勾选事项，单击开始数据接入校验。

2. 引入SDK

  1. 对于单个HTML文件，可以在<body>部分插入脚本代码。对于多个HTML文件，可以通过布局文件引入脚本，然后在所有页面中引用该布局文件。本文的网站示例程序shopping.zip通过布局文件引入，您需要用上一步骤中的脚本替换layout.html文件中的<script>标签的内容。

    layout.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Site</title>
    <script>
        window.__rum = {
            "pid": "jj*****",  // 替换为实际的应用信息
            "endpoint": "https://jj****-default-cn.rum.aliyuncs.com"
        };
    </script>
    <script type="text/javascript" src="https://jj******-sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

  2. 引入SDK后，在服务器的终端输入python app.py运行网站程序。

3. 查看监控详情

  1. 在浏览器输入${ECS实例的公网IP:5000}访问网站并操作。

  2. 在应用列表中，单击目标应用名称，查看实例概览、会话跟踪、页面访问、资源加载等页面，监控页面的详细说明请参见Web & H5监控详情。

4. 创建告警

  1. 创建告警规则：在用户体验监控导航栏，选择告警管理 > 告警规则，在新建规则下拉菜单中，单击新建告警规则，具体参数设置可以参见告警规则。

  2. 查看告警历史：在用户体验监控导航栏，选择告警管理 > 告警历史 ，具体详情可参见告警历史。

后续步骤

  • 本文使用默认的CDN同步加载方式，用户体验监控还支持CDN异步加载和npm包的安装方式，三种方式的配置步骤和使用场景，请参见接入Web & H5应用。

  • Web & H5 SDK支持应用ID、上报地址、应用环境等配置项，请参见SDK配置参考。

上一篇：用户体验监控下一篇：操作指南