In this guide, I’ll explain to 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)
  • Cumulative 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 create the Custom HTML Tag just by copying 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 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), Cumulative 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 Analytics.

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)
  • Cumulative 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 reports 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 data (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

    Leo Shaw

    04 09 2020

    Hi, thanks for the great article. I noticed in the code you have “function sendToGTM(name, delta, id) {” – I think you either want brackets in there to destructure the arg, e.g. “function sendToGTM({name, delta, id}) {” or have e.g. “function sendToGTM(metric) {” and reference metric.name, metric.delta etc. below

    • Matteo Zambon

      14 09 2020

      Hi Leo and thanks for your feedback.
      I don’t understand your point. The function works very well 🙂

      Could you explain it better?
      Thanks

  • Reply

    Alfonso

    16 07 2020

    Hi Matteo.

    I’d love to see how have you made the Data Studio dashboard (without Big Query, directly from GA dataset)

    Thanks and congrats for the post!

    • Matteo Zambon

      17 07 2020

      Oh, thank you Alfonso. I did an Italian webinar to explain how to create your Data Studio dashboard with Big Query and the other way with GA + Google Sheet.

      Maybe I can do it in English version 🙂

  • Reply

    Papas

    10 07 2020

    Thats a great guide and a great work, thanks for that. Would it be possible to write a guide on how you calculate the scores; from GA/BigQuery to GDS.i have done the work and i can caputre the data in GTM, send them over to GA, read the data in GDS, but iam not sure how to represent the data as you.

    • Matteo Zambon

      17 07 2020

      Thanks Papas, I did an Italian webinar to explain how to create your Data Studio dashboard with Big Query and the other way with GA + Google Sheet.

      Maybe I can do it in English version 🙂

    • Alfonso

      20 07 2020

      Thanks for your reponse, Matteo!
      Have you got the Italian version to share?
      Actually I just don’t know how to make the conditional format with the values of the web vitals events, because columns “score” and “75 percentile” don’t match with my GA events values.

      Thanks in advance and congrats for your work! 🙂

    • Matteo Zambon

      21 07 2020

      Hi Alfonso, I did a payment Italian course to explain how to create your RUM with Google Sheet and Big Query in Data Studio: you can find it here: https://club.tagmanageritalia.it/corso-segni-vitali/

      Maybe I will translate this course in English next time.

      Thanks for your feedback, it’s really appreciated.

  • 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.