Implementing WebVitals script to get page performance

Silver Contributor
Silver Contributor

Hello,

Has anyone tried implementing webVitals mentioned here-

https://github.com/GoogleChrome/web-vitals

I tried the easier option of implementing the CDN script hosted here- https://unpkg.com/web-vitals@0.2.2/dist/web-vitals.es5.umd.min.js

But I feel there is a timing issue and hence the data isn't getting stored in a UDO variable. The approach mentioned in the link for GTM works perfectly fine.

ksugam
4 REPLIES 4

Implementing WebVitals script to get page performance

Silver Contributor
Silver Contributor

Has anybody not worked on web vitals? Please let me know

ksugam

Implementing WebVitals script to get page performance

Silver Contributor
Silver Contributor

I have finally got this working. Since the webvitals data isn't available directly on page load, I capture each data point in localstorage. When user navigates to next page, I collect all data points into one and send it to analytics during the next page call.

ksugam

Implementing WebVitals script to get page performance

Bronze Contributor
Bronze Contributor

Would you be willing to share more about your implementation.  

Implementing WebVitals script to get page performance

Silver Contributor
Silver Contributor

Hello @bmaggard 

My solution is broken into below steps-

1. Added Web Vitals script as a generic tag to include https://unpkg.com/web-vitals@0.2.2/dist/web-vitals.es5.umd.min.js script

2. On the above tag scoped extension, I called the 3 functions- 

webVitals.getFID(capturedata);
webVitals.getLCP(capturedata);
webVitals.getCLS(capturedata);

and stored it in localStorage as 

function capturedata(name, delta) {
localStorage.setItem(name.name,Math.round((name.delta + Number.EPSILON) * 100) / 100)
}

3. Preloader extension to read FID, LCP and CLS from previous page and send it with the current page

The data sent to Analytics will be of the previous page. It will work best if you have a previous page dimension as well

ksugam
Public