feat: report web-vitals to ga (#2363)

package.json

@@ -119,6 +119,7 @@
     "ua-parser-js": "^0.7.28",
     "use-count-up": "^2.2.5",
     "wcag-contrast": "^3.0.0",
+    "web-vitals": "^2.1.0",
     "workbox-core": "^6.1.0",
     "workbox-precaching": "^6.1.0",
     "workbox-routing": "^6.1.0"

src/components/analytics/GoogleAnalyticsReporter.tsx

 import { useEffect } from 'react'
 import ReactGA from 'react-ga'
+import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 import { RouteComponentProps } from 'react-router-dom'
 
-// fires a GA pageview every time the route changes
+function reportWebVitals({ name, delta, id }: Metric) {
+  ReactGA.timing({
+    category: 'Web Vitals',
+    variable: name,
+    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
+    label: id,
+  })
+}
+
+// tracks web vitals and pageviews
 export default function GoogleAnalyticsReporter({ location: { pathname, search } }: RouteComponentProps): null {
+  useEffect(() => {
+    getFCP(reportWebVitals)
+    getFID(reportWebVitals)
+    getLCP(reportWebVitals)
+    getCLS(reportWebVitals)
+  }, [])
+
   useEffect(() => {
     ReactGA.pageview(`${pathname}${search}`)
   }, [pathname, search])

yarn.lock

@@ -19225,6 +19225,11 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-vitals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.0.tgz#ebf5428875ab5bfc1056c2e80cd177001287de7b"
+  integrity sha512-npEyJP8jHf3J71t1tRTEtz9FeKp8H2udWJUUq5ykfPhhstr//TUxiYhIEzLNwk4zv2ybAilMn7v7N6Mxmuitmg==
+
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"