Skip to content

Commit 9958033

Browse files
HolybasilHolybasil
authored
Merge pull request #1494 from scroll-tech/landing-analytics
analytics: landing page
2 parents 42d311e + 29c50f2 commit 9958033

File tree

9 files changed

+65
-18
lines changed

9 files changed

+65
-18
lines changed

‎src/app/_components/FounderClub/index.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,13 @@ const FounderClub = () => {
1616
<Protocols />
1717
<Container>
1818
<Founders />
19-
<Button color="primary" href={FOUNDER_CLUB_URL} target="_blank" className="!w-[240px] md:!w-[250px] md:mx-auto">
19+
<Button
20+
color="primary"
21+
href={FOUNDER_CLUB_URL}
22+
target="_blank"
23+
className="!w-[240px] md:!w-[250px] md:mx-auto"
24+
gaEvent={{ event: "click_landing", label: "Join Telegram group" }}
25+
>
2026
Join Telegram group
2127
</Button>
2228
</Container>

‎src/app/_components/Hero/index.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,17 @@ const LandingHero = () => {
3434
Network for the Open Economy
3535
</Typography>
3636
<Stack direction={["column", "row"]} sx={{ gap: "16px" }}>
37-
<Button href={DOC_URL} target="_blank" className="!w-[180px] sm:!w-[250px]" color="primary">
37+
<Button
38+
href={DOC_URL}
39+
target="_blank"
40+
className="!w-[180px] sm:!w-[250px]"
41+
color="primary"
42+
gaEvent={{ event: "click_landing", label: "Build now" }}
43+
>
3844
Build now
3945
</Button>
4046

41-
<Button href={SESSIONS_URL} className="!w-[180px] sm:!w-[250px]">
47+
<Button href={SESSIONS_URL} className="!w-[180px] sm:!w-[250px]" gaEvent={{ event: "click_landing", label: "Join Session 2" }}>
4248
Join Session 2
4349
</Button>
4450
</Stack>

‎src/app/_components/Portal/PortalCard.tsx

+18-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
1+
"use client"
2+
3+
import { sendGAEvent } from "@next/third-parties/google"
4+
15
import { Stack, Typography } from "@mui/material"
26

37
const PortalCard = props => {
4-
const { label, content, icon: Icon } = props
8+
const { label, content, children } = props
9+
10+
const handleSendGAEvent = () => {
11+
sendGAEvent("event", "click_landing", {
12+
label,
13+
})
14+
}
515

616
return (
7-
<Stack direction="column" sx={{ p: "2.4rem", pt: "4rem", backgroundColor: "background.default", borderRadius: "2rem" }}>
8-
<Icon></Icon>
17+
<Stack
18+
role="button"
19+
direction="column"
20+
sx={{ p: "2.4rem", pt: "4rem", backgroundColor: "background.default", borderRadius: "2rem" }}
21+
onClick={handleSendGAEvent}
22+
>
23+
{children}
924
<Typography sx={{ typography: "title", fontSize: "2rem", lineHeight: "4rem", mt: "1.6rem", cursor: "inherit" }}>{label}</Typography>
1025
<Typography sx={{ fontSize: "1.8rem", lineHeight: ["2.4rem", "2.8rem"], height: ["4.8rem", "5.6rem"], cursor: "inherit" }}>
1126
{content}

‎src/app/_components/Portal/index.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,11 @@ const Portal = () => {
5050
{title}
5151
</Typography>
5252
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(33rem, 1fr))", gap: ["2.4rem", "2.8rem"] }}>
53-
{items.map(({ icon, label, content, href }) => (
53+
{items.map(({ icon: Icon, label, content, href }) => (
5454
<Link href={href} key={label} target={href.startsWith("https:") ? "_blank" : ""} className="cursor-pointer">
55-
<PortalCard icon={icon} label={label} content={content}></PortalCard>
55+
<PortalCard label={label} content={content}>
56+
<Icon></Icon>
57+
</PortalCard>
5658
</Link>
5759
))}
5860
</Box>

‎src/app/_components/Tech/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const Tech = () => {
5555
href={TECH_URL}
5656
target="_blank"
5757
className="!w-[24rem] md:!w-[25rem] justify-self-start md:justify-self-center col-span-1 md:col-span-2"
58+
gaEvent={{ event: "click_landing", label: "View tech details" }}
5859
>
5960
View tech details
6061
</Button>

‎src/app/_components/Vision/index.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,12 @@ const Vision = () => {
3939
<VisionCard key={key} {...vision} />
4040
))}
4141
</Box>
42-
<Button color="primary" href={VISION_URL} className="!w-[240px] md:!w-[250px] justify-self-start md:justify-self-center">
42+
<Button
43+
color="primary"
44+
href={VISION_URL}
45+
className="!w-[240px] md:!w-[250px] justify-self-start md:justify-self-center"
46+
gaEvent={{ event: "click_landing", label: "View vision details" }}
47+
>
4348
View vision details
4449
</Button>
4550
</Container>

‎src/assets/svgs/footer/support.svg

-7
Loading

‎src/components/Button/index.tsx

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client"
22

3+
import { sendGAEvent } from "@next/third-parties/google"
34
import { motion, useCycle } from "motion/react"
45
import { useMemo } from "react"
56
import { makeStyles } from "tss-react/mui"
@@ -17,6 +18,7 @@ interface ScrollButtonProps extends Omit<ButtonProps, "color"> {
1718
disabled?: boolean
1819
whiteButton?: boolean
1920
download?: boolean
21+
gaEvent?: { event: string; label: string }
2022

2123
// compatibility
2224
target?: string
@@ -154,7 +156,7 @@ const maskMobile = {
154156
},
155157
}
156158
const Button = (props: ScrollButtonProps) => {
157-
const { id, className, width, sx, color, loading, disabled, gloomy, children, whiteButton, ...restProps } = props
159+
const { id, className, width, sx, color, loading, disabled, gloomy, children, whiteButton, gaEvent, onClick, ...restProps } = props
158160
const { classes, cx } = useStyles({
159161
color,
160162
width,
@@ -176,6 +178,16 @@ const Button = (props: ScrollButtonProps) => {
176178
setIsHover()
177179
}
178180

181+
const handleClick = e => {
182+
if (gaEvent) {
183+
const { event, ...props } = gaEvent
184+
sendGAEvent("event", event, { ...props })
185+
}
186+
if (onClick) {
187+
onClick(e)
188+
}
189+
}
190+
179191
return (
180192
// TODO: allow sx, allow size=small/medium
181193
// avoid setting both 'disabled' and 'loading' to true.
@@ -212,6 +224,7 @@ const Button = (props: ScrollButtonProps) => {
212224
),
213225
}}
214226
disabled={innerDisabled || gloomy || loading}
227+
onClick={handleClick}
215228
{...restProps}
216229
>
217230
{children} {loading && <CircularProgress sx={{ color: "inherit" }} size={isMobile ? 18 : 24} thickness={4}></CircularProgress>}

‎src/components/Footer/Support/index.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,13 @@ const NeedSupport = () => {
2727
<Support className="w-[32px] sm:w-[36px] h-auto"></Support>
2828
</Stack>
2929
<Typography sx={{ typography: "title", fontSize: ["2rem", "2.4rem"], flex: 1 }}>Built a project and need more support?</Typography>
30-
<Button href={GET_IN_TOUCH_URL} className="!w-[240px] md:!w-[250px]" whiteButton target="_blank">
30+
<Button
31+
href={GET_IN_TOUCH_URL}
32+
className="!w-[240px] md:!w-[250px]"
33+
whiteButton
34+
target="_blank"
35+
gaEvent={{ event: "click_landing", label: "Get in touch" }}
36+
>
3137
Get in touch
3238
</Button>
3339
</Stack>

0 commit comments

Comments
 (0)