Hotfix/plausible custom events tracking

src/app/build/page.js

@@ -7,7 +7,7 @@ import GetInTouch from "@/components/CallToActions/GetInTouch";
 
 import Container from "@/components/Container/Container";
 import { Col, Row } from "@/macros/Grids";
-import { Display, Body } from "@/macros/Copy";
+import { Display } from "@/macros/Copy";
 import VerticalTitleCard from "@/components/Cards/VerticalTitleCards/VerticalTitleCard";
 import Meta from "@/components/Meta/Meta";
 import seo from "@/data/build/seo";

src/app/page.js

@@ -50,8 +50,8 @@ export default async function Home() {
 							"Celestia powers apps that work in every corner of the planet – unstoppable by intermediaries and verifiable from any device.",
 						],
 						buttons: [
-							{ text: "Build", url: "/build", type: "secondary" },
-							{ text: "Deploy", url: "/build#rollups", type: "primary" },
+							{ text: "Build", url: "/build", type: "secondary", trackEvent: ANALYTICS_EVENTS.HOMEPAGE_UNSTOPPABLE_BUILD },
+							{ text: "Deploy", url: "/build#rollups", type: "primary", trackEvent: ANALYTICS_EVENTS.HOMEPAGE_UNSTOPPABLE_DEPLOY },
 						],
 						videoSrc: "/videos/home/CE_BLOB.mp4 ",
 					},
@@ -62,8 +62,8 @@ export default async function Home() {
 							"With Celestia underneath, deploy as your own sovereign network or launch fast with leading Ethereum rollup frameworks.",
 						],
 						buttons: [
-							{ text: "Build modular", url: "/build", type: "secondary" },
-							{ text: "Deploy", url: "/build#rollups", type: "primary" },
+							{ text: "Build modular", url: "/build", type: "secondary", trackEvent: ANALYTICS_EVENTS.HOMEPAGE_CUSTOMIZABILITY_BUILD },
+							{ text: "Deploy", url: "/build#rollups", type: "primary", trackEvent: ANALYTICS_EVENTS.HOMEPAGE_CUSTOMIZABILITY_DEPLOY },
 						],
 						videoSrc: "/videos/home/CE_Under.mp4 ",
 					},
@@ -81,6 +81,7 @@ export default async function Home() {
 								text: "Learn Celestia",
 								url: "/what-is-celestia",
 								type: "secondary",
+								trackEvent: ANALYTICS_EVENTS.HOMEPAGE_ABUNDANCE_LEARN,
 							},
 						],
 						videoSrc: "/videos/home/CE_ACCESS_new.mp4",
