Custom timings

Real User Monitoring for web

Setup instructions

1. Enable custom timings

Set the pulseCustomLoadTimeEnabled flag to true in your Real User Monitoring configuration:

rg4js('options', {
  pulseCustomLoadTimeEnabled: true

2. Add custom timings to your JavaScript code.

You can send up to 10 custom timing values to Real User Monitoring. All times should be reported in milliseconds and an example for configuring them is below:

rg4js('trackEvent', {
  type: 'customTimings',
  timings: {
    custom1: 0,
    custom2: 0,
    custom3: 0,
    custom4: 0,
    custom5: 0,
    custom6: 0,
    custom7: 0,
    custom8: 0,
    custom9: 0,
    custom10: 0,

Note: All custom timings need to be set in the same 'trackEvent' call. If you are tracking multiple different times you should delay setting the values until the slowest of the timings has been set.  


Consider the following simplified scenario where we have multiple asynchronous events occurring in an application.

We can record the time in milliseconds that it takes for each asynchronous component to load, then when all of our promises have resolved, send the custom timing data to Real User Monitoring.

const d = new Date();
// Define up to 10 different custom timings
let customTiming1, customTiming2, customTiming3, customTiming4;
const startTime = d.getTime();
const component1 = new AsyncComponent('Header');
const component2 = new AsyncComponent('Sidebar');
const component3 = new AsyncComponent('Footer');

const promise1 = component1.load().then(() => {
  customTiming1 = d.getTime() - startTime;

const promise2 = component2.load().then(() => {
  customTiming2 = d.getTime() - startTime;

const promise3 = component3.load().then(() => {
  customTiming3 = d.getTime() - startTime;

Promise.all([promise1, promise2, promise3]).then(() => {
  customTiming4 = d.getTime() - startTime;

  rg4js('trackEvent', {
    type: 'customTimings',
    timings: {
      custom1: customTiming1,
      custom2: customTiming2,
      custom3: customTiming3,
      custom4: customTiming4

3. Configure your custom timing in Real User Monitoring > Settings

Enable Custom timing 1

Enable custom timing 1 in Pulse settings.

Define a name and description. You can also select a color code (optional).

Configure custom timing 1.

4. Go to Real User Monitoring and navigate to Performance

Select the page which the custom timing occurs on and you can view the currently enabled custom timings here:

View your enabled custom timings in the Pulse performance page.


Documentation missing?

If we don't have documentation about your desired topic, send us a message and we'll create it for you.