You must inject the JavaScript Agent for Browser RUM into every page that you want to monitor.

Verify Injection

View the source of your web page. When automatic or assisted injection is used, you should see the script for the JavaScript Agent inline in the web page. When manual injection is used, you will see:

<script src="/path_to_adrum.js"/>

If you used manual injection, use the normal procedures that you use to verify other types of code changes in your web pages. Keep in mind that various caches, such as the server page, CDN or browser caches, can prevent the page from actually being reloaded. If you cannot get manual injection to work, try one of the other injection schemes if they are available for your platform. See Inject the JavaScript Agent for information about the various injection strategies.

Verify Automatic Injection is Enabled

To verify that automatic injection is enabled:

  1. Open the business application that is injecting the JavaScript Agent.
  2. Click Configuration > User Experience App Integration > JavaScript Agent Injection.
  3. From Inject the JavaScript Agent configured for this Browser App, confirm that your browser app receiving the automatic injection is selected.
  4. Select the Automatic Injection tab.
  5. Confirm that the Enable Automatic Injection of JavaScript checkbox is checked.
  6. Verify that automatic injection is enabled for all of the business transactions that you want to monitor. If some of those business transactions are in the Automatic injection possible, but not enabled list, move them to the Automatic injection enabled list. If the business transaction that you want to monitor does not appear in either list, automatic injection is not possible for that business transaction.
  7. Click Save if you made any changes.

See Automatic Injection of the JavaScript Agent for information about creating and enabling injection rules.

Verify Assisted Injection is Enabled

To verify that assisted attribute injection is enabled:

  1. Open the business application that is injecting the JavaScript Agent.
  2. Click Configuration > User Experience App Integration > JavaScript Agent Injection.
  3. From Inject the JavaScript Agent configured for this Browser App, confirm that your browser app receiving the automatic injection is selected.
  4. Select the Configure JavaScript Injection tab.
  5. Confirm that the Request Attribute Injection is checked.
  6. Click Save if you made any changes.

To verify that assisted injection using injection rules is enabled:

  1. Open the business application that is injecting the JavaScript Agent.
  2. Click Configuration > User Experience App Integration > JavaScript Agent Injection.
  3. From Inject the JavaScript Agent configured for this Browser App, confirm that your browser app receiving the automatic injection is selected.
  4. Select the Configure JavaScript Injection tab.
  5. Confirm that there are enabled injection rules in the table under Create Injection Rules. 
  6. From the Where to Inject JavaScript tab, confirm that the rules are correct.
  7. From the Inject for these Business Transactions tab, confirm that the rules are applied for the desired business transactions.
  8. Click Save if you made any changes.

See Assisted Injection for information about creating and enabling injection rules.

Change Your Injection Strategy

If you try one way to inject the JavaScript Agent and it does not work, it is best to undo the current injection configuration before implementing another one.

  • To undo automatic injection, clear the Enable Automatic Injection of JavaScript check box.
  • To undo assisted injection using attribute injection, clear the Request Attribute Injection check box, and manually delete the code snippets.
  • To undo manual injection, manually delete the JavaScript Agent code from your web pages.
  • To undo assisted injection using injection rules, clear the Enable check box for each injection rule in the injection rules list.

If multiple copies of the agent exist on a page, the second copy does not execute.

Fix Page Rendering Issues

The rendering of pages in some browsers, in particular, Internet Explorer (IE), may be adversely affected by the JavaScript Agent injection. 

After you have confirmed that the JavaScript Agent injection is causing the issue, try the following:

  1. Inject the JavaScript Agent after the last <meta> element.
  2. Inject the JavaScript Agent just before the closing <head> element.

If you are using automatic injection, see Troubleshoot Automatic Injection.

Injecting the JavaScript Agent just before the closing <head> tag is not the recommended practice because the JavaScript Agent will not capture the resource timing metrics for resources loaded before it. Thus, only do this as a last resort.

Inject After Last Meta Element

To avoid rendering issues and capture resource timing metrics, you are recommended to inject the JavaScript injection right after the last <meta> element in the <head> as shown below.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Fancy Web Page">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  // Injection of the JavaScript Agent after the last <meta> tag
  <script charset='UTF-8'>
    window['adrum-start-time'] = new Date().getTime();
    (function(config){
      config.appKey = 'SH-AAB-AAC-XAR';
      config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
      config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
      config.beaconUrlHttp = 'http://eum-col.appdynamics.com';
      config.beaconUrlHttps = 'https://eum-col.appdynamics.com';
      config.xd = {enable : false};
    })(window['adrum-config'] || (window['adrum-config'] = {}));
  </script>
  <script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'/>
  // The rest of the JS and CSS files
  <script src="https://code.jquery.com/jquery-<version>.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script src="js/custom-script.js"></script>
  <link type="text/css" rel="stylesheet" href="css/custom-style.css" />
  ...
</head>
XML

Inject Before the Closing Head Element

On rare occasions, some browsers, in particular, Internet Explorer (IE), will still render the page incorrectly because of where the JavaScript Agent is injected. In such cases, as a last resort, try injecting the JavaScript Agent right before the closing <head> element:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Fancy Web Page">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-<version>.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script src="js/custom-script.js"></script>
  <link type="text/css" rel="stylesheet" href="css/custom-style.css" />
  ...
  // Injection of the JavaScript Agent before the closing <head> tag
  <script charset='UTF-8'>
    window['adrum-start-time'] = new Date().getTime();
    (function(config){
      config.appKey = 'SH-AAB-AAC-XAR';
      config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
      config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
      config.beaconUrlHttp = 'http://eum-col.appdynamics.com';
      config.beaconUrlHttps = 'https://eum-col.appdynamics.com';
      config.xd = {enable : false};
    })(window['adrum-config'] || (window['adrum-config'] = {}));
  </script>
  <script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'/>
</head>
XML


Troubleshoot Automatic Injection Issues 

If you are using the .NET Agent to automatically inject the JavaScript Agent into pages and the pages are not rendering correctly:

  1. Use manual injection and make sure that the JavaScript Agent is injected after the last <meta> element. 
  2. If you cannot use manual injection, add the registered node property eum-header-beforeendofheadtag to a Web tier or particular nodes. This node property configures the .NET Agent in the specified tier or nodes to inject the JavaScript Agent right before the closing <head> tag.