Deploy the APM Browser Agent With Your Application

You can deploy the APM browser agent by inserting a JavaScript in all your application pages and allow Application Performance Monitoring to report on real user experience.

Note

The details of where and how to insert the JavaScript are specific to the monitored application.

To insert the JavaScript:

  1. Edit the HTML source of monitored application pages.
    Note

    For packaged web applications there is typically a page template used for all pages belonging to the web application.
  2. Specify values for the following properties and insert the script after the closing </head> tag. Ensure that you do not add the code within another <script> tag:
    • window.apmrum.serviceName: Specify a name for the service. If you do not specify the service name, the default service name, APM Browser, is assigned. It's recommended that you specify a service name to be able to filter by service and monitor the corresponding spans.
    • window.apmrum.webApplication: Specify a name for the web application, which can be used to classify functional areas of deployment. If no value for webApplication is specified, the default value "Default WebApp" will be used.
    • window.apmrum.ociDataUploadEndpoint: Specify the Data Upload Endpoint which determines the data center and domain to which RUM data will be uploaded. The Data Upload Endpoint value can be obtained doing the following:
      • Go to the OCI Console, navigate to Observability & Management > Application Performance Management > Administration and select the desired domain.
      • Click Copy next to Data Upload Endpoint to copy the value into your clipboard and use it to set the value of window.apmrum.ociDataUploadEndpoint.
    • window.apmrum.OracleAPMPublicDataKey: Specify the public dataKey that is generated when the APM domain is created. The public dataKey can be obtained doing the following:
      • Go to the OCI Console, navigate to Observability & Management > Application Performance Management > Administration and select the desired Compartment and Domain.
      • Click on Data Keys under Resources. If no data key exists then click on Generate Data Key and select Public Data Key.
      • Click on Copy which it's next to a data key of type 'Public' to retrieve the value to be used to populate the value of window.apmrum.OracleAPMPublicDataKey.

    To optimize performance for users of the monitored application, the location of a JavaScript library has to be specified, and you must ensure that the JavaScript library is accessible in your network.

    The script looks like the following:

    <script>
    window.apmrum = (window.apmrum || {}); 
    window.apmrum.serviceName='<APM Browser>';
    window.apmrum.webApplication='<Web App Name>';
    window.apmrum.ociDataUploadEndpoint='<ociDataUploadEndpoint>';
    window.apmrum.OracleAPMPublicDataKey='<APM_Public_Datakey>';
    </script>
    <script async crossorigin="anonymous" src="<ociDataUploadEndpoint>/static/jslib/apmrum.min.js"></script>
    Where:
    • <APM Browser> is the service name value that you specify for your APM Browser agent. If you don't set a value, the default service name APM Browser is assigned.
    • <Web App Name> is the web application name value.
    • <ociDataUploadEndpoint> is the Data Upload Endpoint value. It can be obtained from the APM Administration page.
    • <APM Public Datakey> is the APM Public Datakey value that can be obtained from the Administration menu in the APM main page.

    For example, if the Data Upload Endpoint value is aaaac5d2kke6waaaaaaaaaaala.apm-agt.us-ashburn-1.oci.oraclecloud.com and the APM Public Datakey value is IMWJ5UN2C6YOLQSUZ5Q7IGN3QACF4AZD, the script will look like the following:

    <script>
    window.apmrum = (window.apmrum || {});
    window.apmrum.serviceName='Apm Browser1';
    window.apmrum.webApplication='Webapp';
    window.apmrum.ociDataUploadEndpoint='https://aaaac5d2kke6waaaaaaaaaaala.apm-agt.us-ashburn-1.oci.oraclecloud.com';
    window.apmrum.OracleAPMPublicDataKey='IMWJ5UN2C6YOLQSUZ5Q7IGN3QACF4AZD';
    </script>
    <script async crossorigin="anonymous" src="https://aaaac5d2kke6waaaaaaaaaaala.apm-agt.us-ashburn-1.oci.oraclecloud.com/static/jslib/apmrum.min.js"></script>

For more information on public DataKey and DataUploadEndpoint, see Obtain Data Upload Endpoint and Data Keys.