> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flashcat.cloud/llms.txt
> Use this file to discover all available pages before exploring further.
# Web SDK Integration Guide
> Learn how to integrate Web RUM SDK in Web applications, including NPM, CDN async, and CDN sync methods
RUM SDK supports multiple integration methods. Choose the one that best fits your project requirements.
## Integration Methods
We provide three integration methods:
| Method | Recommended For | Features |
| ------------- | ------------------------ | -------------------------------------------------- |
| **NPM** | Modern web apps | Bundled with frontend code, no impact on page load |
| **CDN Async** | Performance-focused apps | Async loading, doesn't affect page performance |
| **CDN Sync** | Complete data collection | Sync loading, captures all events |
NPM and CDN async methods may miss errors, resources, and user actions triggered before SDK initialization. Use CDN sync for complete collection.
## Integration Code
Add `@flashcatcloud/browser-rum` to your `package.json`:
```bash theme={null}
npm install @flashcatcloud/browser-rum
```
Then initialize in your app entry file:
```javascript theme={null}
import { flashcatRum } from "@flashcatcloud/browser-rum";
flashcatRum.init({
applicationId: "",
clientToken: "",
service: "",
env: "",
version: "1.0.0",
sessionSampleRate: 100
});
```
Add the following code snippet to the `` tag of each HTML page you want to monitor:
```html theme={null}
```
Add the following code snippet at the very beginning of the `` tag (before any other `
```
You can use `window.FC_RUM` to check if the SDK loaded successfully, allowing you to handle load failures.
## Initialization Parameters
### Required Parameters
Application ID, obtained from the application management page
Client Token, obtained from the application management page
Service name, used to distinguish different services
### Optional Parameters
Environment identifier, such as `production`, `staging`, etc.
Application version number
Percentage of sessions to track: 100 for all, 0 for none
Percentage of sessions with [Session Replay](/en/rum/session-replay/overview) enabled
Initial user tracking consent state, see [User Tracking Consent](/en/rum/sdk/web/advanced-config#user-tracking-consent)
Whether to manually control view creation, see [Override Default View Names](/en/rum/sdk/web/advanced-config#override-default-rum-view-names)
Whether to automatically collect user interactions
Whether to enable resource event collection
Whether to enable long task event collection
Whether to enable cross-session anonymous user ID collection
Session replay privacy policy: `allow` collects all data except passwords, `mask-user-input` hides user input field content, and `mask` hides all text
List of request URLs for injecting tracing headers, see [Integrate RUM with Distributed Tracing](/en/rum/sdk/web/advanced-config#integrate-rum-with-distributed-tracing)
Percentage of requests to trace
Optional proxy URL, e.g., `https://www.proxy.com/path`
Whether to compress requests sent to Flashduty, done in Worker thread
Whether to store context in localStorage for cross-page persistence
## Use Cases
### Custom User Identification
Use `flashcatRum.setUser()` to add identification attributes for the current user:
```javascript theme={null}
flashcatRum.setUser({
id: '1234',
name: 'John Doe',
email: 'john@doe.com',
plan: 'premium'
});
```
### Adding Custom Tags
After initializing RUM, use the `setGlobalContextProperty` API to add additional tags to all RUM events:
```javascript theme={null}
import { flashcatRum } from "@flashcatcloud/browser-rum";
flashcatRum.setGlobalContextProperty('activity', {
hasPaid: true,
amount: 23.42
});
```
### Sending Custom Actions
Use the `addAction` API to create RUM actions with context attributes:
```javascript theme={null}
import { flashcatRum } from "@flashcatcloud/browser-rum";
function onCheckoutButtonClick(cart) {
flashcatRum.addAction("checkout", {
value: cart.value,
items: cart.items
});
}
```
### Custom Error Reporting
You can attach local context to error objects via the `dd_context` property:
```javascript theme={null}
const error = new Error("Something went wrong");
error.dd_context = { component: "Menu", param: 123 };
throw error;
```
## Verification
Open browser developer tools and check if there are data upload requests to `https://browser.flashcat.cloud/api/v2/rum` in the Network panel.
Access the Flashduty console to verify that RUM application data is displaying correctly.
Trigger some user interactions on the page (clicks, scrolls, etc.) to verify data collection is working.
Data typically appears in the console within 2-5 minutes.
## Next Steps
Learn about advanced SDK configuration features
Learn about data types collected by the SDK
View and analyze RUM data