report web-vitals to GA

components/layout/web-vitals-tracking.js

@@ -0,0 +1,18 @@
+import useReportWebVitals from "hooks/use-report-web-vitals";
+import { logEvent } from "utils/analytics";
+
+function sendToGTM({name, delta, value, id}) {
+  logEvent('web_vitals', {
+    cwv_metric: name,
+    cwv_id: id,
+    cw_value: delta,
+    cwv_metric_value: value,
+    cwv_metric_delta: delta,
+  });
+}
+
+export function WebVitalsTracking() {
+  useReportWebVitals(sendToGTM);
+
+  return null;
+}

hooks/use-report-web-vitals.js

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+import {
+  onLCP,
+  onFID,
+  onCLS,
+  onINP,
+  onFCP,
+  onTTFB
+} from 'next/dist/compiled/web-vitals'
+
+// taken from newer nextjs version as 12 does not have it
+export default function useReportWebVitals(reportWebVitalsFn) {
+  useEffect(() => {
+    onCLS(reportWebVitalsFn)
+    onFID(reportWebVitalsFn)
+    onLCP(reportWebVitalsFn)
+    onINP(reportWebVitalsFn)
+    onFCP(reportWebVitalsFn)
+    onTTFB(reportWebVitalsFn)
+  }, [reportWebVitalsFn])
+}

pages/_app.js

@@ -32,6 +32,7 @@ import 'dayjs/locale/vi';
 import 'dayjs/locale/zh-cn';
 
 import 'css/index.scss';
+import { WebVitalsTracking } from '~/components/layout/web-vitals-tracking';
 
 const reducer = combineReducers({
   ...reducers
@@ -164,6 +165,7 @@ class MyApp extends App {
       >
         <Provider store={store}>
           <>
+            <WebVitalsTracking />
             <GoogleTagManager />
             <PageViewTracking />
             <Component {...pageProps} language={language} />