feat: update all /developers action trackers

Author: wackerow

app/[locale]/developers/_components/BuilderCard.tsx

@@ -33,7 +33,16 @@ const BuilderCard = ({ path, className }: BuildCardProps) => (
       <h3 className="text-lg font-bold">{path.title}</h3>
       <p className="mb-4 text-sm text-body-medium">{path.description}</p>
     </div>
-    <ButtonLink href={path.href} className="sm:w-fit">
+    <ButtonLink
+      href={path.href}
+      className="sm:w-fit"
+      customEventOptions={{
+        eventCategory: "top_boxes",
+        eventAction: "click",
+        eventName: path.tag,
+      }}
+      rel="noopener"
+    >
       {path.button}
     </ButtonLink>
   </Card>

app/[locale]/developers/_components/HackathonCard.tsx

@@ -16,22 +16,17 @@ import EventFallback from "@/public/images/events/event-placeholder.png"
 type HackathonCardProps = {
   event: CommunityConference
   className?: string
-  eventCategory: string
 }
 
-const HackathonCard = ({
-  event,
-  className,
-  eventCategory = "Developers",
-}: HackathonCardProps) => {
+const HackathonCard = ({ event, className }: HackathonCardProps) => {
   const { title, href, description, imageUrl, formattedDate, location } = event
   return (
     <Card
       href={href}
       key={title + description}
       customEventOptions={{
-        eventCategory,
-        eventAction: "hackathons",
+        eventCategory: "hackathons",
+        eventAction: "click",
         eventName: title,
       }}
       className={className}

app/[locale]/developers/_components/HackathonSwiper/index.tsx

@@ -8,14 +8,13 @@ import HackathonCard from "../HackathonCard"
 
 type HackathonSwiperProps = {
   events: CommunityConference[]
-  eventCategory: string
 }
 
-const HackathonSwiper = ({ events, eventCategory }: HackathonSwiperProps) => (
+const HackathonSwiper = ({ events }: HackathonSwiperProps) => (
   <Swiper spaceBetween={16} slidesPerView={1.25}>
     {events.map((event, idx) => (
       <SwiperSlide key={idx} className="max-2xl:first:ms-8 max-2xl:last:pe-16">
-        <HackathonCard event={event} eventCategory={eventCategory} />
+        <HackathonCard event={event} />
       </SwiperSlide>
     ))}
   </Swiper>

app/[locale]/developers/_components/VideoCourseCard.tsx

@@ -15,6 +15,11 @@ const VideoCourseCard = ({ course, className }: VideoCourseCardProps) => (
   <Card
     href={course.href}
     className={cn("group h-full w-fit rounded-4xl no-underline", className)}
+    customEventOptions={{
+      eventCategory: "video-courses",
+      eventAction: "click",
+      eventName: course.title,
+    }}
   >
     <div className="h-fit w-full overflow-hidden rounded-2xl">
       <Image

app/[locale]/developers/page.tsx

@@ -87,8 +87,6 @@ const DevelopersPage = async ({
 
   const hackathons = (await getHackathons()).slice(0, 5)
 
-  const eventCategory = `Developers - ${locale}`
-
   return (
     <VStack className="mx-auto my-0 w-full">
       <HubHero
@@ -143,7 +141,15 @@ const DevelopersPage = async ({
               <h3>{t("page-developers-jump-right-in-title")}</h3>
               <p className="text-sm text-body-medium">
                 {t("page-developers-quickstart-scaffold-subtext")}{" "}
-                <Link href="https://docs.scaffoldeth.io/">
+                <Link
+                  href="https://docs.scaffoldeth.io/"
+                  customEventOptions={{
+                    eventCategory: "mid_boxes",
+                    eventAction: "click",
+                    eventName: "scaffold-docs",
+                  }}
+                  rel="noopener"
+                >
                   {t("page-developers-quickstart-scaffold-docs")}
                 </Link>
               </p>
@@ -156,9 +162,9 @@ const DevelopersPage = async ({
                 message="npx create-eth@latest"
                 size="sm"
                 customEventOptions={{
-                  eventCategory: "top_boxes",
+                  eventCategory: "mid_boxes",
                   eventAction: "click",
-                  eventName: "scaffold",
+                  eventName: "scaffold-npx-copy",
                 }}
               />
             </div>
@@ -167,9 +173,9 @@ const DevelopersPage = async ({
               <Link
                 href="https://docs.scaffoldeth.io/llms-full.txt"
                 customEventOptions={{
-                  eventCategory: "top_boxes",
+                  eventCategory: "mid_boxes",
                   eventAction: "click",
-                  eventName: "scaffold-llms",
+                  eventName: "scaffold-llms-full",
                 }}
               >
                 Scaffold-Eth2-llms-full.txt
@@ -197,6 +203,11 @@ const DevelopersPage = async ({
                 variant="outline"
                 isSecondary
                 href="https://ethereum.stackexchange.com/"
+                customEventOptions={{
+                  eventCategory: "mid_boxes",
+                  eventAction: "click",
+                  eventName: "stack-exchange",
+                }}
               >
                 {t("page-developers-stack-exchange")}
               </ButtonLink>
@@ -230,6 +241,11 @@ const DevelopersPage = async ({
                 variant="outline"
                 isSecondary
                 href="/developers/learning-tools/"
+                customEventOptions={{
+                  eventCategory: "mid_boxes",
+                  eventAction: "click",
+                  eventName: "play-with-code",
+                }}
               >
                 {t("page-developers-play-code")}
               </ButtonLink>
@@ -256,6 +272,11 @@ const DevelopersPage = async ({
                 variant="outline"
                 isSecondary
                 href="/developers/tutorials/"
+                customEventOptions={{
+                  eventCategory: "mid_boxes",
+                  eventAction: "click",
+                  eventName: "view-tutorials",
+                }}
               >
                 {t("page-developers-learn-tutorials-cta")}
               </ButtonLink>
@@ -416,24 +437,23 @@ const DevelopersPage = async ({
           {/* DESKTOP */}
           <Scroller>
             {hackathons.map((event, idx) => (
-              <HackathonCard
-                key={idx}
-                event={event}
-                eventCategory={eventCategory}
-                className="flex-1"
-              />
+              <HackathonCard key={idx} event={event} className="flex-1" />
             ))}
           </Scroller>
           {/* MOBILE */}
           <div className="-mx-8 sm:hidden">
-            <HackathonSwiper
-              events={hackathons}
-              eventCategory={eventCategory}
-            />
+            <HackathonSwiper events={hackathons} />
           </div>
 
           <div className="flex justify-center">
-            <ButtonLink href="https://ethglobal.com/">
+            <ButtonLink
+              href="https://ethglobal.com/"
+              customEventOptions={{
+                eventCategory: "hackathons",
+                eventAction: "click",
+                eventName: "visit-ethglobal",
+              }}
+            >
               {t("page-developers-visit-ethglobal")}
             </ButtonLink>
           </div>
@@ -454,13 +474,25 @@ const DevelopersPage = async ({
                 <p>{t("page-developers-founders-desc")}</p>
               </div>
               <div className="flex flex-wrap justify-center gap-4 text-center">
-                <ButtonLink href="mailto:[email protected]?subject=Founder%20inquiry">
+                <ButtonLink
+                  href="mailto:[email protected]?subject=Founder%20inquiry"
+                  customEventOptions={{
+                    eventCategory: "founders",
+                    eventAction: "click",
+                    eventName: "email",
+                  }}
+                >
                   {t("page-developers-get-in-touch")}
                 </ButtonLink>
                 <ButtonLink
                   href="/community/grants/"
                   isSecondary
                   variant="outline"
+                  customEventOptions={{
+                    eventCategory: "founders",
+                    eventAction: "click",
+                    eventName: "grant-options",
+                  }}
                 >
                   {t("page-developers-see-grant-options")}
                 </ButtonLink>

app/[locale]/developers/types.ts

@@ -4,14 +4,14 @@ import type { ReactNode } from "react"
 type CardInfo = {
   imgSrc: StaticImageData
   imgAlt: string
-  title: ReactNode
+  title: string
   description: ReactNode
   href: string
 }
 
 export type DevelopersPath = CardInfo & {
   button: ReactNode
-  tag?: string
+  tag: string
 }
 
 export type VideoCourse = CardInfo & {

src/intl/en/page-developers-index.json

@@ -94,7 +94,7 @@
   "page-developers-hackathons-desc": "Hackathons are great opportunities to network and learn from others as well as start projects and earn prizes",
   "page-developers-visit-ethglobal": "Visit EthGlobal",
   "page-developers-founders-title": "Are you a founder?",
-  "page-developers-founders-desc": "Have a project idea already or working on a prototype? Explore how to take your project to the next step. Many other organizations that provide developers with funding.",
+  "page-developers-founders-desc": "Have a project idea already or working on a prototype? Explore how to take your project to the next step. We can connect you with relevant organizations and experts in the field.",
   "page-developers-get-in-touch": "Get in touch",
   "page-developers-see-grant-options": "See grant options",
   "page-developers-speedrun-nft-alt": "Speedrun Ethereum NFT banner",