In this guide I’ll explain you the easiest way to track Core Web Vitals (if you don’t know what Core Web Vitas are, click here to read my italian article) i.e. metrics that are the new ranking factor in SEO for Google.

This post is inspired by:

Actually I was inspired by several sources, but Philip Walton’s post is the most authoritative source for me.

Metrics to focus on are:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumlative Layout Shift (CLS)

Are you ready to take advantage of the three Core Web Vitals metrics and create your own Real User Monitoring?

Let’s go!

STEP 1 – Create Custom HTML Tag with Web Vitals APIs

You are able to creare the Custom HTML Tag just by coping and pasting the script below (integrated by some small changes with the help of the help of Simen Hansen) in 10 seconds.

  • Tag > New > Tag Configuration > Custom HTML Tag.
  • Copy and paste this script:
<!-- Load 'web-vitals' using a classic script that sets the global 'webVitals' object. -->
<script defer src="https://unpkg.com/web-vitals@0.2.2/dist/web-vitals.es5.umd.min.js"></script>
<script>
function sendToGTM(name, delta, id) {
  // Assumes the global `dataLayer` array exists, see:
  // https://developers.google.com/tag-manager/devguide
  dataLayer.push({
    event: 'web-vitals',
    event_category: 'Web Vitals',
    event_action: name.name,
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    event_value: Math.round(name.name === 'CLS' ? name.delta * 1000 : name.delta),
    // The 'id' value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: name.id,
  });
}
webVitals.getCLS(sendToGTM);
webVitals.getFID(sendToGTM);
webVitals.getLCP(sendToGTM);
</script>
  • Triggering > select “All Pages” Trigger.
  • Rename Tag as “Script – Web Vitals”.
  • Save and publish.

web vitalis script custom HTML Google Tag Manager

Some considerations:

  • The green parts are comments (you can also delete them)
  • The dataLayer object must be initialized. No problem: it’s already like that 🙂
  • Since Google Analytics likes integers there’s a rounding in the event_value parameter (Math.round), and in the case of the CLS metric a multiple of 1000 is added.
  • The event_label parameter contains a unique id of the page
  • There are three metrics to add: Largest Contentful Paint (LCP), First Input Delay (FID), Cumlative Layout Shift (CLS)

So this script fires three events called web-vitals in GTM. Let’s intercept metrics.

STEP 2 – Create Trigger for WEB VITALS Custom Event

  • Triggers > New > Trigger Configuration.
  • Trigger Type: Custom Event.
  • Event name: web-vitals.
  • Rename Trigger: “Web Vitals”.
  • Save.

attivatore personalizzato web-vitals google tag manager

STEP 3 – Create Data Layer Variables

You have to collect values that are inside dataLayer to send them to Google Analyitcs.

These values are:

  • event_category
  • event_action
  • event_value
  • event_label

You just have to do it for all four values.

Variables > New > Variable Configuration > Data Layer Variable

  • Name: dlv – event_category
  • Data Layer Variable Name: event_category
  • Data Layer Version: Version 2

configurazione variabili livello dati web-vitals google tag manager

Do the same for the rest of Variables by changing their name and value:

Variables > New > Variable Configuration > Data Layer Variable

  • Name: dlv – event_action
  • Data Layer Variable Name: event_action
  • Data Layer Version: Version 2

Variables > New > Variable Configuration > Data Layer Variable

  • Name: dlv – event_value
  • Data Layer Variable Name: event_value
  • Data Layer Version: Version 2

Variables > New > Variable Configuration > Data Layer Variable

  • Name: dlv – event_label
  • Data Layer Variable Name: event_label
  • Data Layer Version: Version 2

variabili livello dati web-vitals google tag manager

Great! You just have to send values to Google Analytics (but if you wish, you could send these metrics to any other tool).

STEP 3 – Create and configure Google Analytics Tag for web vitals

  • Tag > New.
  • Tag Type: Universal Analytics.
  • Track Type: Event.
  • Category: {{dlv – event_category}}
  • Action: {{dlv – event_action}}
  • Label: {{dlv – event_label}} 
  • Value: {{dlv – event_value}} 
  • Non-Interaction Hit: True

Select Google Analytics Variable on Google Analytics Settings Variable and Enable overriding settings. Insert GA Costant or GA tracking code as Tracking ID.

  • Firing Triggers:“Web Vitals”.
  • Rename Tag: “GA – Event – Web Vitals”.
  • Save.

Google Analyitcs web vitals google tag manager

STEP 5 – Check the correct tag functioning

Before publishing any changes, check the correct tag functioning by activating the Preview and Debug Mode.

Go to your site and refresh the page. You should see a box at the bottom of your current page showing “web-vitals” event triggered three times. Click on Tags Fired On This Event, you’ll find newly created Tag.

This Tag will fire three time, one for each metric. Keep in mind that the event corresponding to the CLS metric will take a little longer to appear in the box.

debug web vitals google tag manager

 

Therefore, on each event there will be a dataLayer push which will have the parameters of the three metrics:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumlative Layout Shift (CLS)

 

 

And these following Tags in Google Analytics.

 

STEP 6 – Publish changes

If the Tags function correctly, then you can publish the changes.

Next step: create your R.U.M.

Now that data are sent to Google Analytics, you should export them and create report and your Real User Monitoring.

As explained in web.dev official article

“For each of the above metrics, to ensure you’re hitting the recommended target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.”

You have to wait for datas (for a few days) and then you can export them by using tools such as Google Sheet, BigQuery and Data Studio.

Would you like to read a guide explaining how to do it? Let me know in the comments!

Here is an example:

rum data studio with core web vitals and google tag manager

See you in the next article and… Buon Tag 😉

Links

Condividi anche tu Google Tag Manager!
  • Reply

    Paolo

    26 06 2020

    Ciao Matteo. Non capisco, ho ripetuto l’operazione 3 volte ma mi si attiva sempre un solo tag per una sola metrica (events). Dove potrei aver sbagliato?

  • Reply

    Andres

    25 06 2020

    This is great, thanks for sharing.
    Once it’s all setup in GTM, what are there any other steps in GA to be able to see the data?

    • Matteo Zambon

      26 06 2020

      You can use Google Sheet with this addon https://developers.google.com/analytics/solutions/google-analytics-spreadsheet-add-on export and create your report.
      Or you can use App+Web and BigQuery.

      I will do a webinar in english 🙂
      Keep in touch!

    • Andres

      29 06 2020

      Thanks.. one last question, what score unit is the is the CLS using? We are aiming for something less than 0.1 but your shows 146 as yellow grade (so I’m guessing this number should be devided by 1000??)

    • Matteo Zambon

      30 06 2020

      Hi Andres, you are right. In the step 1: “for CLS the value is first multiplied by 1000 for greater precision”. In the report you could divided by 1000 🙂

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.