--- title: Browser Monitoring Setup description: Understand your options for setting up the RUM Browser SDK. breadcrumbs: >- Docs > RUM & Session Replay > Application Monitoring > RUM Browser Monitoring > Browser Monitoring Setup --- # Browser Monitoring Setup {% callout %} # Important note for users on the following Datadog sites: app.ddog-gov.com, us2.ddog-gov.com {% alert level="danger" %} RUM Auto-Instrumentation is not available for the selected site ({% placeholder "user-datadog-site-name" /%}). Use [Client-Side instrumentation](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client.md) instead. {% /alert %} {% /callout %} ## Overview{% #overview %} The Datadog Browser SDK enables Real User Monitoring (RUM) for your web applications, providing 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. There are three ways to instrument your browser-based web applications with the Browser SDK: - [**Manual client-side setup**](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client.md): Add the SDK to your frontend code using npm or a script tag, then initialize it with your application ID and client token. - [**Agentic Onboarding**](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/agentic_onboarding.md?tab=realusermonitoring): Instrument your frontend applications with one prompt using LLM coding agents such as Cursor or Claude. - [**Auto-Instrumentation**](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/server.md): Inject a RUM SDK JavaScript scriptlet into the HTML responses of your web applications being served through a web server or proxy. ## How to choose the instrumentation type{% #how-to-choose-the-instrumentation-type %} | [Manual client-side setup](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client.md) | [Agentic Onboarding (Preview)](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/agentic_onboarding.md?tab=realusermonitoring) | [Auto-Instrumentation (Preview)](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/server.md) | | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | **SDK setup mechanism** | Manually add the RUM SDK to your application code and manage configurations in code. | Use an AI-guided setup that detects your project's framework and adds the RUM SDK with a single prompt. | Automatically add RUM JS to your web app HTML, then manage configurations in the UI. | | **Code changes required** | Yes | Yes (automated by AI agent) | No | | **Setup complexity** | Medium | Low | Low | | **Supported platforms** | All browser-based applications | Next.js, React, Svelte, Vue, Vanilla JavaScript | Apache, IBM HTTP Server, Java Servlet, NGINX, Windows IIS | | **User groups** | Frontend, mobile engineering, or product teams who work directly in application code | Teams using AI coding agents such as Cursor or Claude Code | SRE and engineering teams without frontend access who need centralized management | 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.md), [Error Tracking](https://docs.datadoghq.com/error_tracking/frontend/browser.md), [Session Replay](https://docs.datadoghq.com/session_replay/browser.md), and [Product Analytics](https://docs.datadoghq.com/product_analytics.md). Select a setup method based on your application stack and workflow: - **Manual client-side setup**: Add the SDK directly to your frontend code when you need full control over initialization and configuration. - **Agentic Onboarding**: Use an AI-assisted workflow to automatically configure and deploy the SDK with minimal manual steps. - **Server-side auto-instrumentation (RUM only)**: Inject the SDK through your web server or proxy when you cannot modify frontend code directly. The Browser SDK supports all modern desktop and mobile browsers. ## Setup{% #setup %} {% collapsible-section %} ### Option 1: Manual client-side setup 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. 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 ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: app.datadoghq.eu ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: ap1.datadoghq.com ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: ap2.datadoghq.com ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: us3.datadoghq.com ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: us5.datadoghq.com ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: app.ddog-gov.com, us2.ddog-gov.com ``` ``` {% /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 ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: app.datadoghq.eu ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: ap1.datadoghq.com ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: ap2.datadoghq.com ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: us3.datadoghq.com ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: us5.datadoghq.com ``` ``` {% /callout %} {% callout %} # Important note for users on the following Datadog sites: app.ddog-gov.com, us2.ddog-gov.com ``` ``` {% /callout %} {% /tab %} 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: '', clientToken: '', // `site` refers to the Datadog site parameter of your organization // see https://docs.datadoghq.com/getting_started/site/ 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" %} ``` ``` {% /tab %} {% tab title="CDN sync" %} ``` ``` {% /tab %} #### Configure tracking consent (GDPR compliance){% #configure-tracking-consent--gdpr-compliance-2 %} 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.md). #### Configure Content Security Policy (CSP){% #configure-content-security-policy--csp-2 %} 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.md) for additional setup steps. {% /collapsible-section %} {% collapsible-section %} ### Option 2: Agentic Onboarding Use the [Agentic Onboarding](https://docs.datadoghq.com/agentic_onboarding/setup.md) page to instrument your browser application using the AI Setup CLI or the Datadog MCP Server. {% /collapsible-section %} {% collapsible-section %} ### Option 3: Server-side auto-instrumentation (RUM only) {% callout %} # Important note for users on the following Datadog sites: app.ddog-gov.com, us2.ddog-gov.com {% alert level="danger" %} RUM Auto-Instrumentation is not available for the selected site ({% placeholder "user-datadog-site-name" /%}). Use [Client-Side instrumentation](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client.md) instead. {% /alert %} {% /callout %} {% alert level="info" %} Server-side auto-instrumentation only supports RUM. For Error Tracking, Session Replay, or Product Analytics, use [manual client-side setup](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client.md). {% /alert %} RUM Auto-Instrumentation allows you to add RUM JS to your web app HTML. It works by injecting the RUM Browser SDK into the HTML responses being served through a web server or proxy. After auto-instrumentation is set up, you can manage configurations from the UI. RUM Auto-Instrumentation requires Datadog Agent version 7.34+. #### Getting started{% #getting-started %} Select a platform to start collecting RUM data on your application: {% alert level="info" %} To request support for a web server that is not listed here, [fill out this form](https://docs.datadoghq.com/private-beta/rum-sdk-auto-injection.md). {% /alert %} #### Limitations{% #limitations %} Server-side auto-instrumentation has the following limitations. If your use case requires more control, use [client-side instrumentation](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client.md) instead. - This instrumentation method **does not support [advanced RUM configurations](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/advanced_configuration.md)**. - If your web server is acting as a proxy and the upstream server uses **end-to-end encryption** (TLS) or **content compression** (gzip, zstd, Brotli), the RUM Browser SDK **cannot be injected**. For proper instrumentation: - **Disable content compression** on the upstream server. - **Enable TLS origination** on the web server. {% /collapsible-section %} ## Start monitoring{% #start-monitoring %} Visualize the [data collected](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/data_collected.md) in [dashboards](https://docs.datadoghq.com/real_user_monitoring/platform/dashboards.md) or create a search query in the [RUM Explorer](https://app.datadoghq.com/rum/list). Your application appears as pending on the Applications page until Datadog starts receiving data. ## Further reading{% #further-reading %} - [RUM Browser Monitoring](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser.md) - [Configure Real User Monitoring (RUM) for JavaScript web applications](https://learn.datadoghq.com/courses/configure-rum-javascript)