Install the ARMS agent through CDN - Browser monitoring| Alibaba Cloud Documentation Center

To use the browser monitoring function of Application Real-Time Monitoring Service (ARMS) to monitor Web applications, you must install the ARMS agent through Content Delivery Network (CDN) or Node Package Manager (NPM). This topic describes how to install the ARMS browser monitoring agent for Web applications through CDN.

Procedure

Log on to the ARMS console. In the left-side navigation pane, choose Application Monitoring > Applications.
In the left-side navigation pane, choose Browser Monitoring. On the Browser Monitoring page, click Create New Site in the upper-right corner.
In the Create New Site dialog box, set the site type to Web, enter the site name, and click OK.
On the Settings page, select required options in the SDK Extension Configuration section.
- Disable Automatic API Reporting: If you select this option, you need to manually call the __bl.api() method to report the API request success rate.
- Enable Automatic SPA Parsing: If you select this option, ARMS monitors the hashchange event on the page and automatically reports page views (PVs). It is applicable to single-page application (SPA) scenarios.
- Enable Data Collection of First Meaningful Paint: If you select this option, ARMS collects First Meaningful Paint (FMP) data.
- Enable Page Resources Reporting: If you select this option, static resources loaded on the page are reported upon the triggering of the onload event.
- Associate with Application Monitoring: If you select this option, API requests are associated with back-end application monitoring in end-to-end mode.
In the Copy / Paste BI Probe section, copy and paste the provided code to the first line in the <body> element on the HTML page, and restart the application.
When the ARMS browser monitoring agent is installed through CDN, the Web SDK automatically generates a user ID (UID) to collect information such as the number of unique visitors (UVs). The automatically generated UID can be used to identify a user but does not have service attributes. If you want to customize a UID, add the following content to config in the code:
```
uid: 'xxx', // The UID used to identify a user, which is set based on businesses.
```
An example is as follows:
```
<script>
!( function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",appType:undefined,imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", uid: "xxxx"};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>
```
Notice If you modify any information in the SDK Extension Configuration section, the code changes. Copy and paste the code again.

What to do next

The ARMS browser monitoring function also provides other SDK configuration items to meet your requirements. For more information, see Configuration items of the browser monitoring SDK.