[SEO] How to track your Core web vitals ?

What are the Core Web Vitals (CWV) ?

Web core vitals are a set of metrics that allow you to measure the user experience on your website. It’s composed of few kpis :

• LCP (Largest Contentful Paint): Measuring your website loading performance.

• FID (First Input Delay): Measuring your website reactivity.

• CLS (Cumulative Layout Shift): Measuring the visual stability.

How to improve your SEO ?

Having a good result in this 3 metrics will improve your SEO Ranking.

You can obtain your score in one shot using Lighthouse or Pagespeed Insight from Google. But If you want to really increase your SEO, it’s recommended to track and follow this metrics. Here is how to do it.

How to track the Web vitals?

You’ll need 10 minutes of your time and 2 things: GTM and Google analytics.

If you have one of them, or both: congrats you just saved 5 minutes, you’re half way. Just go to the step 3.

Step 1: GA Account

If you don’t, no worries you don’t need to track all your website, just go to https://analytics.google.com/analytics/web/ and create an account for your website, write down your measurement ID it will give you (G-XXXXXXXXXX). If you don’t have it, go to Admin > Data stream > Your website > Measurement-ID

Step 2: GTM Account

Go to https://tagmanager.google.com/#/home and create an account.

I won’t dive into how to do it, it’s pretty simple and will take you 2 minutes.

Step 3: Adding Core Web Vitals into GTM

Go to “template” in the left menu and click on “Search Gallery”.

Add the Core web vital extension from the genius of analytics Simo Ahava (His website as a reference if you need it : https://www.simoahava.com/).

When it’s done, click on the “Tag” section on the left menu and “create”.

Add the Core web vitals configuration template and make it trigger on “all pages”.

Go to “Triggers” on the left menu and click on “New”. You can now select “Custom Event” and write coreWebVitals as Event name.

You’re almost finished ! Now you’ll have to go to “Variables” in the left menu, and create 6 variables. For each of them, here is the Variable name and the datalayer value you should put :

Variable name / Data Layer Variable Name

DLV - webVitalsMeasurement.name / webVitalsMeasurement.name

DLV - webVitalsMeasurement.id / webVitalsMeasurement.id

DLV - webVitalsMeasurement.value / webVitalsMeasurement.value

DLV - webVitalsMeasurement.delta / webVitalsMeasurement.delta

DLV - webVitalsMeasurement.valueRounded / webVitalsMeasurement.valueRounded

DLV - webVitalsMeasurement.deltaRounded / webVitalsMeasurement.deltaRounded

Final step, send the value to Google analytics thanks to a tag :

Create a new tag, select the “Google Analytics: GA4 Event” type.

As Event name, select the variable name.

Then add event parameters as below on the screenshot.

To conclude, select “Event - coreWebVitals” as trigger.

Submit your changes on the top right corner, give a version name and you’re done !

Wait a bit and go to your Google analytics realtime data :

You can now see your events CLS/LCP/TTFB.

I’ll do another blog post soon to explain how to analyse your data so subscribe the Newsletter!

If you have any question about this topic or you want to discuss about Analytics and Business Intelligence, join our community on Discord !