add web vitals call

adsabs · Nov 7, 2023 · 5093a39 · 5093a39
1 parent 893cec4
commit 5093a39
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/next.config.js b/next.config.js
@@ -9,7 +9,7 @@ const config = {
   distDir: process.env.DIST_DIR || 'dist',
   poweredByHeader: false,
   reactStrictMode: true,
-  experimental: { newNextLinkBehavior: false },
+  experimental: { newNextLinkBehavior: false, webVitalsAttribution: ['CLS', 'LCP'] },
   async rewrites() {
     if (process.env.NODE_ENV !== 'production') {
       return {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -6,7 +6,7 @@ import { MathJaxProvider } from '@mathjax';
 import { AppState, StoreProvider, useCreateStore, useStore, useStoreApi } from '@store';
 import { theme } from '@theme';
 import { Theme } from '@types';
-import { AppProps } from 'next/app';
+import { AppProps, NextWebVitalsMetric } from 'next/app';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import 'nprogress/nprogress.css';
@@ -20,7 +20,7 @@ import { isNilOrEmpty, notEqual } from 'ramda-adjunct';
 import { useUser } from '@lib/useUser';
 import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import '../styles/styles.css';
-import { GTMProvider } from '@elgorditosalsero/react-gtm-hook';
+import { GTMProvider, sendToGTM } from '@elgorditosalsero/react-gtm-hook';
 
 if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled' && process.env.NODE_ENV !== 'production') {
   require('../mocks');
@@ -56,7 +56,7 @@ const Providers: FC<{ pageProps: AppPageProps }> = ({ children, pageProps }) =>
   const createStore = useCreateStore(pageProps.dehydratedAppState ?? {});
 
   return (
-    <GTMProvider state={{ id: process.env.NEXT_PUBLIC_GTM_ID }}>
+    <GTMProvider state={{ id: process.env.NEXT_PUBLIC_GTM_ID, dataLayerName: 'nectar_gtm_datalayer' }}>
       <GoogleReCaptchaProvider reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY ?? ''}>
         <MathJaxProvider>
           <ChakraProvider theme={theme}>
@@ -140,4 +140,21 @@ const UserSync = (): ReactElement => {
   return <></>;
 };
 
+export const reportWebVitals = (metric: NextWebVitalsMetric) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.log(`Web Vitals: ${metric.name} [${metric.value} ms]`);
+  }
+
+  sendToGTM({
+    dataLayerName: 'nectar_gtm_datalayer',
+    data: {
+      event: 'web_vitals',
+      web_vitals_name: metric.name,
+      web_vitals_value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
+      web_vitals_label: metric.id,
+      non_interaction: true,
+    },
+  });
+};
+
 export default NectarApp;