report web-vitals to GA

wri · Nov 25, 2024 · 41a2685 · 41a2685
1 parent 258d414
commit 41a2685
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
diff --git a/components/layout/web-vitals-tracking.js b/components/layout/web-vitals-tracking.js
@@ -0,0 +1,18 @@
+import useReportWebVitals from "hooks/use-report-web-vitals";
+
+function sendToGoogleAnalytics({name, delta, value, id}) {
+  gtag('event', name, {
+    // Built-in params:
+    value: delta, // Use `delta` so the value can be summed.
+    // Custom params:
+    metric_id: id, // Needed to aggregate events.
+    metric_value: value,
+    metric_delta: delta,
+  });
+}
+
+export function WebVitalsTracking() {
+  useReportWebVitals(sendToGoogleAnalytics);
+
+  return null;
+}
diff --git a/hooks/use-report-web-vitals.js b/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])
+}
diff --git a/pages/_app.js b/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} />

diff --git a/pages/_document.js b/pages/_document.js
@@ -17,7 +17,16 @@ class MyDocument extends Document {
   render() {
     return (
       <Html lang={this.props.language}>
-        <Head />
+        <Head>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                  window.dataLayer = window.dataLayer || [];
+                  function gtag(){dataLayer.push(arguments);}
+              `
+            }}
+          />
+        </Head>
         <body>
           {process.env.OSANO_ID && <Script src={`https://cmp.osano.com/${process.env.OSANO_ID}/osano.js`} strategy="beforeInteractive" />}
           <GoogleTagManager noscript />