Merge pull request #5 from 0xPlaygrounds/adm-1039-add-posthog-to-new-pg-website

mateobelanger · web-flow · commit 72a9d02d7669 · 2025-09-05T00:20:31.000+02:00
ADM-1039 Add posthog to new pg website
diff --git a/next.config.ts b/next.config.ts
@@ -1,7 +1,25 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  async rewrites() {
+    const posthogHost =
+      process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com';
+
+    try {
+      const url = new URL(posthogHost);
+      const target = `${url.origin}/`;
+
+      return [
+        {
+          source: '/panopticon/:path*',
+          destination: `${target}:path*`,
+        },
+      ];
+    } catch (error) {
+      console.error('Invalid PostHog URL:', posthogHost);
+      return [];
+    }
+  },
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -14,7 +14,9 @@
     "pre-commit": "lint-staged"
   },
   "dependencies": {
+    "@posthog/nextjs": "^0.0.2",
     "next": "15.4.6",
+    "posthog-js": "^1.260.2",
     "react": "19.1.0",
     "react-dom": "19.1.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next';
 import './globals.css';
 import localFont from 'next/font/local';
+import { PostHogClientProvider } from '@/components/analytics/PostHogProvider';
+import { Suspense } from 'react';
 
 export const metadata: Metadata = {
   title: 'Plagrounds',
@@ -73,7 +75,9 @@ export default function RootLayout({
         <link rel="stylesheet" href="https://use.typekit.net/hml2duc.css" />
       </head>
       <body className={`antialiased ${neueHaas.variable} font-sans`}>
-        {children}
+        <Suspense fallback={null}>
+          <PostHogClientProvider>{children}</PostHogClientProvider>
+        </Suspense>
       </body>
     </html>
   );
diff --git a/src/components/analytics/PostHogProvider.tsx b/src/components/analytics/PostHogProvider.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import posthog from 'posthog-js';
+import { useEffect, useState } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export function PostHogClientProvider({ children }: Props) {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || isInitialized) return;
+
+    const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+    if (!key) return;
+
+    posthog.init(key, {
+      api_host: '/panopticon',
+      capture_pageview: true,
+      autocapture: true,
+    });
+    setIsInitialized(true);
+    posthog.capture('$pageview');
+  }, [isInitialized]);
+
+  useEffect(() => {
+    if (!isInitialized) return;
+    posthog.capture('$pageview');
+  }, [pathname, searchParams, isInitialized]);
+
+  return <>{children}</>;
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,4 +1,7 @@
+'use client';
+
 import Image from 'next/image';
+import posthog from 'posthog-js';
 
 export const Footer = () => {
   const currentYear = new Date().getFullYear();
@@ -62,6 +65,12 @@ export const Footer = () => {
                   <a
                     href="mailto:info@playgrounds.com"
                     className="hover:underline"
+                    onClick={() => {
+                      posthog.capture('cta_click', {
+                        cta: 'footer_email',
+                        href: 'mailto:info@playgrounds.com',
+                      });
+                    }}
                   >
                     info@playgrounds.com
                   </a>
@@ -80,20 +89,38 @@ export const Footer = () => {
                     href="https://github.com/0xPlaygrounds"
                     target="_blank"
                     className="hover:underline"
+                    onClick={() => {
+                      posthog.capture('cta_click', {
+                        cta: 'footer_github',
+                        href: 'https://github.com/0xPlaygrounds',
+                      });
+                    }}
                   >
                     Github
                   </a>
                   <a
                     href="https://www.youtube.com/@arcdotfun"
                     target="_blank"
                     className="hover:underline"
+                    onClick={() => {
+                      posthog.capture('cta_click', {
+                        cta: 'footer_youtube',
+                        href: 'https://www.youtube.com/@arcdotfun',
+                      });
+                    }}
                   >
                     Youtube
                   </a>
                   <a
                     href="https://x.com/Playgrounds0x"
                     target="_blank"
                     className="hover:underline"
+                    onClick={() => {
+                      posthog.capture('cta_click', {
+                        cta: 'footer_x',
+                        href: 'https://x.com/Playgrounds0x',
+                      });
+                    }}
                   >
                     X
                   </a>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Image from 'next/image';
+import posthog from 'posthog-js';
 
 export const Navbar = () => {
   return (
@@ -18,12 +19,19 @@ export const Navbar = () => {
             target="_blank"
             rel="noopener noreferrer"
             className="h-8 cursor-pointer flex border bg-black border-[#333333] hover:border-white/50 transition duration-300 ease-in-out rounded items-center px-3 text-[13px] justify-center"
+            onClick={() => {
+              posthog.capture('cta_click', {
+                cta: 'navbar_github',
+                href: 'https://github.com/0xPlaygrounds',
+              });
+            }}
           >
             Github
           </a>
           <div
             className="h-8 cursor-pointer transition duration-300 ease-in-out hover:bg-white/80 flex bg-white px-3 text-[13px] rounded text-[#030304] items-center justify-center"
             onClick={() => {
+              posthog.capture('cta_click', { cta: 'navbar_products_scroll' });
               const element = document.getElementById('products');
               if (element) {
                 element.scrollIntoView({ behavior: 'smooth' });
diff --git a/src/components/threePlatforms.tsx b/src/components/threePlatforms.tsx
@@ -1,25 +1,37 @@
 import Image from 'next/image';
 
 export const ThreePlatforms = () => {
+  const buildUtmUrl = (base: string, content: string) => {
+    const url = new URL(base);
+    url.searchParams.set('utm_source', 'playgrounds.network');
+    url.searchParams.set('utm_medium', 'referral');
+    url.searchParams.set('utm_campaign', 'homepage');
+    url.searchParams.set('utm_content', content);
+    return url.toString();
+  };
+
   const platforms = [
     {
       name: 'Rig',
       logo: '/assets/projects/rig-logo.webp',
       bgImage: '/assets/projects/rig-bg.webp',
+      href: buildUtmUrl('https://rig.rs/', 'three_platforms_rig'),
       description:
         'Open-source Rust LLM framework providing high-performance, modular APIs for building scalable AI applications with type safety and lightning-fast execution.',
     },
     {
       name: 'Arc',
       logo: '/assets/projects/arc-logo.webp',
       bgImage: '/assets/projects/arc-bg.webp',
+      href: buildUtmUrl('https://arc.fun/', 'three_platforms_arc'),
       description:
         'AI Rig Complex - A thriving community ecosystem fostering partnerships, side projects, and collaborative innovation built around the Rig framework.',
     },
     {
       name: 'Ryzome',
       logo: '/assets/projects/ryzome-logo.webp',
       bgImage: '/assets/projects/ryzome-bg.webp',
+      href: buildUtmUrl('https://ryzome.ai/', 'three_platforms_ryzome'),
       description:
         'AI-powered workspace platform that transforms how teams collaborate, create, and innovate. The user-facing canvas that brings AI capabilities to everyday workflows.',
     },
@@ -41,30 +53,46 @@ export const ThreePlatforms = () => {
         Pick and choose what you want to create.
       </span>
       <div className="max-w-[1216px] flex-col gap-y-6 md:flex-row pt-12 md:pt-16 flex gap-x-4">
-        {platforms.map((platform, index) => (
-          <div key={index} className="flex flex-col gap-y-6">
-            <div className="relative w-full h-[296px] border border-[#333333] rounded-lg overflow-hidden group">
-              <Image
-                src={platform.bgImage}
-                alt=""
-                fill
-                className="object-cover transition-opacity duration-[1000ms] opacity-0 group-hover:opacity-100"
-              />
-              <div className="absolute inset-0 bg-black/20" />
-              <div className="relative z-10 flex items-center justify-center w-full h-full">
+        {platforms.map((platform, index) => {
+          const Card = (
+            <div className="flex flex-col gap-y-6">
+              <div className="relative w-full h-[296px] border border-[#333333] rounded-lg overflow-hidden group">
                 <Image
-                  src={platform.logo}
-                  alt={platform.name}
-                  width={250}
-                  height={250}
-                  className="transition-transform duration-500 group-hover:scale-105"
+                  src={platform.bgImage}
+                  alt=""
+                  fill
+                  className="object-cover transition-opacity duration-[1000ms] opacity-0 group-hover:opacity-100"
                 />
+                <div className="absolute inset-0 bg-black/20" />
+                <div className="relative z-10 flex items-center justify-center w-full h-full">
+                  <Image
+                    src={platform.logo}
+                    alt={platform.name}
+                    width={250}
+                    height={250}
+                    className="transition-transform duration-500 group-hover:scale-105"
+                  />
+                </div>
               </div>
+              <span className="text-[18px]">{platform.name}</span>
+              <span className="text-[#808080]">{platform.description}</span>
             </div>
-            <span className="text-[18px]">{platform.name}</span>
-            <span className="text-[#808080]">{platform.description}</span>
-          </div>
-        ))}
+          );
+
+          return platform.href ? (
+            <a
+              key={index}
+              href={platform.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group"
+            >
+              {Card}
+            </a>
+          ) : (
+            <div key={index}>{Card}</div>
+          );
+        })}
       </div>
     </div>
   );
