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

Set up Real User Monitoring (RUM) for a web or HTML5 application to track user sessions, page views (PVs), user views (UVs), and page loading time. After setup, the RUM SDK reports data to the Application Real-Time Monitoring Service (ARMS) console, where you can monitor performance and diagnose issues by user ID.

Important

Alibaba Cloud Real User Monitoring will be commercially available starting at 00:00:00 (UTC+8) on June 24, 2024. For billing details, see Billing. If you have any questions, contact the Real User Monitoring Q&A DingTalk group (Group ID: 67370002064) for help.

Workflow

Create a RUM app  -->  Install the SDK  -->  Verify the setup  -->  View monitoring data  -->  Configure alerting

Create a RUM application: Register your web or HTML5 application in the ARMS console and get the SDK initialization code.
Install the SDK: Add the generated JavaScript snippet to your HTML pages.
Verify the setup: Open your site in a browser and confirm data appears in the console.
View monitoring data: Check session counts, page load performance, and other metrics on the monitoring dashboard.
Configure alerting: Set up alert rules and notification policies for performance degradation.

Prerequisites

Before you begin, make sure that you have:

An Alibaba Cloud account with ARMS activated
A running web or HTML5 application (this guide uses a sample website hosted on an Elastic Compute Service (ECS) instance with a public IP address; for login instructions, see Connect to a Linux instance by using a password or key)

Note

Each Alibaba Cloud account receives a free quota of 100 observability capacity units (OCUs) per month. RUM charges are based on the number of sessions and custom report submissions, with each OCU covering a set number of both. For details, see Billing overview.

Step 1: Create a RUM application

Log on to the ARMS console. In the left-side navigation pane, choose Real User Monitoring > Application List. Click Add Application.
In the panel that appears, select Web & H5 as the application type, enter an application name, keep the default settings, and click Create.

Copy the generated JavaScript code. You will add this to your HTML pages in the next step. Replace the following placeholders with the values from the generated code:

Placeholder	Description	Example
`<your-app-pid>`	The unique ID of your web or HTML5 application.	`jjd**@37**`
`<your-rum-endpoint>`	The endpoint for reporting monitoring data.	`https://jjd****-default-cn.rum.aliyuncs.com`
`<your-sdk-url>`	The Content Delivery Network (CDN) URL that hosts the SDK.	`https://jjd****-sdk.rum.aliyuncs.com`

   <script>
   window.__rum = {
     "pid": "<your-app-pid>",           // Application ID assigned by RUM
     "endpoint": "<your-rum-endpoint>"  // Data reporting endpoint
   };
   </script>
   <script type="text/javascript" src="<your-sdk-url>/v2/browser-sdk.js" crossorigin></script>

Step 2: Install the SDK

Add the JavaScript snippet to your HTML pages. Choose one of the following approaches based on your project structure:

Single HTML file: Paste the snippet inside the <body> tag.
Multiple HTML files with a shared layout: Add the snippet to your layout file so it loads on every page.

The following example uses the sample website program shopping.zip with a shared layout file.

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>
    <!-- RUM SDK: paste the snippet from Step 1 here -->
    <script>
        window.__rum = {
            "pid": "<your-app-pid>",          // Replace with your application ID
            "endpoint": "<your-rum-endpoint>" // Replace with your data reporting endpoint
        };
    </script>
    <script type="text/javascript" src="<your-sdk-url>/v2/browser-sdk.js" crossorigin></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

After you add the snippet, start the application:

python app.py

Note

This guide uses synchronous CDN loading. CDN-based asynchronous loading and npm packages are also supported. For information about the procedure and scenarios of these methods, see Integrate a web application or an HTML5 application.

Step 3: Verify the setup

Open http://<ECS-public-IP>:5000 in a browser and navigate through a few pages to generate session data.
Log on to the ARMS console, go to Real User Monitoring > Application List, and confirm that your application appears with incoming data.

If your application does not appear after a few minutes, check the following:

The JavaScript snippet is correctly placed in the HTML and loads before other scripts.
The pid and endpoint values match the generated code from Step 1.
Your browser's developer console does not show network errors for the SDK script URL.

Step 4: View monitoring data

Click the name of your application on the Application List page to open the monitoring dashboard. The dashboard displays key metrics including session counts and page load performance.

For a detailed description of all dashboard metrics, see Web and HTML5 page monitoring details.

Step 5: Configure alerting

Create an alert rule

Create an alert rule: Select your application, configure the alert conditions, and set Notification Policy to Do Not Specify Notification Policy.
Copy the alert rule ID for the next step.

Create a notification policy

Create a notification policy: In the matching conditions, enter the alert rule ID from the previous step. Then configure the event group and notification methods.

View alert history

To review past alert events, see View historical alert events.

What to do next

Try other SDK installation methods: CDN-based asynchronous loading and npm packages are available. For details, see Integrate a web application or an HTML5 application.
Customize SDK configuration: Configure options such as the application ID, address for data reporting, and application environment. For a full list of configuration items, see Sample configurations of the RUM SDK for web and HTML5.