Configuration du suivi du navigateur côté client

Aperçu

Le Datadog Browser SDK permet la surveillance des utilisateurs réels (RUM) pour vos applications web, offrant une visibilité complète sur l'expérience utilisateur et la performance de l'application. Avec RUM, vous pouvez surveiller les temps de chargement des pages, les interactions des utilisateurs, le chargement des ressources et les erreurs d'application en temps réel.

RUM vous aide à :

  • Surveiller l'expérience utilisateur avec des métriques de performance détaillées pour les chargements de pages, les actions des utilisateurs et les requêtes de ressources
  • Suivre les parcours des utilisateurs à travers votre application avec les capacités de Relecture de Session
  • Identifier les goulets d'étranglement de performance et corréler la performance frontend et backend avec les traces APM

Le Browser SDK prend en charge tous les navigateurs modernes de bureau et mobiles et fournit une collecte automatique des métriques de performance clés, des interactions des utilisateurs et des erreurs d'application. Après la configuration, vous pouvez gérer vos configurations RUM par application dans Datadog et visualiser les données collectées dans des tableaux de bord et l'Explorateur RUM.

This page describes how to instrument your web applications with the Datadog Browser SDK. The Browser SDK supports Real User Monitoring (RUM), Error Tracking, Session Replay, and Product Analytics.

The Browser SDK supports all modern desktop and mobile browsers.

Setup

Choose your setup method:

  • Server-side auto-instrumentation: Automatically inject the RUM SDK into HTML responses through your web server or proxy.
  • Agentic Onboarding (in Preview): 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.

Manual client-side setup

Create the application in the UI

  1. In Datadog, navigate to Digital Experience > Add an Application and select the JavaScript (JS) application type.
  2. 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.

    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 to your package.json file, for example if you use npm cli:

    npm install --save @datadog/browser-rum

    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.

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/eu/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/ap1/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/ap2/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us3/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us5/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum-v7.js','DD_RUM')
</script>

    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.

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

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

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

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

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

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

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

    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.

      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',
});

      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.

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

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

      <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>

      <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>

      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.

      Configure Content Security Policy (CSP)

      If you're using the Datadog Content Security Policy (CSP) integration on your site, see the CSP documentation for additional setup steps.

      Définir les taux d'échantillonnage de session

      Pour contrôler les données que votre application envoie à Datadog RUM, vous pouvez spécifier un taux d'échantillonnage pour les sessions RUM lors de l'initialisation du Browser SDK. Par exemple, pour échantillonner 80 % des sessions, définissez sessionSampleRate à 80 :

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

      Pour plus d'informations, consultez Échantillonnage RUM du Navigateur et Relecture de Session.

      Commencez à surveiller votre application

      Maintenant que vous avez terminé la configuration de base pour RUM, votre application collecte les erreurs du navigateur et vous pouvez commencer à surveiller et à déboguer les problèmes en temps réel.

      Visualisez les données collectées dans des tableaux de bord ou créez une requête de recherche dans le RUM Explorer.

      Votre application apparaît comme en attente sur la page des Applications jusqu'à ce que Datadog commence à recevoir des données.

      Prochaines étapes

      Voir Configuration avancée.

      Further reading

      Documentation, liens et articles supplémentaires utiles: