push web vitals to google analytics

Author: damianperera

frontend/package.json

@@ -9,6 +9,7 @@
     "@types/react-dom": "^18.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-hotkeys-hook": "^4.5.0",
     "react-router-dom": "^6.22.1",
     "react-select": "^5.8.0",

frontend/src/index.tsx

@@ -4,6 +4,8 @@ import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 import { BrowserRouter } from 'react-router-dom'
+import { Metric } from 'web-vitals'
+import ReactGA from 'react-ga4'
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -16,7 +18,30 @@ root.render(
 	</React.StrictMode>
 )
 
+ReactGA.initialize([
+	{
+		trackingId: 'G-XEN77GP035'
+	}
+])
+
+const getEventValueFromMetric = (metric: Metric) => {
+	if (metric.name === 'CLS') {
+		return Math.round(metric.value * 1000)
+	}
+	return Math.round(metric.value)
+}
+ 
+const reportHandler = (metric: Metric) => {
+	ReactGA.event({
+		category: 'Web Vitals',
+		action: metric.name,
+		value: getEventValueFromMetric(metric),
+		label: metric.id,
+		nonInteraction: true
+	})
+}
+
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
+reportWebVitals(reportHandler)

frontend/yarn.lock

@@ -8689,6 +8689,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-ga4@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
+  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
+
 react-hotkeys-hook@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz#807b389b15256daf6a813a1ec09e6698064fe97f"