Merge pull request #60 from celestiaorg/hotfix/plausible-custom-event…

…s-tracking Added custom tracking strategy config, and hero section cta tracking …
celestiaorg · Jan 26, 2025 · 8b8907a · 8b8907a
2 parents 5ff9655 + 0a8bd71
commit 8b8907a
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 82 deletions.
diff --git a/src/app/page.js b/src/app/page.js
@@ -6,6 +6,7 @@ import HomepageScrollText from "@/components/ScrollText/views/HomepageScrollText
 import ExploreCardsContainer from "@/components/Cards/ExploreCards/ExploreCardsContainer";
 import ExploreCard from "@/components/Cards/ExploreCards/ExploreCard";
 import EcosytemExplorer from "@/components/Ecosystem/EcosytemExplorer/EcosytemExplorer";
+import { ANALYTICS_EVENTS } from "@/constants/analytics";
 
 export default async function Home() {
 	const posts = await getPosts();
@@ -21,8 +22,8 @@ export default async function Home() {
 					</>
 				}
 				buttons={[
-					{ text: "Build", url: "/build" },
-					{ text: "Explore", url: "#explore-celestia" },
+					{ text: "Build", url: "/build", trackEvent: ANALYTICS_EVENTS.HERO_BUILD },
+					{ text: "Explore", url: "#explore-celestia", trackEvent: ANALYTICS_EVENTS.HERO_EXPLORE },
 				]}
 				videos={{
 					src: {
@@ -71,8 +72,8 @@ export default async function Home() {
 						body: [
 							"Build expressive applications previously unimaginable onchain.",
 							<>
-								Celestia’s <Link href={"https://blog.celestia.org/roadmap/"}>roadmap</Link> has a core objective: relentlessly scale
-								beyond 1 GB/s data throughput, removing crypto’s ultimate scaling bottleneck.
+								Celestia&apos;s <Link href={"https://blog.celestia.org/roadmap/"}>roadmap</Link> has a core objective: relentlessly
+								scale beyond 1 GB/s data throughput, removing crypto&apos;s ultimate scaling bottleneck.
 							</>,
 						],
 						buttons: [
@@ -115,7 +116,6 @@ export default async function Home() {
 		</>
 	);
 }
-
 export const getPosts = async () => {
 	const res = await fetch(
 		"https://blog.celestia.org/ghost/api/v3/content/posts/?key=000cf34311006e070b17fffcfd&limit=6&fields=title,text,feature_image,url,excerpt,published_at&formats=plaintext"

diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
@@ -63,7 +63,7 @@ export default function Banner() {
 									fill='none'
 									xmlns='http://www.w3.org/2000/svg'
 								>
-									<path d='M1 1L9 1M9 1V9M9 1L1 9' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' />
+									<path d='M1 1L9 1M9 1V9M9 1L1 9' stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' />
 								</svg>
 							</div>
 						</TertiaryButton>

diff --git a/src/components/Heroes/PrimaryHero.js b/src/components/Heroes/PrimaryHero.js
@@ -20,15 +20,19 @@ const PrimaryHero = ({ headline, subheadline, buttons, videos }) => {
 		}
 	}, []);
 
-	const handleButtonClick = (buttonText, url) => {
-		trackEvent("Button: Hero Click", {
+	const handleButtonClick = (buttonText, url, trackEventName) => {
+		if (!trackEventName) return;
+
+		trackEvent(trackEventName, {
 			props: {
 				button: buttonText,
 				url: url,
-				location: "primary_hero",
+				location: "hero_section",
 				path: window.location.pathname,
 			},
 		});
+
+		console.log("trackEvent", trackEventName);
 	};
 
 	return (
@@ -49,7 +53,7 @@ const PrimaryHero = ({ headline, subheadline, buttons, videos }) => {
 					ref={videoRef}
 					autoPlay
 					muted
-					loop3
+					loop
 					playsInline
 					className={
 						"block md:absolute md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:h-full w-full md:object-cover md:z-0"
@@ -74,7 +78,7 @@ const PrimaryHero = ({ headline, subheadline, buttons, videos }) => {
 						{buttons.map((button, index) => (
 							<BorderButton
 								key={index}
-								onClick={() => handleButtonClick(button.text, button.url)}
+								onClick={() => handleButtonClick(button.text, button.url, button.trackEvent)}
 								href={button.url}
 								className='md:inline-flex'
 							>

diff --git a/src/constants/analytics.ts b/src/constants/analytics.ts
@@ -0,0 +1,39 @@
+export const ANALYTICS_EVENTS = {
+	// Homepage Hero Events
+	HERO_BUILD: "Homepage_hero_build",
+	HERO_EXPLORE: "Homepage_hero_explore",
+
+	// Homepage Section Events
+	HOMEPAGE_ABUNDANCE_LEARN: "Homepage_abundance_learn",
+	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 Explore Events
+	HOMEPAGE_EXPLORE_RUN_NODE: "Homepage_explore_run-node",
+	HOMEPAGE_EXPLORE_TIA: "Homepage_explore_tia",
+	HOMEPAGE_EXPLORE_COMMUNITY: "Homepage_explore_community",
+	HOMEPAGE_ECOSYSTEM_VIEW: "Homepage_ecosystem_view",
+
+	// Portal Framework Events
+	PORTAL_FRAMEWORK_ARB_ORBIT: "Portal_framework_arb-orbit",
+	PORTAL_FRAMEWORK_DYMENSION: "Portal_framework_dymension",
+	PORTAL_FRAMEWORK_OP_STACK: "Portal_framework_op-stack",
+	PORTAL_FRAMEWORK_ROLLKIT: "Portal_framework_rollkit",
+	PORTAL_FRAMEWORK_SOV_SDK: "Portal_framework_sov-sdk",
+	PORTAL_FRAMEWORK_ABC_STACK: "Portal_framework_abc-stack",
+
+	// Portal RaaS Events
+	PORTAL_RAAS_ALTLAYER: "Portal_raas_altlayer",
+	PORTAL_RAAS_ASTRIA: "Portal_raas_astria",
+	PORTAL_RAAS_CALDERA: "Portal_raas_caldera",
+	PORTAL_RAAS_CONDUIT: "Portal_raas_conduit",
+	PORTAL_RAAS_GATEWAY: "Portal_raas_gateway",
+	PORTAL_RAAS_GELATO: "Portal_raas_gelato",
+	PORTAL_RAAS_KARNOT: "Portal_raas_karnot",
+	PORTAL_RAAS_LUMOZ: "Portal_raas_lumoz",
+	PORTAL_RAAS_SNAPCHAIN: "Portal_raas_snapchain",
+	PORTAL_RAAS_VISTARA: "Portal_raas_vistara",
+	PORTAL_RAAS_ZEEVE: "Portal_raas_zeeve",
+} as const;
diff --git a/src/macros/Buttons/BorderButton.js b/src/macros/Buttons/BorderButton.js
@@ -3,50 +3,43 @@ import { getButtonType } from "@/utils/getButtonType";
 import Icon from "@/macros/Icons/Icon";
 import ArrowLongSVG from "../SVGs/ArrowLongSVG";
 
-const BorderButton = ({
-  onClick = null,
-  href = null,
-  self = null,
-  children,
-  className,
-  iconDirection = "down-right",
-}) => {
-  // define what element the button should render as
-  const buttonType = getButtonType(href, onClick);
-  const ButtonTypes = {
-    anchor: Link,
-    button: "button",
-    div: "div",
-  };
-  const Button = ButtonTypes[buttonType];
+const BorderButton = ({ onClick = null, href = null, self = null, children, className, iconDirection = "down-right" }) => {
+	// define what element the button should render as
+	const buttonType = getButtonType(href, onClick);
+	const ButtonTypes = {
+		anchor: Link,
+		button: "button",
+		div: "div",
+	};
+	const Button = ButtonTypes[buttonType];
 
-  return (
-    <Button
-      href={href}
-      onClick={onClick}
-      self={self}
-      className={`flex justify-between items-center group py-3 px-0 group relative overflow-hidden transition-all duration-200 hover:px-4 text-black no-underline border-t border-black ${className}`}
-    >
-      <div
-        className={`z-0 absolute w-0 h-[200%] top-full left-1/2 -translate-x-1/2 block rounded-full transition-all duration-200 group-hover:top-0 group-hover:w-full group-hover:scale-125 bg-black`}
-      ></div>
-      <p
-        className={`relative z-10 text-xl leading-[1.2] uppercase tracking-wider grow-1 pr-14 group-hover:text-white transition-colors duration-200`}
-      >
-        {children}
-      </p>
-      <Icon
-        Icon={<ArrowLongSVG />}
-        hover
-        HoverIcon={<ArrowLongSVG />}
-        className={`flex-grow-0 shrink-0`}
-        direction={iconDirection}
-        border={false}
-        size={"sm"}
-        transparentBg
-      />
-    </Button>
-  );
+	return (
+		<Button
+			href={href}
+			onClick={onClick}
+			self={self}
+			className={`flex justify-between items-center group py-3 px-0 group relative overflow-hidden transition-all duration-200 hover:px-4 text-black no-underline border-t border-black ${className}`}
+		>
+			<div
+				className={`z-0 absolute w-0 h-[200%] top-full left-1/2 -translate-x-1/2 block rounded-full transition-all duration-200 group-hover:top-0 group-hover:w-full group-hover:scale-125 bg-black`}
+			></div>
+			<p
+				className={`relative z-10 text-xl leading-[1.2] uppercase tracking-wider grow-1 pr-14 group-hover:text-white transition-colors duration-200`}
+			>
+				{children}
+			</p>
+			<Icon
+				Icon={<ArrowLongSVG />}
+				hover
+				HoverIcon={<ArrowLongSVG />}
+				className={`flex-grow-0 shrink-0`}
+				direction={iconDirection}
+				border={false}
+				size={"sm"}
+				transparentBg
+			/>
+		</Button>
+	);
 };
 
 export default BorderButton;
diff --git a/src/macros/SVGs/SocialSVG.js b/src/macros/SVGs/SocialSVG.js
@@ -1,36 +1,23 @@
 import useThemeColors from "@/utils/useThemeColors";
 
 const SocialSVG = ({ dark = false, className = "" }) => {
-  const colors = useThemeColors();
-  const fill = dark ? colors.white.DEFAULT : colors.black.DEFAULT;
+	const colors = useThemeColors();
+	const fill = dark ? colors.white.DEFAULT : colors.black.DEFAULT;
 
-  return (
-    <svg
-      width="40"
-      height="40"
-      viewBox="0 0 40 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <svg
-        width="40"
-        height="41"
-        viewBox="0 0 40 41"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M13.8714 22.173L26.1249 29.0655M26.1249 11.9345L13.8714 18.827M14.3101 20.5C14.3101 22.3849 12.7821 23.9128 10.8972 23.9128C9.01236 23.9128 7.48438 22.3849 7.48438 20.5C7.48438 18.6151 9.01236 17.0872 10.8972 17.0872C12.7821 17.0872 14.3101 18.6151 14.3101 20.5ZM32.5119 10.2615C32.5119 12.1463 30.9839 13.6743 29.099 13.6743C27.2142 13.6743 25.6862 12.1463 25.6862 10.2615C25.6862 8.37661 27.2142 6.84863 29.099 6.84863C30.9839 6.84863 32.5119 8.37661 32.5119 10.2615ZM32.5119 30.7385C32.5119 32.6234 30.9839 34.1514 29.099 34.1514C27.2142 34.1514 25.6862 32.6234 25.6862 30.7385C25.6862 28.8537 27.2142 27.3257 29.099 27.3257C30.9839 27.3257 32.5119 28.8537 32.5119 30.7385Z"
-          stroke={fill}
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
+	return (
+		<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
+			<svg width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'>
+				<path
+					d='M13.8714 22.173L26.1249 29.0655M26.1249 11.9345L13.8714 18.827M14.3101 20.5C14.3101 22.3849 12.7821 23.9128 10.8972 23.9128C9.01236 23.9128 7.48438 22.3849 7.48438 20.5C7.48438 18.6151 9.01236 17.0872 10.8972 17.0872C12.7821 17.0872 14.3101 18.6151 14.3101 20.5ZM32.5119 10.2615C32.5119 12.1463 30.9839 13.6743 29.099 13.6743C27.2142 13.6743 25.6862 12.1463 25.6862 10.2615C25.6862 8.37661 27.2142 6.84863 29.099 6.84863C30.9839 6.84863 32.5119 8.37661 32.5119 10.2615ZM32.5119 30.7385C32.5119 32.6234 30.9839 34.1514 29.099 34.1514C27.2142 34.1514 25.6862 32.6234 25.6862 30.7385C25.6862 28.8537 27.2142 27.3257 29.099 27.3257C30.9839 27.3257 32.5119 28.8537 32.5119 30.7385Z'
+					stroke={fill}
+					strokeLinecap='round'
+					strokeLinejoin='round'
+				/>
+			</svg>
 
-      {/* fill={fill} */}
-    </svg>
-  );
+			{/* fill={fill} */}
+		</svg>
+	);
 };
 
 export default SocialSVG;
diff --git a/src/utils/getPosts.js b/src/utils/getPosts.js
@@ -0,0 +1 @@
+