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",
                   })

src/components/Header/mobile_header.tsx

@@ -1,11 +1,11 @@
 "use client"
 
+import { sendGAEvent } from "@next/third-parties/google"
 import { useReportWebVitals } from "next/web-vitals"
-import ReactGA from "react-ga4"
 
 const WebVitals = () => {
   useReportWebVitals(metric => {
-    ReactGA.event(metric.name, {
+    sendGAEvent("event", metric.name, {
       value: Math.round(metric.name === "CLS" ? metric.value * 1000 : metric.value), // values must be integers
       event_label: metric.id, // id unique to current page load
       non_interaction: true, // avoids affecting bounce rate.

src/components/WebVitals/index.tsx

@@ -1,10 +1,11 @@
 "use client"
 
+import { sendGAEvent } from "@next/third-parties/google"
 import { RainbowKitProvider, getDefaultConfig, useConnectModal } from "@rainbow-me/rainbowkit"
 import "@rainbow-me/rainbowkit/styles.css"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { BrowserProvider } from "ethers"
-import { createContext, useCallback, useContext, useMemo } from "react"
+import { createContext, useCallback, useContext, useEffect, useMemo } from "react"
 import { type Config, WagmiProvider, useAccount, useConnectorClient, useDisconnect } from "wagmi"
 
 import { configs } from "./configs"
@@ -51,10 +52,17 @@ const RainbowProvider = props => {
 const Web3ContextProvider = props => {
   const { connector: activeConnector, address, isConnected, chainId } = useAccount()
   const { data: client } = useConnectorClient<Config>({ chainId })
-
   const { openConnectModal } = useConnectModal()
   const { disconnect } = useDisconnect()
 
+  useEffect(() => {
+    if (isConnected && activeConnector?.name) {
+      sendGAEvent("event", "wallet_connected", {
+        wallet_type: activeConnector.name,
+      })
+    }
+  }, [isConnected, activeConnector?.name])
+
   const provider = useMemo(() => {
     if (client && chainId && chainId === client.chain?.id) return clientToProvider(client)
     return null

src/contexts/RainbowProvider/index.tsx

@@ -2121,6 +2121,13 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.19.tgz#1e6bee0b853c19c55f9bab1620f78a03439c59ee"
   integrity sha512-bOkmujDRcqbHO2Mxun7SogL1fwzGT/PYqFZ0+aTBjmkhGhx7V/Dun4MNjnxJEGByGNg2EcwdWzsYcRUnHs8Ivg==
 
+"@next/third-parties@^15.1.5":
+  version "15.1.5"
+  resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-15.1.5.tgz#c4958c201fdfa173df8813c4eb53096d4806ec64"
+  integrity sha512-APPZrBerXvZn1IvNwC+TqusqWiTaj6goa1P6/YJe8nr9GTG+j8+vGJ39py49+kUgyiYRYUly2tc6Uxu6g/VEWw==
+  dependencies:
+    third-party-capital "1.0.20"
+
 "@noble/[email protected]", "@noble/curves@~1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.2.0.tgz#92d7e12e4e49b23105a2555c6984d41733d65c35"
@@ -8699,11 +8706,6 @@ react-fast-marquee@^1.6.5:
   resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz#98929ae93eef087a607a71e9d45ab76bba97dc16"
   integrity sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==
 
-react-ga4@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
-  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
-
 react-intersection-observer@^9.5.3:
   version "9.5.3"
   resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.5.3.tgz#f47a31ed3a0359cbbfdb91a53d7470ac2ab7b3c7"
@@ -9841,6 +9843,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+[email protected]:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
+  integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==
+
 thread-stream@^0.15.1:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-0.15.2.tgz#fb95ad87d2f1e28f07116eb23d85aba3bc0425f4"