User experience - web application settings

The Web applications section of the System Profile - User Experience define how user experience in web applications is evaluated. See JavaScript Agent for more information on how AppMon UEM works on websites.

Agent injection

Setting Description
Injected JavaScript agent version The setting lets you specify the latest delivered JavaScript Agent, or use a specific version. This setting lets you update AppMon without having to immediately change your target websites' included libraries.

The delivered version depends on the connected agent. The latest possible JavaScript Agent version is the version of the connected agent, even if a higher one is configured. This ensures compatibility to the web server agents.
Load the JavaScript agent asynchronously Choose this setting to append the defer attribute of the JavaScript Agent script tag. In this case downloading the agent does not block the page from loading.

Asynchronously loading decreases the agent's ability to capture content and hook into libraries. You can improve the amount of captured data if the agent is still the first script to be executed on the page and defer all other scripts, especially Ajax libraries or scripts that use XMLHttpRequests.

Ajax (XHR) detection

Use Ajax (XHR) detection to select modules for capturing actions of different JavaScript frameworks that use XMLHttpRequest to perform requests.

Basic XHR Detection is a generic wrapper for all requests performed with XMLHttpRequest. Selecting this module captures the Internet Explorer ActiveXObject. Because it has more overhead than specific framework wrappers, using the specific wrappers whenever possible is recommended.

Some modules for specific frameworks require modifying the framework js file. This is necessary to trigger framework instrumentation directly after the framework is loaded.

Manual XHR Framework Instrumentation contains a selection of the various code snippets to use.

Additional packs

This list contains settings for capturing additional information:

Setting Description
JavaScript Errors Captures JavaScript errors.

For AppMon 6.3 and later, you can disable capturing. Stack traces are captured when enabled.
Perceived render time This module calculates the perceived render time. This is the time it takes for all visible images to completely load, depending on the browser window size. When activated, perceived render time is calculated for each user action. See Perceived Render Time for more information.
Streaming Captures information about HTML5 video and audio tags embedded into a webpage. Manual instrumentation is required for videos in Flash or Silverlight.
Timed action support XHRs are often sent using setTimeout by JavaScript frameworks. Select this check box to detect actions that trigger XHRs.
User Timings Captures timings measured by the browser's performance.mark and performance.measure calls.
Visually Complete Enables support for both the visually complete metric and the speed index metric. This setting is enabled by default in newly created system profiles.

A page is visually complete when all the visual components have been rendered. It is the time when a user considers that the page is ready to interact with. It doesn't consider, for example, any Ajax request that could be going on behind the page. Visually complete can be captured for page load and for Ajax actions. See Visually Complete metric or the video on optimizing user experience for more information.

The speed index is the average time at which visible parts of the page are displayed. It is useful for comparing the user experience of various pages. The lower the number, the better the user experience of the page. Speed index is only available for page load actions.

W3C Resource Timings

Use the W3C Resource Timings section to enable detailed resource information capturing, and to capture all or a percentage of visits details to produce a resource waterfall chart for PurePaths using every page load action. Use waterfall and captured W3C resource timing data to help optimize the performance of your web application. Waterfall charting appears on the User Action PurePaths dashboard. See Web Performance Optimization for UEM and W3C Resource Timing Metrics for more information.

Setting Description
Capture Resource Information With UEM support enabled, the JavaScript Agent captures summary information on content embedded within a page. Resource summary information is available for the following:
  • First party: Any resource loaded from the application domain are assigned to the first party category.
  • CDN: New system profiles have a list of preconfigured CDN domains. Resources from these domains are assigned to the CDN category.
  • Third party: Any resources from other domains are categorized as third party.
See the W3C Resource Timings section in Third-Party Content Analysis for more information.
Resource Summary Configuration You can limit or extend the number of resources the JavaScript Agent captures for those actions that do not have full reports generated for them. Click Resource Summary Configuration in the W3C Resource Timings section to configure settings. These settings let you configure capture details on your slowest third party resources for each specified domain, and specify the slowest domains that are to report details back to the server. See Resource Summary Configuration for more information.
Domain Mapping See CDN Content Analysis for more information on mapping domains.
Number of visits sending all details (waterfall) You can also configure the JavaScript Agent to capture all details to produce a resource waterfall chart for every page load action. Set the percentage of visits that should deliver the full resource waterfall. For example, setting this to 10% sends all details for every 10th visit.

See the section Seeing full waterfall details in Web Performance Optimization for UEM for more information.

Note

Capturing resource information may cause overhead, especially on browsers that do not support the Resource Timing API.

Bandwidth calculation

This enables bandwidth-detection in the JavaScript Agent. For information on bandwidth calculation, see User Experience Management - Bandwidth.

Setting Description
Calculate Bandwidth and refresh every Interval at which the bandwidth calculation repeats for a visit. The smaller the value the more accurate the bandwidth if it changes regularly. However, this also produces more overhead.

For proper calculation, you also need to enable capture of web request/response sizes. See UEM FAQ for detailed info.
Enable bandwidth calculation on mobile browsers Enables bandwidth calculation for mobile devices. Bandwidth calculation needs to download extra data. This overhead is often undesired on mobile devices. The option is only available if bandwidth calculation is enabled.

Version

Specifying your web application version number sets it for each visit's default value. Setting this value in the JavaScript ADK overrides this setting, and also lets it be retrieved using a measure. Click in the Edit button for the Retrieve the app version with field to specify a measure using the Select Measures dialog box.

