如果您需要了解浏览器页面、移动应用H5页面的用户Session数、PV、UV、页面加载时间等数据,或者根据用户ID快速定位问题,从而提升网站的用户体验,可以在网页程序中引入云监控2.0用户体验监控的Web & H5 SDK。
方案概览
创建应用:在控制台创建一个用于监控Web & H5页面的应用,复制和保存JavaScript脚本,该脚本以CDN方式引入Web & H5 SDK。
引入SDK:对于单个HTML文件,可以在
<body>
部分插入脚本代码。对于多个HTML文件,可以通过布局文件引入脚本,然后在所有页面中引用该布局文件。查看监控:SDK会自动上报数据,您可以在应用详情页查看访问网站的用户数据。
创建告警:配置告警规则和通知策略,查看告警历史。
数据准备
本文提供一个简单的网站示例程序,并以一台绑定公网IP的ECS实例作为网站的服务器。登录ECS的步骤,请参见使用Workbench工具以SSH协议登录Linux实例。
用户体验监控按照会话(Session)数 、自定义上报次数进行计费, 一个OCU对应一定数量的会话数和自定义上报次数,每个用户每个月有100 OCU的免费额度,计费信息请参见计费说明。
前提条件
您已开通阿里云云监控2.0服务。
您已开通阿里云日志服务。
1. 创建应用
登录云监控2.0控制台,选择目标工作空间,在左侧导航栏选择 。
选择
。在右侧弹出的窗口中,开始接入应用设置。
创建应用:
选择地域:选择接入目标应用的地域。
应用名称:自定义接入应用的名称。
应用描述:自定义应用的描述内容。
地域语言:支持地域和运营商展示语言切换,满足不同地域客户使用习惯。
参数配置:
(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包
引入NPM包。
npm install @arms/rum-browser --save
初始化。
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
对于单个HTML文件,可以在
<body>
部分插入脚本代码。对于多个HTML文件,可以通过布局文件引入脚本,然后在所有页面中引用该布局文件。本文的网站示例程序shopping.zip通过布局文件引入,您需要用上一步骤中的脚本替换layout.html
文件中的<script>
标签的内容。引入SDK后,在服务器的终端输入
python app.py
运行网站程序。
3. 查看监控详情
在浏览器输入
${ECS实例的公网IP:5000}
访问网站并操作。在应用列表中,单击目标应用名称,查看实例概览、会话跟踪、页面访问、资源加载等页面,监控页面的详细说明请参见Web & H5监控详情。
4. 创建告警
后续步骤
本文使用默认的CDN同步加载方式,用户体验监控还支持CDN异步加载和npm包的安装方式,三种方式的配置步骤和使用场景,请参见接入Web & H5应用。
Web & H5 SDK支持应用ID、上报地址、应用环境等配置项,请参见SDK配置参考。