From 2dfc8bee178d56c71959a16d2a4d0c3d18ad7038 Mon Sep 17 00:00:00 2001
From: Tim Hostetler <6970899+thostetler@users.noreply.github.com>
Date: Thu, 2 Nov 2023 16:16:16 -0400
Subject: [PATCH] add web vitals call

---
 next.config.js     |  2 +-
 src/pages/_app.tsx | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/next.config.js b/next.config.js
index f1792d850..7f62b2df5 100644
--- 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
index 9c7297ffc..82064a69c 100644
--- 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;