Monitor website user data using the Web & H5 SDK - Application Real-Time Monitoring Service

Integrate the ARMS Real User Monitoring Web & H5 SDK to track sessions, page views (PV), unique visitors (UV), page load time, and other metrics for browser and H5 pages, locate issues by user ID, and improve website user experience.

Important

RUM has been available for commercial use since 00:00:00 (UTC+8), June 24, 2024. For pricing details, see Billing. For technical support, join the DingTalk group (ID: 67370002064).

Solution overview

Create an application: Create an application in the console to monitor Web & H5 pages. Copy and save the JavaScript snippet that loads the Web & H5 SDK via CDN.
Integrate the SDK: For a single HTML file, insert the script code in the <body> section. For multiple HTML files, include the script in a layout file and reference that layout file across all pages.
View monitoring data: The SDK automatically reports data. View user metrics for your website on the application details page.
Create alerts: Configure alert rules and notification policies, then review alert history.

Data preparation

This guide uses a sample website hosted on an ECS instance with a public IP address. To log on to the ECS instance, see Log on to a Linux instance using Workbench.

Real User Monitoring is billed based on session count and custom report count. One OCU corresponds to a specific number of sessions and custom reports. Each user receives a free quota of 100 OCU per month. For pricing details, see Billing Overview.

1. Create an application

Log on to the ARMS console, go to Real User Monitoring » Application List, and click Add Application.

In the Create Application panel, select Web & H5 as the application type.

Enter an application name in the right-side panel and click Create . Keep other parameters at their default values, then copy the JavaScript snippet.

<script>
window.__rum = {
  "endpoint": "https://jjd****-default-cn.rum.aliyuncs.com?workspace=&service_id="
};
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

Parameter	Description
`endpoint`	The reporting endpoint for Web & H5 application data.
`<script type="text/javascript" src="...">`	Loads the Web & H5 SDK via CDN.

2. Integrate the SDK

For a single HTML file, insert the script code in the <body> section. For multiple HTML files, include the script in a layout file and reference that layout file across all pages. The sample website in this topic (shopping.zip) uses a layout file. Replace the content of the layout.html file’s <script> tag with the snippet from the previous step.

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 = {
            "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>

After integrating the SDK, run the website program by entering python app.py in the server terminal.

3. View monitoring details

Access the website in your browser by entering ${public IP address of the ECS instance}:5000 and interact with it.
In the ARMS console, go to Real User Monitoring > Application List. Click the target application name to view its overview, session tracing, page visits, resource loading, and other metrics. For detailed descriptions of monitoring pages, see Web & H5 monitoring details.

4. Create alerts

Create an alert rule: Configure the target application and alert conditions. Set the Notification Policies to Do Not Specify Notification Policy. After creation, copy the alert rule ID:

In the navigation pane on the left, click alert rules. Find your newly created alert rule in the list and copy its alert rule ID.
Create a notification policy: Configure matching rules for alert events. Set the condition so that the alert rule ID equals the ID copied in the previous step. Follow the setup wizard to configure event grouping and notification recipients.
View alert history: See View alert event history.

What to do next

This topic uses the default CDN synchronous loading method. Real User Monitoring also supports CDN asynchronous loading and npm package installation. For configuration steps and usage scenarios for all three methods, see Integrate Web & H5 applications.
The Web & H5 SDK supports configuration items such as application ID, reporting endpoint, and application environment. For details, see SDK configuration reference.