Monitor website user data through RUM SDK for web & HTML5 - Application Real-Time Monitoring Service

If you want to improve the user experience of a web or HTML5 application by monitoring user sessions, page views (PVs), user views (UVs), and page loading time, or by locating problems based on user IDs, you can configure Real User Monitoring (RUM) SDK for web & HTML5 for the application.

Important

RUM has been available for commercial use since 00:00:00 (UTC +8) on June 24, 2024. For more information, see Billing. To obtain technical support, join the DingTalk group chat (ID: 67370002064).

Workflow

Create a RUM application: Create a RUM application for monitoring the web or HTML5 application. Then, copy and save the JavaScript code that introduces the SDK through Alibaba Cloud Content Delivery Network (CDN).
Introduce the SDK: For a single HTML file, insert the JavaScript code into the <body>. For multiple HTML files, introduce the JavaScript code through a layout file, which is then referenced in all pages.
View monitoring data: The SDK automatically reports data. View the user data of the website on the application details page.
Configure alerting: Configure alert rules and notification policies, and view the alert history.

Preparations

This topic takes a simple website program as an example and uses an Elastic Compute Service (ECS) instance bound with a public IP address as the website server. For information about how to log on to an ECS instance, see Connect to a Linux instance by using a password or key.

RUM charges fees based on the number of sessions and custom report submissions, with one observability capacity unit (OCU) corresponding to a certain number of sessions and custom report submissions. Each Alibaba Cloud account has a free quota of 100 OCUs per month. For more information, see Billing overview.

1. Create a RUM application

Log on to the Application Real-Time Monitoring Service (ARMS) console. In the left-side navigation pane, choose Real User Monitoring > Application List. On the page that appears, click Add Application.
In the pane that appears, select Web & H5 as the application type, enter an application name, keep other settings default, and then click Create. Copy the generated JavaScript code.
```
<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>
```
Parameter
Description
pid
The ID of the web or HTML5 application.
endpoint
The address for reporting web or HTML5 application data.
<script type="text/javascript" src="...">
Uses CDN to load the SDK.

2. Introduce the SDK

For a single HTML file, you can insert JavaScript code in the <body>. For multiple HTML files, you can use a layout file to introduce JavaScript code, which is then referenced in all pages. In this section, the sample website program shopping.zip is introduced through a layout file. In the layout.html file, replace the content in the section marked with the <script> tag with the JavaScript code saved in 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 = {
            "pid": "jj*****",  // Specify the PID.
            "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 the SDK is introduced, enter python app.py in the terminal of the server to run the website program.

3. View monitoring data

Enter ${Public IP address of ECS instance:5000} in the address bar of a browser to access the website.
Log on to the ARMS console. In the left-side navigation pane, choose Real User Monitoring > Application List. Click the name of the application used for monitoring. For more information, see Web and HTML5 page monitoring details.

4. Configure alerting

Create an alert rule: Select the application, configure alert conditions, and set the Notification Policy parameter to Do Not Specify Notification Policy. Then, copy the ID of the alert rule.
Create a notification policy: Configure matching conditions for alert events. The alert rule ID that can be specified as a condition is the ID generated in the previous step. Then, configure the event group and notification methods as prompted.
View alert history: For information about how to view alert history, see View historical alert events.

What to do next

In this topic, the SDK is synchronously loaded through CDN. 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.
RUM SDK for web & HTML5 supports configuration items such as the application ID, address for data reporting, and application environment. For more information, see Sample configurations of the RUM SDK for web and HTML5.

Parameter	Description
`pid`	The ID of the web or HTML5 application.
`endpoint`	The address for reporting web or HTML5 application data.
`<script type="text/javascript" src="...">`	Uses CDN to load the SDK.