Merge pull request #18 from celestiaorg/hotfix/test-plausible

Fix test plausible
celestiaorg · Jan 7, 2025 · fbbfe84 · fbbfe84
2 parents afeac65 + 8ec171a
commit fbbfe84
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 83 deletions.
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -7,21 +7,25 @@ import "./styles/text-link.scss";
 import { Suspense } from "react";
 import meta from "@/components/Meta/Meta";
 import LoadingScreen from "@/components/Loading/LoadingScreen";
+import Plausible from "@/components/Analytics/Plausible";
 
 export const metadata = meta();
 
 export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={`text-black`}>
-        <ScrollPositionProvider>
-          <Nav />
-          <main id={"main-content"}>
-            <Suspense fallback={<LoadingScreen />}>{children}</Suspense>
-          </main>
-          <Footer />
-        </ScrollPositionProvider>
-      </body>
-    </html>
-  );
+	return (
+		<html lang='en'>
+			<head>
+				<Plausible />
+			</head>
+			<body className={`text-black`}>
+				<ScrollPositionProvider>
+					<Nav />
+					<main id={"main-content"}>
+						<Suspense fallback={<LoadingScreen />}>{children}</Suspense>
+					</main>
+					<Footer />
+				</ScrollPositionProvider>
+			</body>
+		</html>
+	);
 }
diff --git a/src/components/Analytics/Plausible.js b/src/components/Analytics/Plausible.js
@@ -0,0 +1,23 @@
+"use client";
+
+import Script from "next/script";
+
+export default function Plausible() {
+	return (
+		<>
+			<Script
+				defer
+				data-domain='celestia.org'
+				src='https://plausible.io/js/script.file-downloads.hash.outbound-links.pageview-props.tagged-events.js'
+				strategy='afterInteractive'
+			/>
+			<Script id='plausible-setup' strategy='afterInteractive'>
+				{`
+          window.plausible = window.plausible || function() { 
+            (window.plausible.q = window.plausible.q || []).push(arguments) 
+          }
+        `}
+			</Script>
+		</>
+	);
+}
diff --git a/src/components/Heroes/PrimaryHero.js b/src/components/Heroes/PrimaryHero.js
@@ -3,79 +3,72 @@ import { useEffect, useRef } from "react";
 import Container from "@/components/Container/Container";
 import BorderButton from "@/macros/Buttons/BorderButton";
 import { Display, Body } from "@/macros/Copy";
+import { usePlausible } from "@/hooks/usePlausible";
 
 const PrimaryHero = ({ headline, subheadline, buttons, videos }) => {
-  const videoRef = useRef(null);
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.play().catch((error) => {
-        // Handle error if playback fails
-        console.error("Video failed to play:", error);
-      });
-    }
-  }, []);
+	const videoRef = useRef(null);
+	const trackEvent = usePlausible();
 
-  return (
-    <section
-      className={`bg-white-weak relative md:min-h-[70vh] lg:min-h-[90vh] flex flex-col-reverse md:block content-center`}
-    >
-      {videos && (
-        <video
-          ref={videoRef}
-          autoPlay
-          muted
-          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"
-          }
-        >
-          <source
-            src={videos.src.xl}
-            type="video/mp4"
-            media="(min-width: 1024px)"
-          />
-          <source
-            src={videos.src.lg}
-            type="video/mp4"
-            media="(min-width: 768px)"
-          />
-          <source
-            src={videos.src.sm}
-            type="video/mp4"
-            media="(max-width: 767px)"
-          />
-          {videos.poster.lg && (
-            <img src={videos.poster.lg} alt="" media="(min-width: 768px)" />
-          )}
-          {videos.poster.sm && (
-            <img src={videos.poster.sm} alt="" media="(max-width: 767px)" />
-          )}
-        </video>
-      )}
-      <Container size={`lg`} className="relative z-10 pt-36 lg:pt-10 lg:pb-10">
-        <div className={`w-full md:w-3/4 lg:w-1/2 lg:pt-32 lg:my-auto`}>
-          <Display size={"lg"} className={`mb-4`}>
-            {headline}
-          </Display>
-          <Body size={"lg"} className={`mb-8`}>
-            {subheadline}
-          </Body>
-          <div className="w-10/12 md:w-full md:flex md:flex-wrap gap-4 lg:gap-10">
-            {buttons.map((button, index) => (
-              <BorderButton
-                href={button.url}
-                key={index}
-                className="md:inline-flex"
-              >
-                {button.text}
-              </BorderButton>
-            ))}
-          </div>
-        </div>
-      </Container>
-    </section>
-  );
+	useEffect(() => {
+		if (videoRef.current) {
+			videoRef.current.play().catch((error) => {
+				// Handle error if playback fails
+				console.error("Video failed to play:", error);
+			});
+		}
+	}, []);
+
+	const handleButtonClick = (buttonText, url) => {
+		trackEvent("hero_button_click", {
+			button_text: buttonText,
+			destination: url,
+		});
+	};
+
+	return (
+		<section className={`bg-white-weak relative md:min-h-[70vh] lg:min-h-[90vh] flex flex-col-reverse md:block content-center`}>
+			{videos && (
+				<video
+					ref={videoRef}
+					autoPlay
+					muted
+					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"
+					}
+				>
+					<source src={videos.src.xl} type='video/mp4' media='(min-width: 1024px)' />
+					<source src={videos.src.lg} type='video/mp4' media='(min-width: 768px)' />
+					<source src={videos.src.sm} type='video/mp4' media='(max-width: 767px)' />
+					{videos.poster.lg && <img src={videos.poster.lg} alt='' media='(min-width: 768px)' />}
+					{videos.poster.sm && <img src={videos.poster.sm} alt='' media='(max-width: 767px)' />}
+				</video>
+			)}
+			<Container size={`lg`} className='relative z-10 pt-36 lg:pt-10 lg:pb-10'>
+				<div className={`w-full md:w-3/4 lg:w-1/2 lg:pt-32 lg:my-auto`}>
+					<Display size={"lg"} className={`mb-4`}>
+						{headline}
+					</Display>
+					<Body size={"lg"} className={`mb-8`}>
+						{subheadline}
+					</Body>
+					<div className='w-10/12 gap-4 md:w-full md:flex md:flex-wrap lg:gap-10'>
+						{buttons.map((button, index) => (
+							<BorderButton
+								key={index}
+								onClick={() => handleButtonClick(button.text, button.url)}
+								href={button.url}
+								className='md:inline-flex'
+							>
+								{button.text}
+							</BorderButton>
+						))}
+					</div>
+				</div>
+			</Container>
+		</section>
+	);
 };
 
 export default PrimaryHero;
diff --git a/src/hooks/usePlausible.js b/src/hooks/usePlausible.js
@@ -0,0 +1,11 @@
+"use client";
+
+export function usePlausible() {
+	const trackEvent = (eventName, props = {}) => {
+		if (typeof window !== "undefined" && window.plausible) {
+			window.plausible(eventName, { props });
+		}
+	};
+
+	return trackEvent;
+}