From 78de0496c39486cd1d09f882a8c56807a7837394 Mon Sep 17 00:00:00 2001
From: louis-md <louis@margot-duclot.fr>
Date: Fri, 31 May 2024 15:03:53 +0200
Subject: [PATCH] Fix sending events to GA (#490)

* Replace ReactGA by Next GTM

* Regenerate API Docs

* Fix typo in GTM event
---
 components/ApiReference/mainnet-swagger.json | 22 +++++-----
 components/Feedback/index.tsx                | 21 +++++----
 package.json                                 |  1 -
 pages/_app.tsx                               | 45 ++------------------
 pnpm-lock.yaml                               |  7 ---
 5 files changed, 27 insertions(+), 69 deletions(-)

diff --git a/components/ApiReference/mainnet-swagger.json b/components/ApiReference/mainnet-swagger.json
index c017ee4c..3728e556 100644
--- a/components/ApiReference/mainnet-swagger.json
+++ b/components/ApiReference/mainnet-swagger.json
@@ -3564,7 +3564,7 @@
           "title": "Uuid",
           "type": "string",
           "format": "uuid",
-          "default": "e7f6dea2-82e3-4b35-b76f-f02bdd35b969"
+          "default": "f9288c31-2ceb-42ae-86fb-f5b316314421"
         },
         "safes": {
           "type": "array",
@@ -3633,7 +3633,7 @@
           "title": "Uuid",
           "type": "string",
           "format": "uuid",
-          "default": "8de67837-e904-4ed5-954d-d8bf08a9f475"
+          "default": "ba199065-f3e4-4ffd-a7a3-1fc7f4a1d2e2"
         },
         "safes": {
           "type": "array",
@@ -3719,7 +3719,7 @@
         "nonce",
         "initCode",
         "callData",
-        "callDataGasLimit",
+        "callGasLimit",
         "verificationGasLimit",
         "preVerificationGas",
         "maxFeePerGas",
@@ -3758,8 +3758,8 @@
           "type": "string",
           "x-nullable": true
         },
-        "callDataGasLimit": {
-          "title": "Call data gas limit",
+        "callGasLimit": {
+          "title": "Call gas limit",
           "type": "integer",
           "minimum": 0
         },
@@ -4492,7 +4492,7 @@
         "nonce",
         "initCode",
         "callData",
-        "callDataGasLimit",
+        "callGasLimit",
         "verificationGasLimit",
         "preVerificationGas",
         "maxFeePerGas",
@@ -4531,8 +4531,8 @@
           "type": "string",
           "x-nullable": true
         },
-        "callDataGasLimit": {
-          "title": "Call data gas limit",
+        "callGasLimit": {
+          "title": "Call gas limit",
           "type": "integer",
           "minimum": 0
         },
@@ -4811,7 +4811,7 @@
         "nonce",
         "initCode",
         "callData",
-        "callDataGasLimit",
+        "callGasLimit",
         "verificationGasLimit",
         "preVerificationGas",
         "maxFeePerGas",
@@ -4840,8 +4840,8 @@
           "type": "string",
           "x-nullable": true
         },
