Adding Core Web Vitals into Adobe Analytics

[Trystan_Colwyn-]

Has anyone added Core Web Vital metrics (list below) into Adobe Analytics? 

- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Time to First Byte (TTFB)

I'm looking to scour through https://github.com/GoogleChrome/web-vitals but any suggestions welcome !

[VaniBhemarasetty · Accepted solution]

@Trystan_Colwyn-  Sure you can integrate web vitals to adobe analytics through Adobe exchange 

Here is the documentation on the same 

https://exchange.adobe.com/experiencecloud.details.106769.web-vitals.html

You can check on installation section on how to install and other details of integration

Hope this helps

[PratheepArunRaj]

Was the information useful Trystan_Colwyn?

[Trystan_Colwyn-]

Thanks @VaniBhemarasetty 

Appreciate the response however looking for a custom code method... using an extension such as this can feel risky as I'm not aware whether its maintained 

[VaniBhemarasetty]

@Trystan_Colwyn- Sure, however you can always reach out to Adobe Exchange team to get more details on this extension, so that all your queries on this extension can be cleared.

Regards

Vani

[sayyam_6772]

Hello @VaniBhemarasetty ,

I have a query regarding the use of the Web Vitals extension. Have any of you had experience with it? If so, could you kindly share insights on its implementation while minimizing the impact on our website's bounce rate?

Your expertise would be greatly appreciated.

Thank you,
Sayyam

[Gokul_Agiwal]

Hi @Trystan_Colwyn-  

Yes, we can do.  As you're looking for custom code method then there is option that you can explore. 

As per recommendation made by Google on below link to use as npm package however you can also make a use of CDN  https://github.com/GoogleChrome/web-vitals#load-web-vitals-from-a-cdn  and load a Standard version of script in Adobe Launch custom code action. 

You can able to see the all metrics logged into console. Once you have the result you can send this to analytics endpoint, using Beacon API or Adobe Analytics API GitHub - AdobeDocs/analytics-2.0-apis: Documentation for the Adobe Analytics 2.0 APIs. 

Hope this helps !!! 

[Pankaj_Sabharwal]

Track your web pages’ Web Vitals with this extension to optimize your website’s user experience quality.

Normally, you will need your developers to implement Web Vitals into the  web pages, or you could add your own Custom Code in Launch to measure Web Vitals. With this extension, you can avoid all development work and still measure Web Vitals fairly well.

Install the extension, and you’ll be able to track Web Vitals on all of your web pages, without any Custom Code at all.

This extension provides Event types that map to each Web Vital measurement:

- Cumulative Layout Shift (CLS)

- First Input Delay (FID)

- First Contentful Paint (FCP)

- Largest Contentful Paint (LCP)

- Time to First Byte (TTFB)

And there are Data Element types to obtain metric data with each measurement:

- ID

- Name

- Value

- Delta

[danaluhova]

Hey Pankaj,

Could you please specify which additional variables (eVars/Props/Success events) need to be created and added to rules in Adobe Launch in order to have Web Vitals data in Adobe Analytics on the dashboard level?

Thank you!

[Pankaj_Sabharwal]

Hi @danaluhova 

Apologies for the late reply. 

You can create a rule that contains custom code and then create the data elements for the same. Corresponding evars and events should be created.

console.group(event.$rule.name);

console.log(event);

console.group('Metric ID: ' + _satellite.getVar('Web Vitals ID', event));

console.log('Metric name: ' + _satellite.getVar('Web Vitals full name', event) + ' (' + _satellite.getVar('Web Vitals name', event) + ')');

console.log('Metric value: ' + _satellite.getVar('Web Vitals value', event) + ', delta: ' + _satellite.getVar('Web Vitals delta', event));

console.groupEnd();

console.groupEnd();

To get detailed information about this. Check out this thread, it will help you

https://experienceleaguecommunities.adobe.com/t5/adobe-analytics-questions/once-the-web-vitals-exten...

Thanks