Installing the snippet

🎬 Rather watch a video tutorial?

Our snippet is used to collect real user data. To get data in your RUMvision dashboards, each domain requires its own tracking snippet.

Already installed the snippet and now want to make adjustments? Jump to our introduction to Configure snippet

Finding your snippet

Installing the snippet is straightforward.

  1. Go to manage → settings → snippet.
  2. If you have an active subscription, you can see the snippet.
  3. Copy the snippet or share the public link with the person responsible for the snippet installation.
  4. The easiest way is to install the snippet via Google Tag Manager (GTM).
  5. After installing the snippet check your network requests and search for your own RUM code to check if everything is working and your website's Content Security Policy is not blocking the snippet.

RUMvision installing real user monitoring snippet

GTM installation

The best strategy to embed your personal RUMvision snippet depends on your consent configuration. You could either embed the snippet depending on user consent, or without consent. There is an important difference though.

Embedding RUMvision without depending on user consent is very straight forward and does not lead to skewed data. Follow these steps to install our snippet via GTM:

  1. Add a new tag.
  2. Rename the tag to "RUMvision" or "Core Web Vitals monitoring" so that it's easy to recognize for others working in the same GTM container.
  3. Click on "Tag Configuration", and choose "Custom HTML" within the side panel that will appear.
  4. Paste your snippet in the HTML textbox that will appear.
  5. Set the trigger to all pages (type: Page View).
  6. Save the snippet and then click the submit button at the top right of the page.

Installing snippet via GTM

We have now started tracking the homepage you specified when you registered your domain. To track more you can set up pages.

Did you add the snippet and now waiting for data? Learn more about how soon you should see data.

When you decide to load RUMvision only after user consent, you would still like to collect as much data as possible. When embedding your RUMvision snippet using the Page View event, RUMvision will only start to collect the next pageload after the pageload where users gave consent. In other words, you will end up missing a lot of valuable information.

For this explanation, we use the Google Consent Mode v2 principle. RUMvision tracking snippet falls within the analytics_storage category. For more information, see Tag Manager consent mode support.

Creating the GTM trigger

You already should have created your own Custom Event for consent mode. This could either be cookie_consent_update (as seen in the screenshot below) or consent_updated. The exact value will be different per Consent Management Platform.

An example of a created Custom Event trigger can be found in the screenshot below.

Creating the GTM tag

  1. Add a new tag.
  2. Rename the tag to "RUMvision" or "Core Web Vitals monitoring" so that it's easy to recognize for others working in the same GTM container.
  3. Click on "Tag Configuration", and choose "Custom HTML" within the side panel that will appear.
  4. Paste your snippet in the HTML textbox that will appear.
  5. Collapse "Advanced Settings" and then collapse "Consent Settings".
  6. Select radio button "Require additional consent for tag to fire" and click on the button " + Add required consent".
  7. In the form field that appears below, fill in or select "analytics_storage".
  8. Set the trigger to your custom consent event.
  9. Save the snippet and then click the submit button at the top right of the page.

These steps are illustrated in the screenshot below.

Without Google Tag Manager

If you're not utilizing Google Tag Manager or if you require more data to be tracked without the delay associated with GTM, you have the option to incorporate our code snippet directly into your source code.

You can choose to embed it either in the <head> or <body> section of your HTML documents. Regardless of your choice, you'll always gather valuable RUM data. However, for the sake of data consistency, we recommend placing the script in the <head>.

Here are some performance best practices to consider when incorporating our inline JavaScript into your source code:

In the head

When you decide to place it in the <head>, never position our JavaScript after a stylesheet. In other words, be sure to place the inline script just before your first stylesheet. Other scenario's will slow down FCP and potentially LCP.

In the body

When placing our inline script in the <body>, it is best to position it at the end of the document instead of the start of the <body>.

Table of Contents