Merge pull request #1494

src/app/_components/FounderClub/index.tsx

@@ -16,7 +16,13 @@ const FounderClub = () => {
       <Protocols />
       <Container>
         <Founders />
-        <Button color="primary" href={FOUNDER_CLUB_URL} target="_blank" className="!w-[240px] md:!w-[250px] md:mx-auto">
+        <Button
+          color="primary"
+          href={FOUNDER_CLUB_URL}
+          target="_blank"
+          className="!w-[240px] md:!w-[250px] md:mx-auto"
+          gaEvent={{ event: "click_landing", label: "Join Telegram group" }}
+        >
           Join Telegram group
         </Button>
       </Container>

src/app/_components/Hero/index.tsx

@@ -34,11 +34,17 @@ const LandingHero = () => {
           Network for the Open Economy
         </Typography>
         <Stack direction={["column", "row"]} sx={{ gap: "16px" }}>
-          <Button href={DOC_URL} target="_blank" className="!w-[180px] sm:!w-[250px]" color="primary">
+          <Button
+            href={DOC_URL}
+            target="_blank"
+            className="!w-[180px] sm:!w-[250px]"
+            color="primary"
+            gaEvent={{ event: "click_landing", label: "Build now" }}
+          >
             Build now
           </Button>
 
-          <Button href={SESSIONS_URL} className="!w-[180px] sm:!w-[250px]">
+          <Button href={SESSIONS_URL} className="!w-[180px] sm:!w-[250px]" gaEvent={{ event: "click_landing", label: "Join Session 2" }}>
             Join Session 2
           </Button>
         </Stack>

src/app/_components/Portal/PortalCard.tsx

@@ -1,11 +1,26 @@
+"use client"
+
+import { sendGAEvent } from "@next/third-parties/google"
+
 import { Stack, Typography } from "@mui/material"
 
 const PortalCard = props => {
-  const { label, content, icon: Icon } = props
+  const { label, content, children } = props
+
+  const handleSendGAEvent = () => {
+    sendGAEvent("event", "click_landing", {
+      label,
+    })
+  }
 
   return (
-    <Stack direction="column" sx={{ p: "2.4rem", pt: "4rem", backgroundColor: "background.default", borderRadius: "2rem" }}>
-      <Icon></Icon>
+    <Stack
+      role="button"
+      direction="column"
+      sx={{ p: "2.4rem", pt: "4rem", backgroundColor: "background.default", borderRadius: "2rem" }}
+      onClick={handleSendGAEvent}
+    >
+      {children}
       <Typography sx={{ typography: "title", fontSize: "2rem", lineHeight: "4rem", mt: "1.6rem", cursor: "inherit" }}>{label}</Typography>
       <Typography sx={{ fontSize: "1.8rem", lineHeight: ["2.4rem", "2.8rem"], height: ["4.8rem", "5.6rem"], cursor: "inherit" }}>
         {content}

src/app/_components/Portal/index.tsx

@@ -50,9 +50,11 @@ const Portal = () => {
               {title}
             </Typography>
             <Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(33rem, 1fr))", gap: ["2.4rem", "2.8rem"] }}>
-              {items.map(({ icon, label, content, href }) => (
+              {items.map(({ icon: Icon, label, content, href }) => (
                 <Link href={href} key={label} target={href.startsWith("https:") ? "_blank" : ""} className="cursor-pointer">
-                  <PortalCard icon={icon} label={label} content={content}></PortalCard>
+                  <PortalCard label={label} content={content}>
+                    <Icon></Icon>
+                  </PortalCard>
                 </Link>
               ))}
             </Box>

src/app/_components/Tech/index.tsx

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

src/app/_components/Vision/index.tsx

@@ -39,7 +39,12 @@ const Vision = () => {
             <VisionCard key={key} {...vision} />
           ))}
         </Box>
-        <Button color="primary" href={VISION_URL} className="!w-[240px] md:!w-[250px] justify-self-start md:justify-self-center">
+        <Button
+          color="primary"
+          href={VISION_URL}
+          className="!w-[240px] md:!w-[250px] justify-self-start md:justify-self-center"
+          gaEvent={{ event: "click_landing", label: "View vision details" }}
+        >
           View vision details
         </Button>
       </Container>

src/components/Button/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { sendGAEvent } from "@next/third-parties/google"
 import { motion, useCycle } from "motion/react"
 import { useMemo } from "react"
 import { makeStyles } from "tss-react/mui"
@@ -17,6 +18,7 @@ interface ScrollButtonProps extends Omit<ButtonProps, "color"> {
   disabled?: boolean
   whiteButton?: boolean
   download?: boolean
+  gaEvent?: { event: string; label: string }
 
   // compatibility
   target?: string
@@ -154,7 +156,7 @@ const maskMobile = {
   },
 }
 const Button = (props: ScrollButtonProps) => {
-  const { id, className, width, sx, color, loading, disabled, gloomy, children, whiteButton, ...restProps } = props
+  const { id, className, width, sx, color, loading, disabled, gloomy, children, whiteButton, gaEvent, onClick, ...restProps } = props
   const { classes, cx } = useStyles({
     color,
     width,
@@ -176,6 +178,16 @@ const Button = (props: ScrollButtonProps) => {
     setIsHover()
   }
 
+  const handleClick = e => {
+    if (gaEvent) {
+      const { event, ...props } = gaEvent
+      sendGAEvent("event", event, { ...props })
+    }
+    if (onClick) {
+      onClick(e)
+    }
+  }
+
   return (
     // TODO: allow sx, allow size=small/medium
     // avoid setting both 'disabled' and 'loading' to true.
@@ -212,6 +224,7 @@ const Button = (props: ScrollButtonProps) => {
           ),
         }}
         disabled={innerDisabled || gloomy || loading}
+        onClick={handleClick}
         {...restProps}
       >
         {children} {loading && <CircularProgress sx={{ color: "inherit" }} size={isMobile ? 18 : 24} thickness={4}></CircularProgress>}

src/components/Footer/Support/index.tsx

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