Tracking Web Core Vitals in Adobe Analytics

Seán Keown | 16 July 2025

Here at Hookflash – we are all about the user experience. The post click experience has never been more important, with a users experience being directly related to their likelihood to convert on your website – but how do we got about measuring and quantifying that experience in a data driven way? Over the course of this blog I will talk about what Googles Web Core Vitals are and how we can go about tracking them in Adobe (yes, Adobe!) Analytics. 


What are Core Web Vitals? 


At its core (pardon the pun) – the core web vitals are three metrics that give you an idea of overall site performance as it pertains to serving content on your website. These metrics are: 

  1. Largest Contentful Paint (LCP): This is a measurement of how long it takes the largest content element on a page to become visible (or "paint" on the page). 
  2. Interaction to Next Paint (INP): This measures responsiveness when users are interacting to different parts of your site. 
  3. Cumulative Layout Shift (CLS): This is a measurement of visual stability, and looks out for things like a layout shifting unexpectedly as it loads. 


Curious as to what these scores may be on your site? You can check it in your browser! If you navigate to your site, open dev tools and select “Lighthouse” from the menu, you can run a quick test on any given page for desktop or mobile like I have done on the Hookflash site:

   Might not be worth mentioning for the scope of Analytics, but technically Lighthouse gives a different score to Core Web Vitals. Lighthouse is "lab data", whereas CWV are collected from real user metrics. You can get these details on GSC or by looking at a Chrome UX Report (publicly available for all sites), but it requires a minimum threshold of user traffic to your site!

These three metrics are also what we refer to as a “ranking factor”, and are the only measurable ranking factor publicly-known and is used to determine ranking on Google Search. At Hookflash as part of all out technical SEO audits we will check these – so if you have any SEO specific questions be sure to check out our SEO services page – or reach out directly!

(At this point it may be worth mentioning that there are other web vitals, that aren’t “core”, but still make up the performance score you see above. These can be tracked also, but for the purposes of this article I will focus on the three core web vitals).

It only takes around 30 seconds to run the report and you can get instant feedback on any page on your site. This is obviously great – but it is not feasible to run these reports on multiple pages every day and record them manually so you can get an indication of site performance, that would be time consuming and unnecessary! That why you may want to consider tracking them in Adobe Analytics!

Why should I track these? 


Good question! A couple of reasons:

1)       Measure and improve your user experience – As mentioned previously, the users on site experience has never been more important. Web Core Vitals focus on the core aspects of user experience. By tracking these metrics, you can identify and address pain points that could be causing frustration or disengagement among users. Page / content load times in particular have been proven to have a direct correlation with bounce rate, as well as conversion rate:

 

2)     SEO Benefits  – Higher Core Web Vital scores are considered by Google when deciding on rankings through their search engine. Obviously this is not the only factor in deciding these rankings, however it is still an important consideration.

3)     Combining these with Web Analytics Metrics  – If you decide to track Core Web Vitals in Adobe Analytics you can chart the performance against other KPIs, such as conversion rate. The ability to monitor site performances effect on users likelihood of converting could be beneficial when it comes to site redesigns, deployment of other third party tools etc.

So, how do I track these?

There are two main methods:

1)     Adobe Data Collection Extension - There are extensions available in the Adobe Data Collection extensions catalogue that can track this. These extensions are not created by Google or Adobe, so if your business is wary of anything developed by a non-partner, you may want to avoid this method and go for the second option. Having said this – this method negates the need to use any custom code and is quick to set up.

2)     Custom Code  – This method is slightly more involved, and less technical users may be slightly put off, but this may be a better option depending on your circumstances. It will also give a bit more flexibility in how and when you deploy the tracking.


Lets take a look at the extension method:

1)     Install “Web Vitals” extension to the relevant Adobe Data Collection property

2)     Configure the extension according to your needs (i.e. which metrics/web vitals you want to track – this may important, but more on that later):

