通过Web & H5 SDK监控网站用户数据_应用实时监控服务(ARMS)-阿里云帮助中心

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

重要

阿里云用户体验监控于2024年06月24日00:00:00（UTC+8）起正式商用，计费详情，请参见计费说明。如果您在使用中有任何问题，请联系用户体验监控答疑钉钉群（群号：67370002064）获取帮助。

方案概览

创建应用：在控制台创建一个用于监控Web & H5页面的应用，复制和保存JavaScript脚本，该脚本以CDN方式引入Web & H5 SDK。
引入SDK：对于单个HTML文件，可以在<body>部分插入脚本代码。对于多个HTML文件，可以通过布局文件引入脚本，然后在所有页面中引用该布局文件。
查看监控：SDK会自动上报数据，您可以在应用详情页查看访问网站的用户数据。
创建告警：配置告警规则和通知策略，查看告警历史。

数据准备

本文提供一个简单的网站示例程序，并以一台绑定公网IP的ECS实例作为网站的服务器。登录ECS的步骤，请参见通过密码或密钥认证登录Linux实例。

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

1. 创建应用

登录ARMS控制台，进入用户体验监控>应用列表页面，单击添加应用。
在右侧面板输入应用名称，单击创建，其他参数保持默认，然后复制JavaScript脚本代码。
```
<script>
window.__rum = {
  "pid": "jjd****@37****",
  "endpoint": "https://jjd****-default-cn.rum.aliyuncs.com"
};
</script>
<script type="text/javascript" src="https://jjd****-sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>
```
参数
说明
pid
Web & H5应用的ID。
endpoint
Web & H5应用数据的上报地址。
<script type="text/javascript" src="...">
通过CDN方式加载Web & H5 SDK。

2. 引入SDK

对于单个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>

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

3. 查看监控详情

在浏览器输入${ECS实例的公网IP:5000}访问网站并操作。
在ARMS控制台的用户体验监控>应用列表页面，单击目标应用名称，查看应用概览、会话跟踪、页面访问、资源加载等页面，监控页面的详细说明请参见Web & H5监控详情。

4. 创建告警

创建告警规则：配置告警应用、告警条件，通知策略配置为不指定通知策略。创建完成后复制告警规则ID：
创建通知策略：配置告警事件的匹配规则，条件配置为告警规则ID等于上一步中复制的ID，按照配置向导配置事件分组和通知对象。
查看告警历史：参见查看告警发送历史和查看告警事件历史。

后续步骤

本文使用默认的CDN同步加载方式，用户体验监控还支持CDN异步加载和npm包的安装方式，三种方式的配置步骤和使用场景，请参见接入Web & H5应用。
Web & H5 SDK支持应用ID、上报地址、应用环境等配置项，请参见SDK配置参考。

参数	说明
`pid`	Web & H5应用的ID。
`endpoint`	Web & H5应用数据的上报地址。
`<script type="text/javascript" src="...">`	通过CDN方式加载Web & H5 SDK。