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.

note: We've upgraded our legacy custom timings API. To take advantage of these new features you'll need to update your existing custom timings implementation to use the new API as documented below.


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

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

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

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

const component1 = new AsyncComponent('Header');

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