The Browser Real User Monitoring (Browser RUM) module allows you to monitor how your web application is performing from the end-user perspective. You can drill into real data to explore how users experience your application in their web browsers by sending data from the JavaScript Agent. With Browser RUM you can follow your users, while optimizing their experience in real-time. 

This document contains references to third-party documentation. Cisco AppDynamics does not own any rights and assumes no responsibility for the accuracy or completeness of such third-party documentation.

Onboard Browser Real User Monitoring Applications 

  1. From the Platform Home page click Cisco Digital Experience Monitoring.
  2. From the Configure left-navigation, click Browser Applications. 
  3. Click Create. 
  4. Define the application by adding: 

    1. Application name. 

    2. (Optional) If you are subscribed to the Session replay feature, you can capture user sessions for replay. See Session Replay Module. 

  5. Use the agent hosted in the Content Delivery Network (CDN), or download the agent and ensure that it is available on your servers.
  6. Click Save and continue.

  7. Copy the example code command and paste it in the <head> tag of the HTML page that you want to instrument. 
    The <YOUR-TENANT-NAME> is auto-filled with your     value. Your code snippet can vary depending on your version, application name, and tenant name. 

    <script>
	window.adrum||(function(d) {
		var o=adrum=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
		var c=d.createElement('script');o.api=[];c.async=true;c.type='text/javascript';
		c.crossOrigin='anonymous';c.src='https://cdn.appdynamics.com/adrum-otel/latest/adrum.js';h.appendChild(c);
	})(document);
	adrum('init', {
		appName: "<YOUR-APP-NAME>",
		url: "https://<YOUR-TENANT-NAME>",
	});
</script>
    CODE
  8. Click Done. 

Set Up Health Rules and Alerting 

On the Health and Alerting panel, you can create new health rules, or view details on existing health rules that have been created. There are default health rules that are turned on for Base Pages, Virtual Pages on End User Response Time (EURT), Web Vitals, Ajax, and Iframes. See Browser Real User Monitoring Metrics for information on Web Vitals. You have the option to modify and turn-on default health rules. See Create Health Rules to Monitor Entities or Group of Entities. 

It's recommended that you review default health rules to ensure that they meet your needs. You can adjust health rule thresholds to suit the needs of your organization. 

Critical and Warning Conditions

Conditions are classified as either critical or warning conditions. Critical conditions are evaluated before warning conditions. If you have defined a critical condition and a warning condition in the same health rule, the warning condition is evaluated only if the critical condition is not true. The configuration procedures for critical and warning conditions are identical, but you configure these two types of conditions in separate panels.

You can copy a critical condition configuration to a warning configuration and vice-versa and then adjust the metrics in the copy to differentiate them. For example, in the Critical Condition panel you can create a critical condition based on the rule:

  • If the Request Count is greater than 40

Then from the Warning Condition panel, copy that condition and edit it to be:

  • If the Request Count is greater than 35

As performance changes, a health rule violation can be upgraded from warning to critical if performance deteriorates to the higher threshold or downgrades from critical to warning if performance improves to the warning threshold. See Health Rule Evaluation Conditions. 

Health Roll Up

You can aggregate (rollup) the health of the entities to define the health of a group of entities. This means a child entity can define the health of a parent entity by rollup relationship. You can define the health rollup relationship between the entities and the parents. By default, when a page is unhealthy, the application that the page belongs to will not be unhealthy; unless its own health rule is violated. 

View Relationships Panel

This section covers navigation through the Browser RUM module. When you click an entity symbol on Observe and the screen refreshes, Relationships displays. The relationships between all objects of the entity type you selected on Observe and all other related entities displays in list views. If you select an object from a list view, Relationships depicts the relationships between that object and all other related entities which displays in the detail view. See Relationships Panel. 

You can view the following entities on the Relationships panel: 

Entity List View Detail View 
Browser Applications

The Browser Applications page provides these details: 

  • Platform 
  • Total Requests 
  • Requests per minute 
  • End User Response Time (milliseconds)

When you click on a specific Browser Application, you can view: 

  • Health Violations 
  • Requests per minute  

  • End User Response Time Distribution: this allows you to toggle to VCT distribution. 

    You can use the Show trend option to analyze the End User Response Time (EURT), or Visually Complete Time (VCT). The default primary metric is set to EURT, but you can choose VCT. 

  • Web Vitals: this displays the proportion of page load that has Web Vital Scores: Good, Needs Improvements, or Poor. This shows the 75th percentile value of each web vital. See Visualize Web Vitals and EURT Component Timing.

