Real User Monitoring (RUM) Tag Installation Guide

Overview 

This document guides through the process and associated steps for inserting Real User Monitoring (RUM) tags inside an application to start capturing important webpage data for identifying anomalies and latencies in user facing application(s). 

How Real User Monitoring Works 

  • It has mainly two components – RUM Tag and Cavisson’s appliance to process the data sent by tags.
  • When user browses an application (for example. www.example.com), a bootstrap code is loaded along with main application.
  • The bootstrap code loads the RUM tag and the configuration file.
  • The tag collects the data from browser and send that to the NV Server.
  • Cavisson’s appliance processes the data and uploads it to the Database.

Prerequisites

  1. A host name is required that is used to call the RUM tag.
  2. Corresponding to that hostname, an SSL certificate is required to capture HTTPS traffic.
  3. In case, only default ports are enabled on firewall, we need two IPs that are assigned to the GUI and appliance.

RUM Tag (nv_bootstrap.js)

  • This small piece of JS code loads the complete RUM tag and configuration file.
  • To monitor a web application, each page should have this bootstrap file (or code).

Where to Add RUM Tag

  • RUM tag should be on each page of the application. We can keep this JS Code in header file (which is common for all the pages).
  • It is recommended to keep this piece of code in such a place so it can be executed before first Onload event. (Better to keep in HEAD tag.)
  • It is recommended to add this tag using a tag manager (for example, Ensighten tag manager). That will have control to remove/add Tag dynamically.

How to Add RUM Tag  

There are two methods to add the RUM tag. 

  1. Add the content of nv_bootstrap
  2. Add a script tag, having src to nv_bootstrap

Method – 1: Add the Content of nv_bootstrap

It is recommended to add content of nv_bootstrap in the application. This allows reducing one Http Request (for nv_bootstrap).

(function(){

  var dom,doc,where,iframe = document.createElement(‘iframe’);   iframe.src = “javascript:false”;

  (iframe.frameElement || iframe).style.cssText = “width:0;height:0;border:0;display:none;”;   if(document.body){

    where = document.body.getElementsByTagName(‘script’)[0];     document.body.appendChild(iframe, where);

  } else {

    where = document.getElementsByTagName(‘script’)[0];     where.parentNode.insertBefore(iframe, where);

  }    try {

    doc = iframe.contentWindow.document;

  } catch(e) {

    dom = document.domain;

    iframe.src=”javascript:var d=document.open();d.domain='”+dom+”‘;void(0);”;     doc = iframe.contentWindow.document;

  }   function getVersion() {

    //query for script like nv_bootstrap.     var s = null;

    if(document.querySelector) {  s =

document.querySelector(‘[src*=”nv_bootstrap”]’);}     if(!s) {

      s = document.getElementsByTagName(‘script’);       for(var z = 0; z < s.length; z++)

      {

        if(s[z].src && s[z].src.indexOf(‘nv_bootstrap’) >= 0) {           s = s[z]; break;

        }

      }     }

    if(s && s.src && s.src.indexOf(‘?’) > 0)

    {

      var v = s.src.substr(s.src.indexOf(‘?’)+1);       return v;

    }

 return null; 

  }

doc.open()._l = function() {

    var js = this.createElement(“script”);     if(dom) this.domain = dom;

var src = ‘//mon1.example.com/nv/example/cav_nv.js?v=REL20170123’;

    js.id = “boomr-if-as”;     js.async = true;

    //check if version given then set that globally and add that version in each request.     var v = getVersion();     if(v) {

      src = src + “?v=” +  v;

      window.top.__nv_agent_version = v;

    }

    // src should be set only once, otherwise ie makes request each time src is set     js.src = src;

    this.body.appendChild(js);

  };

  doc.write(‘<body onload=”document._l();”>’);   doc.close();

  })(); 

Note: Highlighted URL has to be change for each setup. it is recommended to add release/build version in the src of cav_nv.js (RUM Tag), as highlighted above. Please change the version accordingly. 

Method – 2: Add Script Tag for nv_bootstrap 

Cavisson’s appliance hosts the nv_bootstrap and other files. So, following script tag can be added to load nv_bootstrap.

v=REL20170123

<script src=”//mon1.example.com/nv/example/nv_bootstrap.js?” type=”text/javascript” async></script>

Customer User can host this JS from its own web server and then it can be referred from there also.

