Real User Monitoring (RUM)

What are Core Web Vitals? #

• It can take days to weeks to see the effect of changes to your site on Core Web Vitals.
• It’s hard to diagnose Core Web Vitals by page type or URL.

Why use Edgio to track Core Web Vitals? #

• See how changes to your site impact Core Web Vitals in real time
• Correlate web vitals to your application’s routes
• Analyze score across a number of dimensions such as country, device, and connection type
• Identify which pages are most negatively impacting your search ranking.

Installing Real User Monitoring (RUM) #

1. Load the Real User Monitoring page.
   1. From the Edgio Console, select the desired private space or organization.
   2. Select the desired property.
   3. From the left-hand pane, select the desired environment from under the Environments section.
   4. From the left-hand pane, select Analytics | Real User Monitoring.
2. Click on the tab for the desired installation method.

   

   The Edgio Console provides installation instructions that contain a token that is specific to your property.

Edge Functions #

1. Click Create Edge Function from the Edge Function tab of the Real User Monitoring page.
   Edgio will automatically generate an edge function that adds Core Web Vitals tracking to a request and a rule that invokes that edge function.
2. Review your rules.
3. Deploy your changes to this environment.

1. In the Edgio router, use the edge_function feature to specify the path to the edge function that will add Core Web Vitals tracking.
   JavaScriptroutes.js

   Copy

   1// This file was added by edgio init.
   2// You should commit this file to source control.
   3import {Router, edgioRoutes} from '@edgio/core';
   4
   5export default new Router()
   6  // Built-in Edgio routes
   7  .use(edgioRoutes)
   8
   9  // Specifies the edge function for all paths. Modify the path as needed.
   10  .match({}, {
   11    edge_function: './edge-functions/main.js',
   12  });

2. Add the following edge function:
   JavaScriptedge-functions/main.js

   Copy

   1export async function handleHttpRequest(request, context) {
   2  const originResponse = await fetch(request.url, {
   3    headers: request.headers,
   4    method: request.method,
   5    body: request.body,
   6    edgio: {
   7      origin: context.requestVars.matched_origin_name
   8    }
   9  })
   10
   11  // Return origin response if not HTML
   12  if(!originResponse.headers.get("content-type").startsWith('text/html')){
   13    return originResponse;
   14  }
   15
   16  let html = await originResponse.text()
   17  html = html.replace(
   18    '</body>', `
   19      <script defer>
   20        function initEdgioRum() {
   21          new Edgio.Metrics({
   22            token: '<TOKEN>'
   23          }).collect()
   24        }
   25      </script>
   26      <script src="https://rum.edgio.net/latest.js" defer onload="initEdgioRum()"></script>
   27    </body>`
   28  )
   29  return new Response(html, originResponse)
   30}

3. Replace <TOKEN> with your RUM token.
   You can find this token on the Script tag tab.
   JavaScriptedge-functions/main.js

   Copy

   1...
   2        function initEdgioRum() {
   3          new Edgio.Metrics({
   4           token: 'ab1234c7-fe39-4a0e-8b3c-1ddf837a5c90'
   5          }).collect()
   6        }
   7...

4. Optional. If you are also injecting Predictive Prefetching, then you should insert a script tag that installs it as shown below.
   JavaScriptedge-functions/main.js

   Copy

   1...
   2  html = html.replace(
   3    '</body>', `
   4      <script defer>
   5        function initEdgioRum() {
   6          new Edgio.Metrics({
   7            token: '<TOKEN>'
   8          }).collect()
   9        }
   10      </script>
   11      <script src="https://rum.edgio.net/latest.js" defer onload="initEdgioRum()"></script>
   12     <script src="/__edgio__/prefetch/install.js" defer></script>
   13    </body>`
   14  )
   15  return new Response(html, originResponse)
   16}

   Predictive Prefetching also requires a rule that applies the Set Max Age (max_age) and Set Service Worker Max Age (service_worker_max_age) features to the pages that will be prefetched.
5. Deploy your changes to this environment by running the following command from your property’s root directory:
   Bash

   Copy

   1edgio deploy

Script Tag and Google Tag Manager #

1<script defer>
2  function initEdgioRum() {
3    new Edgio.Metrics({
4      token: '<TOKEN>' // Get your token from the Edgio Console
5    }).collect()
6  }
7</script>
8<script src="https://rum.edgio.net/latest.js" defer onload="initEdgioRum()"></script>

NPM or Yarn #

1npm install --save @edgio/rum

1import {Metrics} from '@edgio/rum';
2
3new Metrics({
4  token: '<TOKEN>', // Get your token from the Edgio Console
5}).collect();

Tie URLs to Page Templates #

1<script defer>
2  function initEdgioRum() {
3    new Edgio.Metrics({
4      token: '<TOKEN>', // Get your token from the Edgio Console
5
6      // assign a page label for each route
7      router: new Edgio.Router()
8        .match('/', ({ setPageLabel }) => setPageLabel('home'))
9        .match('/p/:id', ({ setPageLabel }) => setPageLabel('product'))
10        .match('/c/:id', ({ setPageLabel }) => setPageLabel('category'))
11    }).collect()
12  }
13</script>
14<script src="https://rum.edgio.net/latest.js" defer onload="initEdgioRum()"></script>

1<script>
2  function initEdgioRum() {
3    new Edgio.Metrics({
4      token: '<TOKEN>', // Get your token from the Edgio Console
5      pageLabel: document.title ? document.title : "(No title)",
6    }).collect()
7  }
8  var rumScriptTag = document.createElement('script')
9  rumScriptTag.src = 'https://rum.edgio.net/latest.js'
10  rumScriptTag.setAttribute('defer', '')
11  rumScriptTag.type = 'text/javascript'
12  rumScriptTag.onload = initEdgioRum
13  document.body.appendChild(rumScriptTag)
14</script>

Track Additional Data #

1new Edgio.Metrics({
2  // Rather than providing a router, you can also define the page label for each page explicitly.
3  // Use this option if it is more convenient to add the script tag to each page template individually
4  // rather than adding it to the main application template.
5  pageLabel: 'home',
6
7  // The version of your application that is running.
8  appVersion: 'v1.0.0',
9
10  // Whether or not the page was served from the CDN cache, if this is known.
11  // This is automatically set for sites that are deployed on Edgio.
12  cacheHit: true | false,
13
14  // The country code in which the browser is running. This is often provided by CDNs
15  // as a request header that can be embedded in your script tab by your application code.
16  // This is automatically set for sites that are deployed on Edgio.
17  country: 'US',
18})