-        "callDataGasLimit": {
-          "title": "Call data gas limit",
+        "callGasLimit": {
+          "title": "Call gas limit",
           "type": "integer",
           "minimum": 0
         },
diff --git a/components/Feedback/index.tsx b/components/Feedback/index.tsx
index 4eb1db0c..5ab6155a 100644
--- a/components/Feedback/index.tsx
+++ b/components/Feedback/index.tsx
@@ -10,7 +10,7 @@ import {
 } from '@mui/material'
 import AddIcon from '@mui/icons-material/Add'
 import NextLink from 'next/link'
-import ReactGA from 'react-ga4'
+import { sendGTMEvent } from '@next/third-parties/google'
 
 import FeedbackGood from '../../assets/svg/feedback-good.svg'
 import FeedbackBad from '../../assets/svg/feedback-bad.svg'
@@ -25,9 +25,7 @@ const ReportIssue: React.FC<{ small?: boolean }> = ({ small = false }) => (
   >
     <Button
       onClick={() => {
-        ReactGA.event('issue', {
-          path: window.location.pathname
-        })
+        sendGTMEvent({ event: 'issue', path: window.location.pathname })
       }}
       size={small ? 'small' : undefined}
       sx={{
@@ -60,7 +58,8 @@ const Feedback: React.FC<{
 
   const handleSubmit = (): void => {
     setLoading(true)
-    ReactGA.event('feedback', {
+    sendGTMEvent({
+      event: 'feedback',
       path:
         window.location.pathname +
         (asPath?.includes('/api-reference') === true ? network : ''),
@@ -228,7 +227,8 @@ const Feedback: React.FC<{
                     }}
                     size={small ? 'small' : undefined}
                     onClick={() => {
-                      ReactGA.event('feedback', {
+                      sendGTMEvent({
+                        event: 'feedback',
                         path: window.location.pathname,
                         positive: true
                       })
@@ -247,7 +247,8 @@ const Feedback: React.FC<{
                     }}
                     size={small ? 'small' : undefined}
                     onClick={() => {
-                      ReactGA.event('feedback', {
+                      sendGTMEvent({
+                        event: 'feedback',
                         path: window.location.pathname,
                         positive: false
                       })
@@ -279,7 +280,8 @@ const Feedback: React.FC<{
                         }
                       }}
                       onClick={() => {
-                        ReactGA.event('feedback', {
+                        sendGTMEvent({
+                          event: 'feedback',
                           path: window.location.pathname,
                           positive: true
                         })
@@ -303,7 +305,8 @@ const Feedback: React.FC<{
                         }
                       }}
                       onClick={() => {
-                        ReactGA.event('feedback', {
+                        sendGTMEvent({
+                          event: 'feedback',
                           path: window.location.pathname,
                           positive: false
                         })
diff --git a/package.json b/package.json
index e00687c0..bb4174c8 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "node-fetch": "^3.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-ga4": "^2.1.0",
     "release-it": "^17.3.0",
     "remark-gfm": "^4.0.0",
     "shelljs": "^0.8.5",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index ec547539..9df53fba 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,17 +7,13 @@ import {
   experimental_extendTheme as extendMuiTheme
 } from '@mui/material/styles'
 import type { AppProps } from 'next/app'
-import { useEffect, type ReactElement } from 'react'
+import { type ReactElement } from 'react'
 import Head from 'next/head'
-import ReactGA from 'react-ga4'
 import { GoogleTagManager } from '@next/third-parties/google'
 
 import MetaTags from '../components/MetaTags'
 import { CookieBanner } from '../components/CookieBanner'
-import {
-  CookieBannerContextProvider,
-  useCookieBannerContext
-} from '../components/CookieBanner/CookieBannerContext'
+import { CookieBannerContextProvider } from '../components/CookieBanner/CookieBannerContext'
 import { createEmotionCache } from '../styles/emotion'
 import '../styles/styles.css'
 import '@code-hike/mdx/dist/index.css'
@@ -29,38 +25,6 @@ const clientSideEmotionCache = createEmotionCache()
 // Extended theme for CssVarsProvider
 const cssVarsTheme = extendMuiTheme(theme as CssVarsThemeOptions)
 
-let isAnalyticsInitialized = false
-
-const GoogleAnalytics: React.FC = () => {
-  const { isAnalyticsEnabled } = useCookieBannerContext()
-
-  // Enable/disable tracking
-  useEffect(() => {
-    if (
-      process.env.NEXT_PUBLIC_IS_PRODUCTION === 'true' &&
-      isAnalyticsEnabled
-    ) {
-      ReactGA.initialize(
-        String(process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID),
-        {
-          gaOptions: {
-            cookieFlags: 'SameSite=Strict;Secure',
-            cookieDomain: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_DOMAIN
-          }
-        }
-      )
-      isAnalyticsInitialized = true
-      return
-    }
-
-    if (!isAnalyticsEnabled && isAnalyticsInitialized) {
-      // Injected script will otherwise remain in memory until new session
-      location.reload()
-    }
-  }, [isAnalyticsEnabled])
-  return null
-}
-
 const App = ({
   Component,
   pageProps,
@@ -74,13 +38,12 @@ const App = ({
       <MetaTags path={router.asPath} />
     </Head>
     <GoogleTagManager
-        gtmId={String(process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID)}
-      />
+      gtmId={String(process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID)}
+    />
     <CacheProvider value={emotionCache}>
       <CssVarsProvider theme={cssVarsTheme}>
         <CookieBannerContextProvider>
           <CssBaseline />
-          <GoogleAnalytics />
           <Component {...pageProps} />
           <CookieBanner />
         </CookieBannerContextProvider>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 85ad9201..939cd59a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,9 +53,6 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
-  react-ga4:
-    specifier: ^2.1.0
-    version: 2.1.0
   release-it:
     specifier: ^17.3.0
     version: 17.3.0(typescript@5.4.2)
@@ -9088,10 +9085,6 @@ packages:
       scheduler: 0.23.0
     dev: false
 
-  /react-ga4@2.1.0:
-    resolution: {integrity: sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==}
-    dev: false
-
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}