Skip to content

Commit 46dcca5

Browse files
zzq0826zzq0826
authored
Merge pull request #1410 from scroll-tech/next-google-ga4
Next google ga4
2 parents afb525d + c729c54 commit 46dcca5

File tree

13 files changed

+38
-83
lines changed

13 files changed

+38
-83
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@mui/lab": "^5.0.0-alpha.108",
2525
"@mui/material": "^5.13.5",
2626
"@mui/material-nextjs": "^5.15.5",
27+
"@next/third-parties": "^15.1.5",
2728
"@rainbow-me/rainbowkit": "^2.1.2",
2829
"@sentry/nextjs": "^7.95.0",
2930
"@tanstack/react-query": "^5.55.3",
@@ -46,7 +47,6 @@
4647
"react-device-detect": "^2.2.3",
4748
"react-dom": "^18.2.0",
4849
"react-fast-marquee": "^1.6.5",
49-
"react-ga4": "^2.1.0",
5050
"react-mailchimp-subscribe": "^2.1.3",
5151
"react-markdown": "^8.0.3",
5252
"react-use": "^17.4.0",

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

-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useEffect, useState } from "react"
2-
import ReactGA from "react-ga4"
32

43
import { Collapse, Stack, Typography } from "@mui/material"
54

@@ -41,9 +40,6 @@ const CheckElegbility = () => {
4140
} else {
4241
setIsEligible(-1)
4342
}
44-
ReactGA.event("check_eligibility", {
45-
contractsNumber: items.length,
46-
})
4743
})
4844
.catch(() => {
4945
setIsEligible(-2)

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

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useEffect, useMemo, useState } from "react"
2-
import ReactGA from "react-ga4"
32
import { useSwiperSlide } from "swiper/react"
43

54
import { Container, Stack, SvgIcon, Typography } from "@mui/material"
@@ -59,12 +58,6 @@ const FinalStep = () => {
5958
changeIsEligible(0)
6059
}
6160

62-
const handleShare = () => {
63-
ReactGA.event("share_twitter", {
64-
tokenId,
65-
})
66-
}
67-
6861
return (
6962
<Container sx={{ pt: ["2.4rem", "4rem"], pb: ["8rem", "14rem"] }}>
7063
<Stack alignItems="center" spacing="1.6rem">
@@ -84,7 +77,7 @@ const FinalStep = () => {
8477
<Button color="primary" onClick={handleGoShow}>
8578
Done
8679
</Button>
87-
<Button color="secondary" href={shareTwitterURL} target="_blank" rel="noopener noreferrer" onClick={handleShare}>
80+
<Button color="secondary" href={shareTwitterURL} target="_blank" rel="noopener noreferrer">
8881
Share to <SvgIcon sx={{ fontSize: ["1.2rem", "1.6rem"], ml: "6px" }} component={TwitterSvg} inheritViewBox></SvgIcon>
8982
</Button>
9083
</Stack>

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useEffect, useMemo, useState } from "react"
2-
import ReactGA from "react-ga4"
32

43
import { Box, Stack, SvgIcon, Typography } from "@mui/material"
54
import { styled } from "@mui/material/styles"
@@ -86,11 +85,7 @@ const MyNFT = props => {
8685
setErrorMessage("")
8786
}
8887

89-
const handleShare = () => {
90-
ReactGA.event("share_twitter", {
91-
tokenId,
92-
})
93-
}
88+
const handleShare = () => {}
9489

9590
return (
9691
<Box

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

-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useState } from "react"
22
import Countdown, { zeroPad } from "react-countdown"
3-
import ReactGA from "react-ga4"
43

54
import { Box, Stack, Typography } from "@mui/material"
65
import { styled } from "@mui/material/styles"
@@ -44,16 +43,8 @@ const MintHome = props => {
4443
.then(data => {
4544
if (data.proof) {
4645
changeIsEligible(1)
47-
ReactGA.event("mint_now", {
48-
walletAddress: walletCurrentAddress,
49-
isEligible: 1,
50-
})
5146
} else if (!data.error) {
5247
changeIsEligible(-1)
53-
ReactGA.event("mint_now", {
54-
walletAddress: walletCurrentAddress,
55-
isEligible: -1,
56-
})
5748
} else {
5849
throw new Error("Netword error, try again later")
5950
}

‎src/app/layout.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import { GoogleAnalytics } from "@next/third-parties/google"
12
import { Metadata } from "next"
23
import React, { Suspense } from "react"
34

45
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter"
56

67
import GlobalComponents from "@/components/GlobalComponents"
7-
import GoogleAnalytics from "@/components/GoogleAnalytics"
8+
// import GoogleAnalytics from "@/components/GoogleAnalytics"
89
import ScrollToTop from "@/components/ScrollToTop"
910
import WebVitals from "@/components/WebVitals"
1011
// import SentrySetting from "@/components/SentrySetting"
@@ -44,7 +45,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
4445
{process.env.NODE_ENV === "production" && (
4546
<>
4647
<Suspense fallback={null}>
47-
<GoogleAnalytics></GoogleAnalytics>
48+
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID} />
4849
</Suspense>
4950
<WebVitals></WebVitals>
5051
{/* <SentrySetting></SentrySetting> */}

‎src/components/GoogleAnalytics/index.tsx

-36
This file was deleted.

‎src/components/Header/SubmenuLink.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ReactGA from "react-ga4"
1+
import { sendGAEvent } from "@next/third-parties/google"
22

33
import { Box, Stack, SvgIcon, Typography } from "@mui/material"
44
import { CSSObject, Theme, styled } from "@mui/material/styles"
@@ -48,7 +48,7 @@ const SubmenuLinkContent = ({ icon, label, text, isExternal }: { icon: any; labe
4848
const { isDesktop } = useCheckViewport()
4949

5050
const handleClick = () => {
51-
ReactGA.event("click_menu", {
51+
sendGAEvent("event", "click_menu", {
5252
label: text || label,
5353
device: isDesktop ? "desktop" : "mobile",
5454
})

‎src/components/Header/desktop_header.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// import { default as NavLink } from "next/link"
2+
import { sendGAEvent } from "@next/third-parties/google"
23
import React, { useState } from "react"
3-
import ReactGA from "react-ga4"
44
import { useStyles } from "tss-react/mui"
55

66
import { Box, Container, Fade, Link, Popper, Stack, SvgIcon, Typography } from "@mui/material"
@@ -255,12 +255,12 @@ const DesktopHeader = ({ currentMenu }) => {
255255
end={item.end}
256256
key={item.key}
257257
reloadDocument={item.reload}
258-
onClick={() =>
259-
ReactGA.event("click_menu", {
258+
onClick={() => {
259+
sendGAEvent("event", "click_menu", {
260260
label: item.label,
261261
device: "desktop",
262262
})
263-
}
263+
}}
264264
>
265265
{item.label}
266266
</LinkStyledButton>

‎src/components/Header/mobile_header.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { sendGAEvent } from "@next/third-parties/google"
12
import React, { useEffect, useState } from "react"
2-
import ReactGA from "react-ga4"
33
import { useStyles } from "tss-react/mui"
44

55
import { ExpandMore } from "@mui/icons-material"
@@ -176,7 +176,7 @@ const MobileHeader = ({ currentMenu }) => {
176176
className={cx(currentMenu.includes(item.key) && "active")}
177177
reloadDocument={item.reload}
178178
onClick={() =>
179-
ReactGA.event("click_menu", {
179+
sendGAEvent("event", "click_menu", {
180180
label: item.label,
181181
device: "mobile",
182182
})

‎src/components/WebVitals/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
"use client"
22

3+
import { sendGAEvent } from "@next/third-parties/google"
34
import { useReportWebVitals } from "next/web-vitals"
4-
import ReactGA from "react-ga4"
55

66
const WebVitals = () => {
77
useReportWebVitals(metric => {
8-
ReactGA.event(metric.name, {
8+
sendGAEvent("event", metric.name, {
99
value: Math.round(metric.name === "CLS" ? metric.value * 1000 : metric.value), // values must be integers
1010
event_label: metric.id, // id unique to current page load
1111
non_interaction: true, // avoids affecting bounce rate.

‎src/contexts/RainbowProvider/index.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
"use client"
22

3+
import { sendGAEvent } from "@next/third-parties/google"
34
import { RainbowKitProvider, getDefaultConfig, useConnectModal } from "@rainbow-me/rainbowkit"
45
import "@rainbow-me/rainbowkit/styles.css"
56
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
67
import { BrowserProvider } from "ethers"
7-
import { createContext, useCallback, useContext, useMemo } from "react"
8+
import { createContext, useCallback, useContext, useEffect, useMemo } from "react"
89
import { type Config, WagmiProvider, useAccount, useConnectorClient, useDisconnect } from "wagmi"
910

1011
import { configs } from "./configs"
@@ -51,10 +52,17 @@ const RainbowProvider = props => {
5152
const Web3ContextProvider = props => {
5253
const { connector: activeConnector, address, isConnected, chainId } = useAccount()
5354
const { data: client } = useConnectorClient<Config>({ chainId })
54-
5555
const { openConnectModal } = useConnectModal()
5656
const { disconnect } = useDisconnect()
5757

58+
useEffect(() => {
59+
if (isConnected && activeConnector?.name) {
60+
sendGAEvent("event", "wallet_connected", {
61+
wallet_type: activeConnector.name,
62+
})
63+
}
64+
}, [isConnected, activeConnector?.name])
65+
5866
const provider = useMemo(() => {
5967
if (client && chainId && chainId === client.chain?.id) return clientToProvider(client)
6068
return null

‎yarn.lock

+12-5
Original file line numberDiff line numberDiff line change
@@ -2121,6 +2121,13 @@
21212121
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.19.tgz#1e6bee0b853c19c55f9bab1620f78a03439c59ee"
21222122
integrity sha512-bOkmujDRcqbHO2Mxun7SogL1fwzGT/PYqFZ0+aTBjmkhGhx7V/Dun4MNjnxJEGByGNg2EcwdWzsYcRUnHs8Ivg==
21232123

2124+
"@next/third-parties@^15.1.5":
2125+
version "15.1.5"
2126+
resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-15.1.5.tgz#c4958c201fdfa173df8813c4eb53096d4806ec64"
2127+
integrity sha512-APPZrBerXvZn1IvNwC+TqusqWiTaj6goa1P6/YJe8nr9GTG+j8+vGJ39py49+kUgyiYRYUly2tc6Uxu6g/VEWw==
2128+
dependencies:
2129+
third-party-capital "1.0.20"
2130+
21242131
"@noble/[email protected]", "@noble/curves@~1.2.0":
21252132
version "1.2.0"
21262133
resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.2.0.tgz#92d7e12e4e49b23105a2555c6984d41733d65c35"
@@ -8699,11 +8706,6 @@ react-fast-marquee@^1.6.5:
86998706
resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz#98929ae93eef087a607a71e9d45ab76bba97dc16"
87008707
integrity sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==
87018708

8702-
react-ga4@^2.1.0:
8703-
version "2.1.0"
8704-
resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
8705-
integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
8706-
87078709
react-intersection-observer@^9.5.3:
87088710
version "9.5.3"
87098711
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:
98419843
dependencies:
98429844
any-promise "^1.0.0"
98439845

9846+
[email protected]:
9847+
version "1.0.20"
9848+
resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
9849+
integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==
9850+
98449851
thread-stream@^0.15.1:
98459852
version "0.15.2"
98469853
resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-0.15.2.tgz#fb95ad87d2f1e28f07116eb23d85aba3bc0425f4"

0 commit comments

Comments
 (0)