Merge pull request #1410 from scroll-tech/next-google-ga4

Next google ga4

Author: zzq0826

package.json

@@ -24,6 +24,7 @@
     "@mui/lab": "^5.0.0-alpha.108",
     "@mui/material": "^5.13.5",
     "@mui/material-nextjs": "^5.15.5",
+    "@next/third-parties": "^15.1.5",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@sentry/nextjs": "^7.95.0",
     "@tanstack/react-query": "^5.55.3",
@@ -46,7 +47,6 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.5",
-    "react-ga4": "^2.1.0",
     "react-mailchimp-subscribe": "^2.1.3",
     "react-markdown": "^8.0.3",
     "react-use": "^17.4.0",

src/app/developer-nft/coming-soon/CheckElegbility/index.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react"
-import ReactGA from "react-ga4"
 
 import { Collapse, Stack, Typography } from "@mui/material"
 
@@ -41,9 +40,6 @@ const CheckElegbility = () => {
         } else {
           setIsEligible(-1)
         }
-        ReactGA.event("check_eligibility", {
-          contractsNumber: items.length,
-        })
       })
       .catch(() => {
         setIsEligible(-2)

src/app/developer-nft/mint/flow/FinalStep.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from "react"
-import ReactGA from "react-ga4"
 import { useSwiperSlide } from "swiper/react"
 
 import { Container, Stack, SvgIcon, Typography } from "@mui/material"
@@ -59,12 +58,6 @@ const FinalStep = () => {
     changeIsEligible(0)
   }
 
-  const handleShare = () => {
-    ReactGA.event("share_twitter", {
-      tokenId,
-    })
-  }
-
   return (
     <Container sx={{ pt: ["2.4rem", "4rem"], pb: ["8rem", "14rem"] }}>
       <Stack alignItems="center" spacing="1.6rem">
@@ -84,7 +77,7 @@ const FinalStep = () => {
           <Button color="primary" onClick={handleGoShow}>
             Done
           </Button>
-          <Button color="secondary" href={shareTwitterURL} target="_blank" rel="noopener noreferrer" onClick={handleShare}>
+          <Button color="secondary" href={shareTwitterURL} target="_blank" rel="noopener noreferrer">
             Share to <SvgIcon sx={{ fontSize: ["1.2rem", "1.6rem"], ml: "6px" }} component={TwitterSvg} inheritViewBox></SvgIcon>
           </Button>
         </Stack>

src/app/developer-nft/mint/home/MyNFT.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from "react"
-import ReactGA from "react-ga4"
 
 import { Box, Stack, SvgIcon, Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
@@ -86,11 +85,7 @@ const MyNFT = props => {
     setErrorMessage("")
   }
 
-  const handleShare = () => {
-    ReactGA.event("share_twitter", {
-      tokenId,
-    })
-  }
+  const handleShare = () => {}
 
   return (
     <Box

src/app/developer-nft/mint/home/ReadyToMint.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react"
 import Countdown, { zeroPad } from "react-countdown"
-import ReactGA from "react-ga4"
 
 import { Box, Stack, Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
@@ -44,16 +43,8 @@ const MintHome = props => {
       .then(data => {
         if (data.proof) {
           changeIsEligible(1)
-          ReactGA.event("mint_now", {
-            walletAddress: walletCurrentAddress,
-            isEligible: 1,
-          })
         } else if (!data.error) {
           changeIsEligible(-1)
-          ReactGA.event("mint_now", {
-            walletAddress: walletCurrentAddress,
-            isEligible: -1,
-          })
         } else {
           throw new Error("Netword error, try again later")
         }

src/app/layout.tsx

@@ -1,10 +1,11 @@
+import { GoogleAnalytics } from "@next/third-parties/google"
 import { Metadata } from "next"
 import React, { Suspense } from "react"
 
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter"
 
 import GlobalComponents from "@/components/GlobalComponents"
-import GoogleAnalytics from "@/components/GoogleAnalytics"
+// import GoogleAnalytics from "@/components/GoogleAnalytics"
 import ScrollToTop from "@/components/ScrollToTop"
 import WebVitals from "@/components/WebVitals"
 // import SentrySetting from "@/components/SentrySetting"
@@ -44,7 +45,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         {process.env.NODE_ENV === "production" && (
           <>
             <Suspense fallback={null}>
-              <GoogleAnalytics></GoogleAnalytics>
+              <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID} />
             </Suspense>
             <WebVitals></WebVitals>
             {/* <SentrySetting></SentrySetting> */}

src/components/GoogleAnalytics/index.tsx

@@ -1,4 +1,4 @@
-import ReactGA from "react-ga4"
+import { sendGAEvent } from "@next/third-parties/google"
 
 import { Box, Stack, SvgIcon, Typography } from "@mui/material"
 import { CSSObject, Theme, styled } from "@mui/material/styles"
@@ -48,7 +48,7 @@ const SubmenuLinkContent = ({ icon, label, text, isExternal }: { icon: any; labe
   const { isDesktop } = useCheckViewport()
 
   const handleClick = () => {
-    ReactGA.event("click_menu", {
+    sendGAEvent("event", "click_menu", {
       label: text || label,
       device: isDesktop ? "desktop" : "mobile",
     })

src/components/Header/SubmenuLink.tsx

@@ -1,6 +1,6 @@
 // import { default as NavLink } from "next/link"
+import { sendGAEvent } from "@next/third-parties/google"
 import React, { useState } from "react"
-import ReactGA from "react-ga4"
 import { useStyles } from "tss-react/mui"
 
 import { Box, Container, Fade, Link, Popper, Stack, SvgIcon, Typography } from "@mui/material"
@@ -255,12 +255,12 @@ const DesktopHeader = ({ currentMenu }) => {
           end={item.end}
           key={item.key}
           reloadDocument={item.reload}
-          onClick={() =>
-            ReactGA.event("click_menu", {
+          onClick={() => {
+            sendGAEvent("event", "click_menu", {
               label: item.label,
               device: "desktop",
             })
-          }
+          }}
         >
           {item.label}
         </LinkStyledButton>

src/components/Header/desktop_header.tsx

@@ -1,5 +1,5 @@
+import { sendGAEvent } from "@next/third-parties/google"
 import React, { useEffect, useState } from "react"
-import ReactGA from "react-ga4"
 import { useStyles } from "tss-react/mui"
 
 import { ExpandMore } from "@mui/icons-material"
@@ -176,7 +176,7 @@ const MobileHeader = ({ currentMenu }) => {
                 className={cx(currentMenu.includes(item.key) && "active")}
                 reloadDocument={item.reload}
                 onClick={() =>
-                  ReactGA.event("click_menu", {
+                  sendGAEvent("event", "click_menu", {
                     label: item.label,
                     device: "mobile",
                   })