Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adding Core Web Vitals into Adobe Analytics

Avatar

Level 2

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 !

1 Reply

Avatar

Employee Advisor

@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

Avatar

Level 2

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 

Avatar

Employee Advisor

@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

Avatar

Community Advisor

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 !!! 

 

Avatar

Level 3

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

PankajS_Grazitti_1-1637648922882.png

 

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

Avatar

Level 1

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!

Avatar

Level 3

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