Adding Core Web Vitals into Adobe Analytics | Community
Skip to main content
T
Trystan_Colwyn-
Level 2
September 7, 2021
Solved

Adding Core Web Vitals into Adobe Analytics

  • September 7, 2021
  • 3 replies
  • 5834 views

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 !

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by VaniBhemarasetty

@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

3 replies

VaniBhemarasetty
Adobe Employee
VaniBhemarasettyAdobe EmployeeAccepted solution
Adobe Employee
September 8, 2021

@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
Community Advisor and Adobe Champion
PratheepArunRajCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
September 8, 2021

Was the information useful Trystan_Colwyn?

Thank You, Pratheep Arun Raj B (Arun) | Xerago | Terryn Winter Analytics
Gokul_Agiwal
Community Advisor
Gokul_AgiwalCommunity Advisor
Community Advisor
September 13, 2021

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

 

    P
    Pankaj_Sabharwal
    Level 5
    November 23, 2021

    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

    D
    danaluhova
    February 22, 2022

    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!

    P
    Pankaj_Sabharwal
    Level 5
    February 25, 2022

    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-extension-is-installed-data-elements-are/td-p/436948



    Thanks

    Terms & ConditionsAccessibility statement

    Loading footer...