@@ -94,22 +95,25 @@ export default async function Home() {
 					description={"Directly verify and join the network by running a light node in two commands"}
 					url={"/run-a-light-node"}
 					image={"/images/app/homepage/explore-runALightNode.png"}
+					trackEvent={ANALYTICS_EVENTS.HOMEPAGE_EXPLORE_RUN_NODE}
 				/>
 				<ExploreCard
 					title={"Use TIA"}
 					description={"Pay for blobspace, secure the network, and participate in governance"}
 					url={"/what-is-tia"}
 					image={"/images/app/homepage/explore-useTia.png"}
+					trackEvent={ANALYTICS_EVENTS.HOMEPAGE_EXPLORE_TIA}
 				/>
 				<ExploreCard
 					title={"Go modular"}
 					description={"Join the community and meet us at the next modular event"}
 					url={"/community"}
 					image={"/images/app/homepage/explore-joinTheCommunity.png"}
+					trackEvent={ANALYTICS_EVENTS.HOMEPAGE_EXPLORE_COMMUNITY}
 				/>
 			</ExploreCardsContainer>
 
-			<EcosytemExplorer />
+			<EcosytemExplorer trackEvent={ANALYTICS_EVENTS.HOMEPAGE_ECOSYSTEM_VIEW} />
 
 			{/* BLOG */}
 			{posts && <Blog posts={posts} />}

src/components/AlternatingMediaRows/MediaRow.js

@@ -1,10 +1,27 @@
+"use client";
 import { Body, Heading } from "@/macros/Copy";
 import PrimaryButton from "@/macros/Buttons/PrimaryButton";
 import SecondaryButton from "@/macros/Buttons/SecondaryButton";
 import VideoPlayer from "@/components/VideoPlayer/VideoPlayer";
+import { usePlausible } from "next-plausible";
 
 const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows }) => {
 	const videoRight = index % 2 === 0 ? true : false;
+	const trackEvent = usePlausible();
+
+	const handleButtonClick = (buttonText, url, trackEventName) => {
+		if (!trackEventName) return;
+
+		trackEvent(trackEventName, {
+			props: {
+				button: buttonText,
+				url: url,
+				location: "media_row_section",
+				path: window.location.pathname,
+			},
+		});
+	};
+
 	return (
 		<div className={`${className}`}>
 			<div className={"block relative w-full h-[100vw] overflow-hidden lg:w-1/2 lg:h-auto lg:overflow-visible"}>
@@ -36,7 +53,14 @@ const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows
 					return (
 						<>
 							{button.type === "primary" ? (
-								<PrimaryButton key={index} href={button.url} className={"inline-block mr-3 mb-3 group"} lightMode noBorder={false}>
+								<PrimaryButton
+									key={index}
+									href={button.url}
+									className={"inline-block mr-3 mb-3 group"}
+									lightMode
+									noBorder={false}
+									onClick={() => handleButtonClick(button.text, button.url, button.trackEvent)}
+								>
 									{button.text}
 								</PrimaryButton>
 							) : (
@@ -46,6 +70,7 @@ const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows
 									className={"inline-block mr-3 mb-3 group"}
 									lightMode={false}
 									noBorder={false}
+									onClick={() => handleButtonClick(button.text, button.url, button.trackEvent)}
 								>
 									{button.text}
 								</SecondaryButton>

src/components/Cards/ExploreCards/ExploreCard.js

@@ -8,24 +8,40 @@ import { motion, AnimatePresence } from "framer-motion";
 import Icon from "@/macros/Icons/Icon";
 import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
 import MovingGradients from "@/components/Animation/MovingGradient/MovingGradient";
+import { usePlausible } from "next-plausible";
 import "./ExploreCard.scss";
 
-const ExploreCard = ({ title, description, image, url }) => {
+const ExploreCard = ({ title, description, image, url, trackEvent: trackEventName }) => {
 	const [isHovering, setIsHovering] = useState(false);
+	const trackEvent = usePlausible();
 
 	const handleMouseEnter = () => setIsHovering(true);
 	const handleMouseLeave = () => setIsHovering(false);
 	const handleFocus = () => setIsHovering(true);
 	const handleBlur = () => setIsHovering(false);
 
+	const handleClick = () => {
+		if (!trackEventName) return;
+
+		trackEvent(trackEventName, {
+			props: {
+				title,
+				url,
+				location: "explore_card",
+				path: window.location.pathname,
+			},
+		});
+	};
+
 	return (
 		<Link
 			href={url}
-			className='flex-shrink-0 w-[80%] block lg:flex-shrink lg:w-full lg:pb-5 group '
+			className='flex-shrink-0 w-[80%] block lg:flex-shrink lg:w-full lg:pb-5 group'
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
 			onFocus={handleFocus}
 			onBlur={handleBlur}
+			onClick={handleClick}
 		>
 			<div className={`relative w-full pt-[110%] bg-purple-weak rounded-xl overflow-hidden mb-7`}>
 				<AnimatePresence>

src/components/Cards/ProjectCard/ProjectCard.js

@@ -7,12 +7,28 @@ import Image from "next/image";
 import CategoryPill from "@/macros/Pills/CategoryPill";
 import { motion } from "framer-motion";
 import { stringToId } from "@/utils/stringToId";
+import { usePlausible } from "next-plausible";
 
-const ProjectCard = ({ title, description, url, dark = false, image, categories = [] }) => {
+const ProjectCard = ({ title, description, url, dark = false, image, categories = [], trackEvent: trackEventName }) => {
 	const Tag = url ? Link : "div";
+	const trackEvent = usePlausible();
+
+	const handleClick = () => {
+		if (!trackEventName) return;
+		trackEvent(trackEventName, {
+			props: {
+				button: title,
+				url: url,
+				location: "frameworks_section",
+				path: window.location.pathname,
+			},
+		});
+	};
+
 	return (
 		<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} id={stringToId(title)}>
 			<Tag
+				onClick={handleClick}
 				href={url || ""}
 				className={`flex w-full group border-b transition-colors hover:duration-100 group-hover:duration-100 duration-300 delay-0 py-6 px-2 lg:px-6 gap-5 min-h-[100px] ${
 					dark

src/components/Ecosystem/EcosytemExplorer/EcosytemExplorer.js

@@ -1,96 +1,85 @@
+"use client";
 import { Display } from "@/macros/Copy";
 import Image from "next/image";
 import SecondaryButton from "@/macros/Buttons/SecondaryButton";
 import { ecosystemItems } from "@/data/ecosystem/ecosystem";
 import Link from "next/link";
 import "./EcosystemExplorer.scss";
 import { stringToId } from "@/utils/stringToId";
+import { usePlausible } from "next-plausible";
 
-const EcosytemExplorer = () => {
-  // randomly select 22 ecosystem items and mix them up
-  const randomEcosystemItems = ecosystemItems.sort(() => Math.random() - 0.5);
+const EcosytemExplorer = ({ trackEvent: trackEventName }) => {
+	const trackEvent = usePlausible();
+	// randomly select 22 ecosystem items and mix them up
+	const randomEcosystemItems = ecosystemItems.sort(() => Math.random() - 0.5);
 
-  // split the 22 ecosystem items into 12 foregroundItems and 10 backgroundItems
-  const foregroundItems = randomEcosystemItems.slice(0, 12);
-  const backgroundItems = randomEcosystemItems.slice(12, 22);
+	// split the 22 ecosystem items into 12 foregroundItems and 10 backgroundItems
+	const foregroundItems = randomEcosystemItems.slice(0, 12);
+	const backgroundItems = randomEcosystemItems.slice(12, 22);
 
-  return (
-    <section className="ecosystem-explorer py-6 px-4 lg:pb-10 lg:pt-24 md:px-10">
-      <Display
-        tag={"h2"}
-        size={"sm"}
-        className={"text-center uppercase relative z-20 text-5xl"}
-      >
-        Explore the
-        <br />
-        Ecosystem
-      </Display>
-      <div className="block w-[82%] max-w-[520px] mx-auto relative z-10 pb-32 lg:pb-8 -mt-12 lg:-mt-14">
-        {/* background items */}
-        <div className="background-icons absolute top-0 left-0 w-full h-full z-[2]">
-          {backgroundItems.map((item, index) => (
-            <div
-              key={index}
-              className={`absolute top-1/2 left-1/2 item-${index + 1}`}
-            >
-              <div className="relative block transform -translate-x-1/2 -translate-y-1/2">
-                <div className="relative transform vertical-anim">
-                  <Image
-                    src={item.image}
-                    alt={item.title}
-                    width={200}
-                    height={200}
-                    className="w-full h-auto max-w-12"
-                  />
-                  <span className="sr-only">{item.title}</span>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-        <Image
-          src={"/images/app/homepage/ecosystem-celestiaLogo.png"}
-          alt={"Celestia Logo"}
-          width={520}
-          height={520}
-          className="w-full h-auto relative z-[3]"
-        />
-        {/* foreground items */}
-        <div className="foreground-icons absolute top-0 left-0 w-full h-full z-[4]">
-          {foregroundItems.map((item, index) => (
-            <div
-              key={index}
-              className={`absolute top-1/2 left-1/2 item-${index + 1}`}
-            >
-              <Link
-                href={`/ecosystem/#${stringToId(item.title)}`}
-                className="relative block transform -translate-x-1/2 -translate-y-1/2"
-              >
-                <div className="relative transform vertical-anim">
-                  <Image
-                    src={item.image}
-                    alt={item.title}
-                    width={200}
-                    height={200}
-                    className="w-full h-auto max-w-16"
-                  />
-                  <span className="sr-only">{item.title}</span>
-                </div>
-              </Link>
-            </div>
-          ))}
-        </div>
-      </div>
-      <SecondaryButton
-        href={"/ecosystem"}
-        className={"mx-auto table"}
-        size="lg"
-        dark
-      >
-        View All <span className={"sr-only"}>Ecosystem Projects</span>
-      </SecondaryButton>
-    </section>
-  );
+	const handleViewAllClick = () => {
+		if (!trackEventName) return;
+
+		trackEvent(trackEventName, {
+			props: {
+				button: "View All",
+				url: "/ecosystem",
+				location: "ecosystem_explorer",
+				path: window.location.pathname,
+			},
+		});
+	};
+
+	return (
+		<section className='px-4 py-6 ecosystem-explorer lg:pb-10 lg:pt-24 md:px-10'>
+			<Display tag={"h2"} size={"sm"} className={"text-center uppercase relative z-20 text-5xl"}>
+				Explore the
+				<br />
+				Ecosystem
+			</Display>
+			<div className='block w-[82%] max-w-[520px] mx-auto relative z-10 pb-32 lg:pb-8 -mt-12 lg:-mt-14'>
+				{/* background items */}
+				<div className='background-icons absolute top-0 left-0 w-full h-full z-[2]'>
+					{backgroundItems.map((item, index) => (
+						<div key={index} className={`absolute top-1/2 left-1/2 item-${index + 1}`}>
+							<div className='relative block transform -translate-x-1/2 -translate-y-1/2'>
+								<div className='relative transform vertical-anim'>
+									<Image src={item.image} alt={item.title} width={200} height={200} className='w-full h-auto max-w-12' />
+									<span className='sr-only'>{item.title}</span>
+								</div>
+							</div>
+						</div>
+					))}
+				</div>
+				<Image
+					src={"/images/app/homepage/ecosystem-celestiaLogo.png"}
+					alt={"Celestia Logo"}
+					width={520}
+					height={520}
+					className='w-full h-auto relative z-[3]'
+				/>
+				{/* foreground items */}
+				<div className='foreground-icons absolute top-0 left-0 w-full h-full z-[4]'>
+					{foregroundItems.map((item, index) => (
+						<div key={index} className={`absolute top-1/2 left-1/2 item-${index + 1}`}>
+							<Link
+								href={`/ecosystem/#${stringToId(item.title)}`}
+								className='relative block transform -translate-x-1/2 -translate-y-1/2'
+							>
+								<div className='relative transform vertical-anim'>
+									<Image src={item.image} alt={item.title} width={200} height={200} className='w-full h-auto max-w-16' />
+									<span className='sr-only'>{item.title}</span>
+								</div>
+							</Link>
+						</div>
+					))}
+				</div>
+			</div>
+			<SecondaryButton href={"/ecosystem"} className={"mx-auto table"} size='lg' dark onClick={handleViewAllClick}>
+				View All <span className={"sr-only"}>Ecosystem Projects</span>
+			</SecondaryButton>
+		</section>
+	);
 };
 
 export default EcosytemExplorer;

src/components/Heroes/PrimaryHero.js

@@ -31,8 +31,6 @@ const PrimaryHero = ({ headline, subheadline, buttons, videos }) => {
 				path: window.location.pathname,
 			},
 		});
-
-		console.log("trackEvent", trackEventName);
 	};
 
 	return (

src/components/ProjectFilter/ProjectFilter.js

@@ -94,6 +94,7 @@ const ProjectFilter = ({ id, title, description, filters, filterTarget, filtersT
 										url={item.url || null} // If no URL is provided, remove hover effect
 										image={item.image}
 										categories={showCategoriesOnCard ? item.categories : []}
+										trackEvent={item.trackEvent}
 									/>
 								))}
 							</AnimatePresence>

src/constants/analytics.ts

@@ -3,12 +3,12 @@ export const ANALYTICS_EVENTS = {
 	HERO_BUILD: "Homepage_hero_build",
 	HERO_EXPLORE: "Homepage_hero_explore",
 
-	// Homepage Section Events
-	HOMEPAGE_ABUNDANCE_LEARN: "Homepage_abundance_learn",
+	// Homepage Media Row Events
 	HOMEPAGE_UNSTOPPABLE_BUILD: "Homepage_unstoppable_build",
 	HOMEPAGE_UNSTOPPABLE_DEPLOY: "Homepage_unstoppable_deploy",
 	HOMEPAGE_CUSTOMIZABILITY_BUILD: "Homepage_customizability_build-modular",
 	HOMEPAGE_CUSTOMIZABILITY_DEPLOY: "Homepage_customizability_deploy",
+	HOMEPAGE_ABUNDANCE_LEARN: "Homepage_abundance_learn",
 
 	// Homepage Explore Events
 	HOMEPAGE_EXPLORE_RUN_NODE: "Homepage_explore_run-node",