To instrument your application for EUM, you will need to configure your JavaScript Agent and insert it into the page that is returned to the end user. This process is known as injection. It is important to complete the injection process completely and accurately in order to see EUM metrics in the Controller and fetch reports.
There are three injection types that you can use depending on your use application type and framework:
- Automatic
- Assisted
- Manual
Some require you to modify the page, while others don’t involve any code changes. You should choose the one supported for your type of application. If you are unsure of which method to use, refer to our guide on choosing an injection method.
Automatic injection
Automatic injection is done in the Controller UI, so you do not need to modify your code at all. If you have a application that is instrumented with our Java/.Net Application Agent, you can go in the APM application's Configuration > User Experience App Integration module and turn on automatic injection. With this method, the server-side app agent manages injecting the code at runtime for you. It is supported only for application pages that are built on Jasper-supported JSP (for Java), ASP.NET, or ASPX (.NET) frameworks. Refer to the full documentation for details: Automatic Injection of the Javascript Agent
Assisted injection
Assisted injection is when your server-side application injects the JavaScript Agent into your browser application and it has two variants. One variant, attribute injection, requires direct copying of the code snippets into your page template. The other variant, injection rules, does not require any direct code changes since your agent will do that based on your injection rules. Refer to the full documentation for details: Assisted Injection
Manual injection
This is supported on all platforms and frameworks and requires the JavaScript Agent to be configured in your application pages directly, which are hosted on your application server. Refer to the full documentation for details: Manual Injection of the Javascript Agent
This is relatively straightforward method in which you need to put the below config code at the start of <head> tag. Make sure that the adrum script is the first one after <head> tag in case you have multiple script tags in your code. Additionally it’s also important that you add the adrum script after any <meta> tags if they exist in your code or this might break page functionality.
<script>
window['adrum-start-time'] = new Date().getTime();
(function(config){
config.appKey = 'YOUR APP KEY';
config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
config.beaconUrlHttp = 'http://col.eum-appdynamics.com';
config.beaconUrlHttps = 'https://col.eum-appdynamics.com';
config.xd = {enable : false};
})(window['adrum-config'] || (window['adrum-config'] = {}));
</script>
<script src='https://cdn.appdynamics.com/adrum/adrum-latest.js'></script>
If you want to host the 'https://cdn.appdynamics.com/adrum/adrum-latest.js' please download and replace the path in the last <script> tag accordingly.
Additional Resources
You can also find these related links useful for understanding this entire concept:
Injection problems
How to configure the JavaScript Agent
Injection using Nginx
Injection using Apache
How do add custom user data via automatic injection
How to inject the 4.3+ EUM Javascript Agent using an F5 iRule
