feat: send web vitals metrics to GA (#435)

Author: dgaponov

package-lock.json

@@ -53,6 +53,7 @@
     "unist-util-visit": "^4.1.2",
     "url": "^0.11.0",
     "uuid": "^10.0.0",
+    "web-vitals": "^5.1.0",
     "yaml": "^2.8.0"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,48 @@
+import {useEffect} from 'react';
+import {type Metric, onCLS, onFCP, onINP, onLCP, onTTFB} from 'web-vitals';
+
+import {IS_PRODUCTION} from '../constants';
+
+declare global {
+    interface Window {
+        dataLayer?: any[];
+    }
+}
+
+const sendToGoogleAnalytics = (metric: Metric) => {
+    if (typeof window !== 'undefined') {
+        if (!IS_PRODUCTION) {
+            console.info(`[Web Vitals] ${metric.name}: ${metric.value}`);
+            return;
+        }
+
+        if (window.dataLayer) {
+            window.dataLayer = window.dataLayer || [];
+            window.dataLayer.push({
+                event: 'web-vitals',
+                event_category: 'Web Vitals',
+                event_action: metric.name,
+                event_label: metric.id,
+                event_value: metric.value,
+                non_interaction: true,
+            });
+        }
+    }
+};
+
+const reportWebVitals = (): void => {
+    // Core Web Vitals
+    onCLS((data) => sendToGoogleAnalytics(data));
+    onLCP((data) => sendToGoogleAnalytics(data));
+
+    // Others metriks
+    onINP((data) => sendToGoogleAnalytics(data));
+    onFCP((data) => sendToGoogleAnalytics(data));
+    onTTFB((data) => sendToGoogleAnalytics(data));
+};
+
+export const useReportWebVitals = () => {
+    return useEffect(() => {
+        reportWebVitals();
+    }, []);
+};

src/hooks/useReportWebVitals.tsx

@@ -4,6 +4,7 @@ import {NextComponentType} from 'next';
 import {appWithTranslation} from 'next-i18next';
 import 'prismjs/themes/prism-tomorrow.min.css';
 
+import {useReportWebVitals} from '../hooks/useReportWebVitals';
 import '../styles.scss';
 import '../vendors.scss';
 
@@ -14,6 +15,7 @@ export const App = ({
     Component: NextComponentType;
     pageProps: Record<string, unknown>;
 }) => {
+    useReportWebVitals();
     return <Component {...pageProps} />;
 };