3)     Create a data element for each of the values you want to track. You can choose from the following:

a.     ID

b.     Name

c.     Value

d.     Delta

e.     Navigation Type

f.       Rating

g.      Attribution

4)     Create a rule for each of the web vitals you want to track, and name it appropriately

5)     Add a condition that ensures user consent before firing

6)     In the actions you can set up your “set variables” action and add the data elements you have created and assign them to an eVar

7)     Create a send beacon action

8)     Test and make any additional changes in Adobe Analytics


Custom Code Method:


1)     Create a rule and name it appropriately

2)     Add an event – Library Loaded (page top)

3)     Add a condition that ensures user consent before tracking

4)     In the custom code action paste the following code (NOTE: this should not be applied exactly as below – every setup will be unique, as well as the evar/prop/event numbers listed. So please test thoroughly before pushing script live):

 (function() {
  var script = document.createElement('script');
  script.src = 'https://unpkg.com/web-vitals@1.1.0/dist/web-vitals.umd.js';
  script.onload = function() {
    webVitals.getCLS(reportWebVitals);
    webVitals.getFID(reportWebVitals);
    webVitals.getLCP(reportWebVitals);
  };
  document.head.appendChild(script);
})();
function reportWebVitals(metric) {
  var s = window.s;
  if (!s) return;
  var payload = {
    metricName: metric.name,
    metricValue: metric.value,
    metricId: metric.id,
    metricDelta: metric.delta,
    metricEntries: JSON.stringify(metric.entries),
  };
  s.events = 'event1';
  switch (metric.name) {
    case 'LCP':
      s.prop1 = metric.value;
      s.eVar1 = metric.value;
      s.events += ',event2';
      break;
    case 'FID':
      s.prop2 = metric.value;
      s.eVar2 = metric.value;
      s.events += ',event3';
      break;
    case 'CLS':
      s.prop3 = metric.value;
      s.eVar3 = metric.value;
      s.events += ',event4';
      break;
  }
  s.linkTrackVars = 'prop1,eVar1,prop2,eVar2,';
  s.tl(true, 'o', 'Core Web Vitals');
}

5)     Test and make any additional changes in Adobe Analytics

Once your tracking is pushed live (via either method) – it is now just a case of creating a calculated metric in Adobe Analytics for each of the core web vital scores. Depending on your setup, the config of your calculated metric should be something along the lines of the below:

Caveats / Limitations

While a very useful solution to monitor your websites performance – there are a few things that I should bring to your attention.

·        Depending on the web vitals you wish to track – either solution could be evar/event intensive. There are scenarios where if you wanted to track the maximum number of metrics/actions, this could take up 6 events and 12 evars. If you have a limited number of evars/events available in your instance of Adobe Analytics, this simply isn’t feasible. However you should weigh up the benefits of this tracking and only track what you will use to gather valuable insights.

·        The Core Web Vitals that you collect will only relate to Chrome users. This is an important distinction to make if you have a high mobile/safari user base. Having said this, the performance metrics should be fairly representative across all browser types, and regardless of browser type, monitoring and improving your core web vital scores will still have benefits to Google search rankings.

·        This tracking will increase the number of server calls that you make to Adobe Analytics, and as we all know that can mean increased cost! To combat this, I would advise that you apply a sampling condition to your web core vitals rules that limits the amount of times that you fire this rule. You can select any percentage that you are comfortable with, and the data outputted will be representative of the broader user experience:

Conclusion

If you want to keep customers engaged on your website, monitoring and improving the core web vitals scores is a must. Deploying this tracking alongside your existing web data in Adobe Analytics will allow you to monitor performance over time, measure the success of a site redesign, or create different user segments based on their experience for valuable insight.

If you have any questions on this tracking, or anything else related to Adobe Analytics, please get in touch and we’d love to hear from you!

Want to have a chat? 

Chat through our services with our team today and find out how we can help.

Contact us