Custom timings

Pulse - Custom timings

Setup instructions

1. Enable custom timings

Set the pulseCustomLoadTimeEnabled flag to true in your Pulse configuration:

rg4js('options', {
  pulseCustomLoadTimeEnabled: true
});

2. Add custom timings to your JavaScript code.

You can send up to 10 custom timing values to Pulse. 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 Pulse.

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 Pulse > 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 Pulse 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.