Using CDN Script Tags

You may choose to use the CDN URL or self-host the script in your own CDN provider.

Replace the following options with desired values in the snippets provided below:

Option	Description
YOUR_ENVIRONMENT	The environment of your browser application (e.g. production).
YOUR_SERVICE_NAME	The name of your browser application
YOUR_CUSTOMER_ID	Your Observe customer ID
YOUR_OBSERVE_TOKEN	The bearer token you created in the prior steps
distributedTracingOrigins	List of APM instrumented domains to propagate distributed tracing headers

Synchronous / Blocking Mode

Add a <script> tag to load the bundle and use the elasticApm global object to initialize the agent.

<script
  src="https://assets.observeinc.com/dist/bundles/apm-rum.umd.min.js"
  crossorigin
></script>
<script>
  elasticApm.init({
    environment: "<YOUR_ENVIRONMENT>",
    serviceName: "<YOUR_SERVICE_NAME>",
    serverUrlPrefix:
      "?environment=<YOUR_ENVIRONMENT>&serviceName=<YOUR_SERVICE_NAME>",
    serverUrl: "https://<YOUR_CUSTOMER_ID>.collect.observeinc.com/v1/http/rum",
    breakdownMetrics: true,
    distributedTracingOrigins: ["*"],
    distributedTracingHeaderName: "X-Observe-Rum-Id",
    propagateTracestate: true,
    logLevel: "error",
    session: true,
    apiVersion: 2,
    apmRequest({ xhr }) {
      xhr.setRequestHeader("Authorization", "Bearer <YOUR_OBSERVE_TOKEN>");
      return true;
    },
  });
</script>

Asynchronous / Non-Blocking Mode

Loading the script asynchronously ensures the agent script will not block other resources on the page, however, it will still block browsers onload event.

<script>
  (function (d, s, c) {
    var j = d.createElement(s),
      t = d.getElementsByTagName(s)[0];

    j.src = "https://assets.observeinc.com/dist/bundles/apm-rum.umd.min.js";
    j.onload = function () {
      elasticApm.init(c);
    };
    t.parentNode.insertBefore(j, t);
  })(document, "script", {
    environment: "<YOUR_ENVIRONMENT>",
    serviceName: "<YOUR_SERVICE_NAME>",
    serverUrlPrefix:
      "?environment=<YOUR_ENVIRONMENT>&serviceName=<YOUR_SERVICE_NAME>",
    serverUrl: "https://<YOUR_CUSTOMER_ID>.collect.observeinc.com/v1/http/rum",
    breakdownMetrics: true,
    distributedTracingOrigins: ["*"],
    distributedTracingHeaderName: "X-Observe-Rum-Id",
    propagateTracestate: true,
    logLevel: "error",
    session: true,
    apiVersion: 2,
    apmRequest({ xhr }) {
      xhr.setRequestHeader("Authorization", "Bearer <YOUR_OBSERVE_TOKEN>");
      return true;
    },
  });
</script>