Juan R Labrada

Note Details
OVERLINE
How to integrate Core Web Vitals in your analytics in your web page.

Different ways of implementing Core Web Vitals

https://github.com/GoogleChrome/web-vitals#usage
https://www.simoahava.com/analytics/track-core-web-vitals-in-ga4-with-google-tag-manager/
https://web.dev/lcp/

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
Rate this note
Comment
Comments
Back to Notes