---
title: Browser Monitoring Client-Side Setup
description: >-
  Set up RUM Browser SDK using client-side instrumentation with NPM or CDN to
  monitor user experience, performance, and errors in web applications.
breadcrumbs: >-
  Docs > RUM & Session Replay > Application Monitoring > RUM Browser Monitoring
  > Browser Monitoring Setup > Browser Monitoring Client-Side Setup
---

# Browser Monitoring Client-Side Setup

## Overview{% #overview %}

The Datadog Browser SDK enables Real User Monitoring (RUM) for your web applications, providing comprehensive visibility into user experience and application performance. With RUM, you can monitor page load times, user interactions, resource loading, and application errors in real-time.

RUM helps you:

- Monitor user experience with detailed performance metrics for page loads, user actions, and resource requests
- Track user journeys through your application with Session Replay capabilities
- Identify performance bottlenecks and correlate frontend and backend performance with APM traces

The Browser SDK supports all modern desktop and mobile browsers and provides automatic collection of key performance metrics, user interactions, and application errors. After setup, you can manage your RUM configurations per application in Datadog and visualize the collected data in dashboards and the RUM Explorer.

This page describes how to instrument your web applications with the Datadog Browser SDK. The Browser SDK supports [Real User Monitoring (RUM)](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client), [Error Tracking](https://docs.datadoghq.com/error_tracking/frontend/browser), [Session Replay](https://docs.datadoghq.com/session_replay/browser/), and [Product Analytics](https://docs.datadoghq.com/product_analytics/).

The Browser SDK supports all modern desktop and mobile browsers.

## Setup{% #setup %}

**Choose your setup method:**

- **[Server-side auto-instrumentation](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/server)**: Automatically inject the RUM SDK into HTML responses through your web server or proxy.
- **[Agentic Onboarding (in Preview)](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/agentic_onboarding/?tab=realusermonitoring)**: Use AI coding agents (Cursor, Claude Code) to automatically instrument your application with one prompt.
- **Manual client-side setup** (below): Manually add the SDK to your application code.

### Step 1 - Create the application in the UI{% #step-1--create-the-application-in-the-ui %}

1. In Datadog, navigate to [**Digital Experience** > **Add an Application**](https://app.datadoghq.com/rum/list) and select the JavaScript (JS) application type.
1. Enter a name for your application, then click **Create Application**. This generates a `clientToken` and an `applicationId` for your application.

### Step 2 - Install the Browser SDK{% #step-2--install-the-browser-sdk %}

Choose the installation method for the Browser SDK.

{% tab title="NPM" %}
Installing through Node Package Manager (npm) registry is recommended for modern web applications. The Browser SDK is packaged with the rest of your frontend JavaScript code. It has no impact on page load performance. However, the SDK may miss errors, resources, and user actions triggered before the SDK is initialized. Datadog recommends using a matching version with the Browser Logs SDK.

Add [`@datadog/browser-rum`](https://www.npmjs.com/package/@datadog/browser-rum) to your `package.json` file, for example if you use npm cli:

```
npm install --save @datadog/browser-rum
```

{% /tab %}

{% tab title="CDN async" %}
Installing through CDN async is recommended for web applications with performance targets. The Browser SDK loads from Datadog's CDN asynchronously, ensuring the SDK download does not impact page load performance. However, the SDK may miss errors, resources, and user actions triggered before the SDK is initialized.

Add the generated code snippet to the head tag of every HTML page you want to monitor in your application.

{% callout %}
# Important note for users on the following Datadog sites: app.datadoghq.com

```
<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v6/datadog-rum.js','DD_RUM')
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: app.datadoghq.eu

```
<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/eu/v6/datadog-rum.js','DD_RUM')
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: ap1.datadoghq.com

```
<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/ap1/v6/datadog-rum.js','DD_RUM')
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: ap2.datadoghq.com

```
<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/ap2/v6/datadog-rum.js','DD_RUM')
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: us3.datadoghq.com

```
<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us3/v6/datadog-rum.js','DD_RUM')
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: us5.datadoghq.com

```
<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us5/v6/datadog-rum.js','DD_RUM')
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: app.ddog-gov.com

```
<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum-v6.js','DD_RUM')
</script>
```

{% /callout %}

{% /tab %}

{% tab title="CDN sync" %}
Installing through CDN sync is recommended for collecting all events. The Browser SDK loads from Datadog's CDN synchronously, ensuring the SDK loads first and collects all errors, resources, and user actions. This method may impact page load performance.

Add the generated code snippet to the head tag (in front of any other script tags) of every HTML page you want to monitor in your application. Placing the script tag higher and loading it synchronously ensures Datadog RUM can collect all performance data and errors.

{% callout %}
# Important note for users on the following Datadog sites: app.datadoghq.com

```
<script
    src="https://www.datadoghq-browser-agent.com/us1/v6/datadog-rum.js"
    type="text/javascript">
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: app.datadoghq.eu

```
<script
    src="https://www.datadoghq-browser-agent.com/eu/v6/datadog-rum.js"
    type="text/javascript">
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: ap1.datadoghq.com

```
<script
    src="https://www.datadoghq-browser-agent.com/ap1/v6/datadog-rum.js"
    type="text/javascript">
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: ap2.datadoghq.com

```
<script
    src="https://www.datadoghq-browser-agent.com/ap2/v6/datadog-rum.js"
    type="text/javascript">
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: us3.datadoghq.com

```
<script
    src="https://www.datadoghq-browser-agent.com/us3/v6/datadog-rum.js"
    type="text/javascript">
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: us5.datadoghq.com

```
<script
    src="https://www.datadoghq-browser-agent.com/us5/v6/datadog-rum.js"
    type="text/javascript">
</script>
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: app.ddog-gov.com

```
<script
    src="https://www.datadoghq-browser-agent.com/datadog-rum-v6.js"
    type="text/javascript">
</script>
```

{% /callout %}

{% /tab %}

### Step 3 - Initialize the Browser SDK{% #step-3--initialize-the-browser-sdk %}

The SDK should be initialized as early as possible in the app lifecycle. This ensures all measurements are captured correctly.

In the initialization snippet, set an environment name, service name, and client token. See the full list of [initialization parameters](https://datadoghq.dev/browser-sdk/interfaces/_datadog_browser-rum.RumInitConfiguration.html).

{% tab title="NPM" %}

```
import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
   applicationId: '<APP_ID>',
   clientToken: '<CLIENT_TOKEN>',
   // `site` refers to the Datadog site parameter of your organization
   // see https://docs.datadoghq.com/getting_started/site/
   site: '<DATADOG_SITE>',
  //  service: 'my-web-application',
  //  env: 'production',
  //  version: '1.0.0',
});

```

{% alert level="info" %}
Types are compatible with TypeScript >= 3.8.2. For earlier versions of TypeScript, import JavaScript sources and use global variables to avoid any compilation issues.
{% /alert %}

```
import '@datadog/browser-rum/bundle/datadog-rum'

window.DD_RUM.init({
  ...
})
```

{% /tab %}

{% tab title="CDN async" %}

```
<script>
  window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APP_ID>',
      // `site` refers to the Datadog site parameter of your organization
      // see https://docs.datadoghq.com/getting_started/site/
      site: '<DATADOG_SITE>',
      //  service: 'my-web-application',
      //  env: 'production',
      //  version: '1.0.0',
    });
  })
</script>
```

{% /tab %}

{% tab title="CDN sync" %}

```
<script>
    window.DD_RUM && window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APP_ID>',
      // `site` refers to the Datadog site parameter of your organization
      // see https://docs.datadoghq.com/getting_started/site/
      site: '<DATADOG_SITE>',
      //  service: 'my-web-application',
      //  env: 'production',
      //  version: '1.0.0',

    });
</script>
```

{% /tab %}

#### Configure tracking consent (GDPR compliance){% #configure-tracking-consent--gdpr-compliance %}

To be compliant with GDPR, CCPA, and similar regulations, the Browser SDK lets you provide the [tracking consent value at initialization](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser).

#### Configure Content Security Policy (CSP){% #configure-content-security-policy--csp %}

If you're using the Datadog Content Security Policy (CSP) integration on your site, see [the CSP documentation](https://docs.datadoghq.com/integrations/content_security_policy_logs/) for additional setup steps.

#### Set session sampling rates{% #set-session-sampling-rates %}

To control the data your application sends to Datadog RUM, you can specify a sampling rate for RUM sessions while initializing the Browser SDK. For example, to sample 80% of sessions, set `sessionSampleRate` to 80:

```
datadogRum.init({
  applicationId: '<APP_ID>',
  clientToken: '<CLIENT_TOKEN>',
  site: '<DATADOG_SITE>',
  sessionSampleRate: 80,
  sessionReplaySampleRate: 20,
  // ... other configuration options
});
```

For more information, see [Browser RUM & Session Replay Sampling](https://docs.datadoghq.com/real_user_monitoring/guide/sampling-browser-plans/).

## Start monitoring your application{% #start-monitoring-your-application %}

Now that you've completed the basic setup for RUM, your application is collecting browser errors and you can start monitoring and debugging issues in real-time.

Visualize the [data collected](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/data_collected/) in [dashboards](https://docs.datadoghq.com/real_user_monitoring/platform/dashboards/) or create a search query in the [RUM Explorer](https://app.datadoghq.com/rum/explorer).

Your application appears as pending on the Applications page until Datadog starts receiving data.

## Next steps{% #next-steps %}

See [Advanced Configuration](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/advanced_configuration/).

## Further reading{% #further-reading %}

- [Advanced configuration](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/advanced_configuration/)
- [Setup Session Replay](https://docs.datadoghq.com/session_replay/browser/)
- [Setup Error tracking](https://docs.datadoghq.com/real_user_monitoring/error_tracking/browser/)
- [Correlate RUM Events with Other Telemetry](https://docs.datadoghq.com/real_user_monitoring/correlate_with_other_telemetry/)