Calibre
Calibre

Product

Use Cases

Company & Resources

Real User Monitoring
Docs/Real User Monitoring

Install & Configure RUM

Real User Monitoring (RUM) requires adding a JavaScript snippet to your website. The snippet will collect performance data from real users visiting your site.

This guide explains how to install and configure Calibre RUM.

Prerequisites

To use Calibre RUM, you will need:

  • A Calibre account with a plan that includes Real User Monitoring (RUM).
  • A website where you can add the RUM JavaScript snippet.

Enable RUM for your Site

  1. Navigate to your Site in Calibre.
  2. In the left-hand side menu, click on Real User Monitoring → Settings.
  3. Add your website’s domain to Allowed Origins.
  4. Choose how many user sessions you want to collect (e.g., 15%, 100%).
  5. Click Save RUM Settings.
Enabling RUM for a site
Enabling RUM for a site

Install the RUM snippet

  1. Copy the RUM snippet from the Real User Monitoring → Settings page. The snippet appears once you have enabled RUM for the Site.
  2. Include the snippet in the <head> section of your website's HTML. Ensure it is included on all pages you want to monitor.
  3. Save and deploy your changes.

Verify RUM Installation

You can verify that the RUM snippet is working correctly by checking the Network tab in your browser's developer tools. You should see at least 2 requests from use.calibre.app:

  1. A GET request to use.calibre.app/index.js to load the RUM snippet.
  2. A POST request to use.calibre.app/t that sends performance data.

/t will respond with OK if data is being successfully sent.

Verifying RUM installation in browser developer tools
Verifying RUM installation in browser developer tools

Reload your RUM Dashboard after a few minutes to see the collected data. Check the Live Sessions count to verify that data is being received. After a few hours, filter by Today to see the most recent data.

Expect to see data in the RUM Dashboard within a few minutes of verifying installation. If you are using a low sampling rate or do not have much traffic, it may take longer to see comprehensive data appear.

Configuration options

Calibre RUM makes it easy to configure how data is collected, processed and stored.

To manage these settings, navigate to your Site → Real User Monitoring → Settings page.

Read on to learn about Allowed Origins, Geographic Monitoring, Sampling Rate, Data Retention, and Advanced Configuration.

Allowed Origins

To ensure that RUM data is only collected from your website, you need to specify your website's domain in the Allowed Origins field in the RUM settings. This prevents other unauthorised websites from sending data to your Calibre account.

If a website embeds the RUM snippet and is not in Allowed Origins, the snippet will return 204 No Content with an empty body.

Geographic Monitoring

By default, Calibre RUM collects data from users worldwide. In all cases, Calibre’s RUM data collection is designed to respect user privacy and comply with relevant data protection regulations.

When data is collected, it is processed in the same region as the user. If the user is located in the European Economic Area (EEA) or European Union (EU), the data will be processed in accordance with GDPR requirements.

However, if you prefer to exclude data from users in the EEA or EU, you can enable the Exclude EEA/EU option in RUM Settings. When this option is enabled, the RUM snippet will return 204 No Content, and no data will be collected from them.

Learn more about RUM data collection and processing.

Sampling Rate

You can choose how much data is collected by changing the Sampling Rate percentage.

If a user is sampled out, the RUM snippet will return 204 No Content, and no data will be collected from them. On a subsequent page load, the user may be sampled in, based on the Sampling Rate.

Sampling Rate is applied after EEA/EU exclusion, so you can use the two settings together.

Data Retention

You can specify a RUM data retention period of 3 — 24 months. After this period, your Site’s RUM data is automatically deleted in accordance with our data retention policy. Once data has been deleted, it cannot be recovered.

Advanced configuration

Override page path to mask sensitive information

In some cases, you may want to mask parts of the page path to avoid tracking sensitive information.

You can do this by adding a data-path attribute to the <script> tag of the RUM snippet, or by calling Calibre.update({ path: "/new/path" });.

1<script
2  defer
3  type="module"
4  crossorigin="anonymous"
5  src="YOUR_RUM_SNIPPET_URL"
6  data-calibre-rum-id="YOUR_RUM_ID"
7  integrity="VALID_INTEGRITY_HASH"
8  data-path="/teams/:team/:site_id"
9></script>
1Calibre.update({ path: "/teams/:team/:site_id" });

When a user visits /teams/calibre/calibre, the RUM snippet will report the page path as /teams/:team/:site_id, effectively masking the original path and preventing the original path from being sent to Calibre’s servers. This is helpful when you want to prevent storing sensitive information such as account identifiers or user IDs.

Element attribution

By default, Calibre RUM attributes elements that contributed to a metric. For example, the element identified as Largest Contentful Paint (LCP) will be automatically attributed using CSS selectors (e.g.: header img.hero-image).

You can set your own custom attributions by adding a data-name or elementtiming attribution to the relevant HTML elements.

While elementtiming is designed for the Element Timing API, Calibre RUM also recognises it for custom element attribution.

Ensure your custom attributions are alphanumeric and use hyphens for spaces. Non-supported characters will be automatically removed.

1<img src="hero.jpg" data-name="hero-image" />
2<img src="avatar.png" elementtiming="user-avatar" />
3<button type="button" data-name="start-new-search-button">Start New Search</button>

You can then filter RUM reports using these custom attributions.

On this page