Metadata capturing

Use the metadata sensor to capture CSS selectors, meta tags and global JavaScript variable values. The JavaScript Agent attempts to capture all configured values immediately before sending a user action, and attaches all available values to the user action. Once captured, you can subscribe measures using this metadata for visit tagging, application version, visit conversion, and other purposes.

Sample HTML page from which the previous items were taken and the data is captured
Sample HTML page from which the previous items were taken and the data is captured

With capturing enabled, you can grab any number of values for these types. The captured string truncates if longer than 100 characters. To configure capture:

  1. Select the type of the metadata.
  2. Specify an ID for it. You can then use this ID for Measures and Business Transactions.
  3. Specify a capture expression (identifier) by which the value is retrieved:
  • Meta Tag Names:
    • Get the content attribute of the specified meta tag name.
  • CSS Selectors:
    • Specify a tested (with querySelector) CSS selector. JavaScript's querySelector captures the value, so only browsers that support querySelector report this. When testing this with querySelector, you may need to escape or modify some characters to work properly, such as double quotes being changed to single quotes.
    • In addition to using a CSS selector to locate a particular element, you can also retrieve an element attribute value. To do so, add @ followed by the attribute name. The innerText or textContent of the element is retrieved if no attribute is specified.
    • If the CSS selector query results in multiple elements, only the first element is captured.
  • JavaScript variables:
    • Provide a globally available JavaScript variable name.
    • The variable must use dot notation for any Object property reference, for example someObject.property and not someObject[property]. Use brackets only when capturing Array values, such as 'someArray[2]'.

Captured values appear as Metadata Details when you hover over a user action PurePath root node or select Details from its context menu.

Advanced configuration

Capturing restrictions section

Setting Description
IP restrictions You can configure ranges of IP addresses to exclude or include from User Experience Management. For example, if you want to exclude all visits of your web site from the local network you can add the network mask of your local network to the list of excluded addresses.
Browsers restrictions Include or exclude certain browsers and/or versions.

Location settings

Setting Description
Agent location The path used when injecting the JavaScript Agent into your HTML code. For example, if you enter /myapp/ in Agent location field and leave the default JavaScript Agent Name (dtagent) in the Global Settings tab, then the code injected into your HTML code looks something like this:
<script type="text/javascript" src="/<myapp/> dtagent620_b_1239.js"></script>

You can use this option to ensure that the client requests the JavaScript Agent from a URI where it reaches an instrumented server.
Monitor request path The URI that the JavaScript Agent uses to report gathered performance data back to AppMon using XMLHTTPRequests.
The Monitor Request Name defined in the Global Settings tab (by default /dynaTraceMonitor) is appended to this path name by the JavaScript Agent. This should be a path that reaches an instrumented server. Requests to this path are intercepted by the Agent and forwarded to the AppMon Server. When you set the monitor request path, the signal is directed to an explicit location. This is useful when you use load balancers, which can only handle dedicated URLs.

For example, the page:
https://www.dynatrace.com/support/doc/appmon/administration
loads the Agent from the following URLs for the different configurations:
  • <empty>: https://www.dynatrace.com/support/doc/appmon/dynaTraceMonitor
  • "dynatrace": https://www.dynatrace.com/support/doc/appmon/dynatrace/dynaTraceMonitor
  • "/dynatrace": https://www.dynatrace.com/dynatrace/dynaTraceMonitor
  • "https://dynatrace.com:8020/dynatrace": https://dynatrace.com:8020/dynatrace/dynaTraceMonitor
Domain for AppMon cookies Overrides on which domain the AppMon cookies dtCookie, dtPC, and dtLatC should be set.

Note

The agent might not use cookies correctly if this setting is not configured properly. This can result in single-action visits and similar behavior.
Add the Secure attribute to the AppMon session cookie Useful for web sites that employ the HTTPS protocol for secure communications, this setting marks the AppMon session cookie dtCookie with the W3C-standard Secure attribute. This attribute instructs the web browser to only send the cookie over a secure connection.
Send AppMon monitoring request to foreign domain The Same Origin Policy only allows XHRs that are sent to the same server delivering the web page itself, but UEMaaS requires a Web Server Agent to send the monitor signal to a different server.

To resolve this, modern browsers (IE 8 and later, Chrome 4 and later, FireFox 3.5 and later, Safari 4 and later, Opera 12 and later) support CORS, which lets the web server decide whether it allows content to be delivered to a 3rd party site. Enable this here.

Action Naming

Setting Description
Include the Anchor as part of the URI when determining an action name Select this check box to include the Anchor as part of the URI when determining an action name.

Manual Injection

If you can not use automatic JavaScript Agent injection, for example because it is not supported for your web or application server, you can inject a JavaScript snippet that automatically loads and injects the JavaScript Agent and keeps configuration up-to-date.

Use the AppMon REST API to retrieve the snippet for your application and inject it as the first script into your page. The API is designed to be used during the build process of a web application and provides vital functionality the agent needs to instrument a website. It is not recommended to request the snippet directly using a script tag, since this would unnecessarily decrease load times and require user privileges and direct access to the AppMon server. The API call looks like this:

https://<Dynatraceserver>:8021/api/v1/profiles/<systemprofile>/applications/<application>/javascriptagent/initcode