Add PostHog analytics — full event tracking across all pages

Tracks pageviews, hero/CTA clicks, product teaser clicks, app card
and detail views, newsletter signups, nav interactions, and footer
link clicks with structured properties for PostHog dashboards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/PostHogProvider.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+import { initPostHog, posthog } from '@/lib/posthog'
+
+export default function PostHogProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    initPostHog()
+  }, [])
+
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (posthog.__loaded) {
+      posthog.capture('$pageview', { $current_url: window.location.href })
+    }
+  }, [pathname])
+
+  return <>{children}</>
+}

components/ui/Footer.tsx

@@ -1,4 +1,7 @@
+'use client'
+
 import Link from 'next/link'
+import { posthog } from '@/lib/posthog'
 
 export default function Footer() {
   return (
@@ -25,10 +28,10 @@ export default function Footer() {
               Entdecken
             </h4>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-              <FooterLink href="/shop">Shop</FooterLink>
-              <FooterLink href="/apps">Apps</FooterLink>
-              <FooterLink href="/#ueber">Über uns</FooterLink>
-              <FooterLink href="/#newsletter">Newsletter</FooterLink>
+              <FooterLink href="/shop" section="Entdecken">Shop</FooterLink>
+              <FooterLink href="/apps" section="Entdecken">Apps</FooterLink>
+              <FooterLink href="/#ueber" section="Entdecken">Über uns</FooterLink>
+              <FooterLink href="/#newsletter" section="Entdecken">Newsletter</FooterLink>
             </div>
           </div>
 
@@ -38,10 +41,10 @@ export default function Footer() {
               Service
             </h4>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-              <FooterLink href="#">Versand</FooterLink>
-              <FooterLink href="#">Kontakt</FooterLink>
-              <FooterLink href="#">Impressum</FooterLink>
-              <FooterLink href="#">Datenschutz</FooterLink>
+              <FooterLink href="#" section="Service">Versand</FooterLink>
+              <FooterLink href="#" section="Service">Kontakt</FooterLink>
+              <FooterLink href="#" section="Service">Impressum</FooterLink>
+              <FooterLink href="#" section="Service">Datenschutz</FooterLink>
             </div>
           </div>
 
@@ -56,6 +59,7 @@ export default function Footer() {
                   key={abbr}
                   href="#"
                   title={label}
+                  onClick={() => posthog.capture('footer_link_clicked', { label, section: 'Folgen' })}
                   style={{
                     textDecoration: 'none',
                     width: 42,
@@ -86,9 +90,13 @@ export default function Footer() {
   )
 }
 
-function FooterLink({ href, children }: { href: string; children: React.ReactNode }) {
+function FooterLink({ href, section, children }: { href: string; section: string; children: React.ReactNode }) {
   return (
-    <Link href={href} style={{ textDecoration: 'none', fontSize: 14.5, color: 'rgba(250,250,247,0.7)' }}>
+    <Link
+      href={href}
+      onClick={() => posthog.capture('footer_link_clicked', { label: String(children), section })}
+      style={{ textDecoration: 'none', fontSize: 14.5, color: 'rgba(250,250,247,0.7)' }}
+    >
       {children}
     </Link>
   )

components/ui/Nav.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link'
 import { useState } from 'react'
+import { posthog } from '@/lib/posthog'
 
 const apps = [
   { name: 'Snakkimo', href: '/apps/snakkimo', accent: '#7BA7BC' },
@@ -26,7 +27,7 @@ export default function Nav() {
       }}
     >
       {/* Logo */}
-      <Link href="/" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
+      <Link href="/" onClick={() => posthog.capture('nav_link_clicked', { label: 'Logo', href: '/' })} style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
         <div
           style={{
             width: 34,
@@ -50,8 +51,8 @@ export default function Nav() {
 
       {/* Nav links */}
       <nav style={{ display: 'flex', alignItems: 'center', gap: 38 }}>
-        <Link href="/#ueber" style={navLinkStyle}>Über uns</Link>
-        <Link href="/shop" style={navLinkStyle}>Shop</Link>
+        <Link href="/#ueber" onClick={() => posthog.capture('nav_link_clicked', { label: 'Über uns', href: '/#ueber' })} style={navLinkStyle}>Über uns</Link>
+        <Link href="/shop" onClick={() => posthog.capture('nav_link_clicked', { label: 'Shop', href: '/shop' })} style={navLinkStyle}>Shop</Link>
 
         {/* Apps dropdown */}
         <div
@@ -61,7 +62,11 @@ export default function Nav() {
         >
           <button
             style={{ ...navLinkStyle, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
-            onClick={() => setAppsOpen((v) => !v)}
+            onClick={() => {
+              const next = !appsOpen
+              setAppsOpen(next)
+              if (next) posthog.capture('nav_apps_dropdown_opened')
+            }}
             aria-expanded={appsOpen}
           >
             Apps
@@ -98,7 +103,7 @@ export default function Nav() {
                     fontSize: 14.5,
                     fontWeight: 500,
                   }}
-                  onClick={() => setAppsOpen(false)}
+                  onClick={() => { setAppsOpen(false); posthog.capture('nav_link_clicked', { label: app.name, href: app.href }) }}
                 >
                   <span
                     style={{
@@ -118,6 +123,7 @@ export default function Nav() {
 
         <Link
           href="/#newsletter"
+          onClick={() => posthog.capture('newsletter_cta_clicked', { source: 'nav' })}
           style={{
             textDecoration: 'none',
             color: '#FAFAF7',

components/ui/NewsletterForm.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import { useState } from 'react'
+import { posthog } from '@/lib/posthog'
 
-export default function NewsletterForm() {
+export default function NewsletterForm({ source = 'homepage' }: { source?: string }) {
   const [email, setEmail] = useState('')
   const [submitted, setSubmitted] = useState(false)
 
@@ -21,7 +22,10 @@ export default function NewsletterForm() {
     <form
       onSubmit={(e) => {
         e.preventDefault()
-        if (email.trim()) setSubmitted(true)
+        if (email.trim()) {
+        posthog.capture('newsletter_signup', { source })
+        setSubmitted(true)
+      }
       }}
       style={{ display: 'flex', gap: 12, maxWidth: 480, margin: '0 auto', flexWrap: 'wrap' }}
     >