Implementing WebVitals script to get page performance

[ksugam]

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]

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

[ksugam]

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.

[bmaggard]

Would you be willing to share more about your implementation.  

[ksugam]

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