Custom timings

Enable custom timings

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

    rg4js('options', {
      Real User MonitoringCustomLoadTimeEnabled: true
    });

Add custom timings

You can send up to 10 custom timing values to Real User Monitoring. This is the format for configuring custom timings:

    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,
      }
    });

Important note: The timing value is the time in milliseconds

Example

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
        }
      });
    });

Configure custom timings

Enable custom timing 1 in Real User Monitoring settings.

Define a name

Configure custom timing 1.

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

Viewing custom timings

View your enabled custom timings in the Real User Monitoring performance page.