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. 创建告警:配置告警规则和通知策略,查看告警历史。

数据准备

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

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

前提条件

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

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

1. 创建应用

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

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

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

    1. 创建应用

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

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

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

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

    2. 参数配置

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

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

        • 配置应用环境:设置环境信息,参考值:prodgraypredailylocal

        • 路由模式:根据需求选择路由模式, 参考值:historyhash

        • 配置项:根据您的需求选择配置项(多选)。

        说明

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

      • (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配置参考