Fix sending events to GA (#490)

* Replace ReactGA by Next GTM * Regenerate API Docs * Fix typo in GTM event
safe-global · May 31, 2024 · 78de049 · 78de049
1 parent 3e99e9f
commit 78de049
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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