Merge pull request #260 from yoonghan/develop

More webvital comparison

backstop_data/engine_scripts/cookies.json

@@ -1,7 +1,7 @@
 [
   {
     "path": "/",
-    "name": "termsRead",
+    "name": "termsGranted",
     "value": "true",
     "expirationDate": 1798790400,
     "hostOnly": false,

src/__tests__/mocks/walcron-microfrontend-shared.ts

@@ -3,9 +3,10 @@ jest.mock("@yoonghan/walcron-microfrontend-shared", () => {
     __esModule: true,
     reportWebVitals: (callback: any) => {
       callback({
-        name: "CLP",
+        name: "CLS",
         delta: 1,
         id: "test",
+        value: 2,
       })
     },
   }

src/components/GoogleAnalytic/ClientCookie/ClientCookie.jest.test.tsx

@@ -5,7 +5,7 @@ import { site } from "@/config/site"
 import ReactGA from "react-ga4"
 
 describe("Client Cookie", () => {
-  const expectedCookieValue = "termsRead=true;secure;path=/;SameSite=Lax"
+  const expectedCookieValue = "termsGranted=true;secure;path=/;SameSite=Lax"
 
   beforeAll(() => {
     //allow cookie to be re-written

src/components/GoogleAnalytic/ClientCookie/index.tsx

@@ -13,7 +13,7 @@ import Image from "next/image"
 import ReactGA from "react-ga4"
 
 const cookiePrivacy = "https://policies.google.com/technologies/cookies"
-const cookieName = "termsRead"
+const cookieName = "termsGranted"
 
 type Props = { ga4Id: string }
 
@@ -31,7 +31,7 @@ function ClientCookie({ ga4Id }: Props) {
     document.cookie = `${cookieName}=true;secure;path=/;SameSite=Lax`
     setCookieRead(true)
     acceptGAConsent()
-  }, [])
+  }, [acceptGAConsent])
 
   useEffect(() => {
     function getCookie(cname: string) {

src/components/GoogleAnalytic/GoogleAnalytic.jest.test.tsx

@@ -8,15 +8,24 @@ describe("Google Analytic", () => {
     const gaValue = "123"
     const initializeMock = jest.fn()
     const eventMock = jest.fn()
+    const gtagMock = jest.fn()
     jest.spyOn(ReactGA, "initialize").mockImplementation(initializeMock)
     jest.spyOn(ReactGA, "event").mockImplementation(eventMock)
+    jest.spyOn(ReactGA, "gtag").mockImplementation(gtagMock)
 
     render(<GoogleAnalytic ga4Id={gaValue} />)
     expect(initializeMock).toHaveBeenCalledWith(gaValue)
     expect(eventMock).toHaveBeenCalledWith("web_vitals", {
-      cwv_metric: "CLP",
+      cwv_metric: "CLS",
       cwv_value: 1,
       cwv_id: "test",
     })
+    //first needs to be consent
+    expect(gtagMock).toHaveBeenNthCalledWith(2, "event", "CLS", {
+      metric_delta: 1,
+      metric_id: "test",
+      metric_value: 2,
+      value: 1,
+    })
   })
 })

src/components/GoogleAnalytic/index.tsx

@@ -13,13 +13,20 @@ export function GoogleAnalytic({ ga4Id }: Props) {
   ReactGA.initialize(ga4Id)
 
   //https://pilotdigital.com/blog/how-to-monitor-core-web-vitals-in-google-analytics/
+  //https://github.com/google-marketing-solutions/web-vitals-gtm-template
   useEffect(() => {
-    reportWebVitals(({ name, delta, id }) => {
+    reportWebVitals(({ name, delta, id, value }) => {
       ReactGA.event("web_vitals", {
         cwv_metric: name,
         cwv_value: delta,
         cwv_id: id,
       })
+      ReactGA.gtag("event", name, {
+        value: delta,
+        metric_id: id,
+        metric_value: value,
+        metric_delta: delta,
+      })
     })
   }, [])