Pages 

Using Pages allows you to toggle between Base Pages, or Virtual Pages. In this section, you can view:

  • Page Name 
  • Page Type
  • Number of requests 
  • End User Response Time (milliseconds)
  • Visually Complete Time (milliseconds)
  • LCP: Largest Contentful Paint  (milliseconds)
  • CLS: Cumulative Layout Shift (milliseconds) 
  • FID: First Input Delay (milliseconds)

When you click on a specific Page, you can view:

  • Base Pages: 

    • Health Violations 
    • Request per minute 

    • End User Response Time Distribution (milliseconds)

      You can use the Show trend option to analyze the End User Response Time (EURT), or Visually Complete Time (VCT). The default primary metric is set to EURT, but you can choose VCT. 

  • End User Response Time (EURT) Component Timing: this shows the breakdown of EURT with metrics such as First Byte Time, Front End Time, Server Connection Time. This also provides an option to view the trend of those metrics. See Visualize Web Vitals and EURT Component Timing.
  • Web Vitals: this displays the proportion of page load that has Web Vital Scores: Good, Needs Improvements, or Poor. This shows the 75th percentile value of each web vital.
  • Ajax Calls: this displays the list of calls, and associated metrics invoked by the page. 

Iframes 

The Iframes page provides these details:

  • Name 
  • Requests
  • Requests per minute   
  • End User Response Time (milliseconds)
  • Document Object Model (DOM) Ready Time (milliseconds)
  • First Byte Time (milliseconds)

Using Iframes provides a summary of key performance indicators, which include: 

  • Health Violations 
  • Requests per minute 
  • End User Response Time Distribution 
  • End User Response Time (EURT) Component Timing: this shows the breakdown of EURT with metrics such as First Byte Time, Front End Time, and Server Connection Time. This also provides an option to view the trend of those metrics. See Visualize Web Vitals and EURT Component Timing.
  • Ajax Calls: this shows the list of calls that were requested by the Iframe. 

Ajax

The Ajax page provides these details: 

  • Requests
  • Requests per minute   
  • End User Response Time (milliseconds)
  • First Byte Time (milliseconds)
  • Response Download Time (milliseconds)
  • Callback Execution Time (milliseconds)

When you click on a specific Ajax, you can view:

  • Health Violations
  • Requests per minute   
  • End User Response Time Distribution
  • End User Response Time: this shows the breakdown view with of FBT, Ajax Response Download Time, and Ajax Callback Execution Time.
  • Ajax Request Errors 

Visualize Core Web Vitals and EURT Component Timing

Google Core Web Vitals is a set of metrics that measure the real-world user experience for loading performance, interactivity, and visual stability of the page. In Browser Real User Monitoring, Web Vitals include the following metrics:

  • Largest Contentful Paint (LCP). 
  • First input Delay (FID). 
  • Cumulative Layout Shift (CLS). 

Google refers to Core Web Vitals as one of the signals to rank the webpages so you may require to maintain a healthy metrics for your website that improves the SEO ranking and drives user traffic. For more information, see Core Web Vitals.

The following graphs visualize Web Vitals, and EURT Component Timing in Browser Real User Monitoring.
To see the Web Vitals graph:

  • Go to Browser Applications, and click on a specific application.
    or
  • Go to Pages, and click on a specific page name.

To see the EURT Component Timings graph:

  • Go to Pages, and click on a specific page name.
    or
  • Go to Iframes, and click on a specific Iframe name.

Filter View 

You can use filters to refine your view to display only the entities and data you are interested in. You can filter by:

  • Attributes (all lists except Observe List)
  • Entity Status 
  • Entity Type (Observe List only)
  • Health
  • Tags 

See Filters and Explore Any Data. 

Group View 

From the Observe and list views, you can use grouping to display only the data you are interested in, by groups. This provides the ability to group using Group View or shortcuts.

To group your entities by tags:

  1. From Observe, click on an entity. 
  2. Click on the group view statement bar that is denoted by Add Group.
    You can select the populated suggestions or if you begin to type, the autocomplete feature will populate suggestions. To add multiple (up to two) tags, separate by adding a comma. If you attempt to add three or more tags, Apply will turn gray. 
  3. Once you complete your group view statement, click Apply.
    To remove grouping, highlight the group view statement and delete or clear the field.

See Grouping. 

References 

To view the latest versions, see the Cisco AppDynamics Directory.