v=REL20170123 

<script src=”//www.example.com/mon/js/nv_bootstrap.js?” type=”text/javascript” async></script>

Note: As we mentioned in step first, it is highly recommended to add release/build version in URL of script as highlighted above.  Please change the version accordingly.

Content Security Policy for RUM Tag

If application is using Content-Security-Policy then for successful tag injection requires merging the following CSP rules to your existing set of rules :-

Content-Security-Policy: default-src ‘self’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ nv-server-domain; worker-src blob: ; connect-src nv-server-domain

If script-src is not being used by the application then use following with default-src :-

Content-Security-Policy: default-src ‘self’ ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ nvserver-domain; worker-src blob: ; connect-src nv-server-domain

If the app is configured to track sessions across multiple domains then a frame-src CSP rule is required to whitelist the request to the cross domain HTML. 

NV will request the page using an IFRAME.

frame-src [cross domain session host];

Handling of Sensitive Data 

The tag does not capture sensitive data. Below are the web page elements, which are considered sensitive by default – 

  • input[type=”password”]
  • input fields having credit/debit card number
  • input field having mobile number input field with 3 digit number (CVV code)

Mark Sensitive Data Explicitly

nvSensitive class

NetVision provides an option to mark an element as sensitive explicitly using a class – nvSensitive. Developers have to use these classes to mark sensitive elements in their code. 

Example: 

<div>

<span class=”cardInfo active nvSensitive” > 1832 3233 4435 … </span>  </div>

nvEncrypted class

Developers can use class – nvEncrypted to mark elements as encrypted. Value of the encrypted element will be encrypted by the JS agent (using RSA Encryption) and then will be sent to the NV Server. Visibility of encrypted elements will be controlled by Access Control i.e. a person having authorization to see the encrypted data can only see it.

Example:

<div>

<span class=”email active ypted“> user.abc@gmail.com</span> 

</div>

Mark Sensitive Data 

In case developers do not want to make changes in their code to mark sensitive elements, they can configure these elements using NV Portal. Each setup will have its configuration and CSS Selectors corresponding to sensitive elements can be specified in this configuration. This configuration should be reviewed before any release change to update the sensitive element list.

Key Capabilities with Tags

Using Tags to monitor how your users interact with the application have manifold benefits: 

  • Real-time performance monitoring: Tags allow for the collection of real-time data on various performance metrics across real user sessions like web vitals, channel details like browser, devices, OS, location to effectively troubleshoot any issues impacting end user experience.
  • User Experience Optimization: It also helps in monitoring user interactions and behavior. It will provide insights into how users engage with the application, by analyzing the complete user action flow.
  • Error detection and troubleshooting: Tags capture client-side errors and exceptions that occur during user sessions. This helps developers to quickly identify and diagnose the issues.
  • A/B Testing: Tags also enable A/B Testing by tracking user interactions with different variants of webpages. This will help to make data-driven decision about design changes, content optimization and features enhancements to maximize user engagement and conversion rates.
  • Transaction Monitoring & Funnel Analysis: Tags help in monitoring the user transactions and creating conversion funnels. By tracking the timing and success rate of these transactions, we can identify the abandonment points and opportunities for conversion rate optimization to maximize business outcomes.

Using a Tag Manager for NV Tag Deployment

It is recommended to deploy the NV Tag using a tag management solution such as Google Tag Manager or Signal. Tag managers allow you to inject and manage code snippets without requiring direct changes to the application’s codebase. This simplifies deployment and enables faster updates or testing without needing a full application release. 

 

NV Tag Components and Caching Strategy

The NV Tag consists of three key components:

  • nv_bootstrap.js – Main NV Tag script
  • cav_nv.js – Core Library 
  • config.js – Configuration file

All three files should be served via a CDN (if available) to improve load performance and reliability. The default cache durations set by the NV server are:

  • nv_bootstrap.js – 1 week
  • cav_nv.js
    – 1 day
  • config.js – 1 hour

Most CDNs respect the Cache-Control headers provided by the origin server. Therefore, these default cache durations will typically be enforced by the CDN unless explicitly overridden in its configuration.

Configuration Updates (config.js)

Whenever a user modifies configuration settings, the NV server returns a new configuration version to the browser in response to a timing call. On the next page navigation, the system fetches the latest config.js using the new version number as a query parameter, ensuring the browser retrieves the updated configuration.