Custom timings

You can track custom performance measurements across your website or application using custom timings. For example, you might track the time it takes for a specific video to play or the search bar to load. Custom timings gives you the flexibility to track the timing of events that matter to your users or business.

Custom timings works for all web applications, static pages and single page applications.

Tracking custom timings

To track custom timings call the trackEvent method, passing an object with the type set to customTiming alongside a name and duration. This method can be called each time you want to track a new timing.

rg4js('trackEvent', {
  type: 'customTiming',
  name: 'timeToInteractive',
  duration: 1200,
});

Example

const d = new Date();

const startTime = d.getTime();
const component1 = new AsyncComponent('Header');

component1.load().then(() => {
  rg4js('trackEvent', {
    type: 'customTiming',
    name: 'Header loaded',    
    duration: new Date().getTime() - startTime,
  });
});

Track performance.measure calls as custom timings

Performance entries created by using the performance.measure API can automatically be tracked as new custom timing calls by enabling the automaticPerformanceCustomTimings option. This allows you to use a native API when tracking performance information that is seperate to our provider.

rg4js('options', {
  automaticPerformanceCustomTimings: true,
  // Add any other options...
});

Example

const markerStartName = "header-start";
performance.mark(markerStartName);

const component1 = new AsyncComponent('Header');

component1.load().then(() => {
  performance.measure("header-loaded", markerStartName);
});