feat: Implement analytics tracking with cookie consent and enhance SEO with backlink management.

src/components/CookieBanner.tsx

@@ -37,65 +37,65 @@ export default function CookieBanner() {
         <>
           {/* Cookie Banner - Bottom Left Corner */}
           <div className="fixed bottom-4 left-4 z-50 max-w-md animate-slide-in">
-        <div className="bg-white rounded-lg shadow-2xl border border-gray-200 p-6">
-          <div className="flex items-start gap-3 mb-4">
-            <div className="flex-shrink-0">
-              <svg className="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-              </svg>
-            </div>
-            <div>
-              <h3 className="text-base font-semibold text-gray-900 mb-2">
-                We use cookies
-              </h3>
-              <p className="text-gray-600 text-sm leading-relaxed mb-3">
-                We use essential cookies for authentication and analytics cookies to improve your experience.{' '}
-                <Link href="/privacy" className="text-primary-600 hover:text-primary-700 font-medium underline">
-                  Learn more about our privacy policy
-                </Link>
-              </p>
+            <div className="bg-white rounded-lg shadow-2xl border border-gray-200 p-6">
+              <div className="flex items-start gap-3 mb-4">
+                <div className="flex-shrink-0">
+                  <svg className="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 className="text-base font-semibold text-gray-900 mb-2">
+                    We use cookies
+                  </h3>
+                  <p className="text-gray-600 text-sm leading-relaxed mb-3">
+                    We use essential cookies for authentication and analytics cookies to improve your experience.{' '}
+                    <Link href="/privacy" className="text-primary-600 hover:text-primary-700 font-medium underline">
+                      Learn more about our privacy policy
+                    </Link>
+                  </p>
 
-              {/* Cookie Categories */}
-              <div className="space-y-1.5 mb-4">
-                <div className="flex items-center text-xs">
-                  <svg className="w-3.5 h-3.5 text-success-600 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
-                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                  </svg>
-                  <span className="text-gray-700"><strong>Essential:</strong> Authentication, CSRF protection</span>
-                </div>
-                <div className="flex items-center text-xs">
-                  <svg className="w-3.5 h-3.5 text-primary-600 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
-                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                  </svg>
-                  <span className="text-gray-700"><strong>Analytics:</strong> PostHog for website analytics</span>
+                  {/* Cookie Categories */}
+                  <div className="space-y-1.5 mb-4">
+                    <div className="flex items-center text-xs">
+                      <svg className="w-3.5 h-3.5 text-success-600 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                      </svg>
+                      <span className="text-gray-700"><strong>Essential:</strong> Authentication, CSRF protection</span>
+                    </div>
+                    <div className="flex items-center text-xs">
+                      <svg className="w-3.5 h-3.5 text-primary-600 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                      </svg>
+                      <span className="text-gray-700"><strong>Analytics:</strong> PostHog & Google Analytics</span>
+                    </div>
+                  </div>
                 </div>
               </div>
+
+              {/* Actions */}
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={handleDecline}
+                  size="sm"
+                  className="flex-1"
+                >
+                  Decline
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={handleAccept}
+                  size="sm"
+                  className="flex-1"
+                >
+                  Accept All
+                </Button>
+              </div>
             </div>
           </div>
 
-          {/* Actions */}
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              onClick={handleDecline}
-              size="sm"
-              className="flex-1"
-            >
-              Decline
-            </Button>
-            <Button
-              variant="primary"
-              onClick={handleAccept}
-              size="sm"
-              className="flex-1"
-            >
-              Accept All
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <style jsx>{`
+          <style jsx>{`
         @keyframes slide-in {
           from {
             transform: translateX(-100%);

src/components/PostHogProvider.tsx

@@ -12,15 +12,29 @@ export function PostHogPageView() {
 
   useEffect(() => {
     const cookieConsent = localStorage.getItem('cookieConsent');
-    if (cookieConsent === 'accepted' && pathname && (posthog as any)._loaded) {
-      let url = window.origin + pathname;
-      if (searchParams && searchParams.toString()) {
-        url = url + `?${searchParams.toString()}`;
-      }
+    if (cookieConsent === 'accepted' && pathname) {
+      // If posthog is loaded, capture immediately
+      if ((posthog as any)._loaded) {
+        let url = window.origin + pathname;
+        if (searchParams && searchParams.toString()) {
+          url = url + `?${searchParams.toString()}`;
+        }
 
-      posthog.capture('$pageview', {
-        $current_url: url,
-      });
+        posthog.capture('$pageview', {
+          $current_url: url,
+        });
+      } else {
+        // If not loaded yet, wait for it
+        posthog.onFeatureFlags(() => {
+          let url = window.origin + pathname;
+          if (searchParams && searchParams.toString()) {
+            url = url + `?${searchParams.toString()}`;
+          }
+          posthog.capture('$pageview', {
+            $current_url: url,
+          });
+        });
+      }
     }
   }, [pathname, searchParams]);
 
@@ -28,13 +42,7 @@ export function PostHogPageView() {
 }
 
 export function PostHogProvider({ children }: { children: React.ReactNode }) {
-  const [initializationAttempted, setInitializationAttempted] = useState(false);
-
-  // Initialize PostHog once
   useEffect(() => {
-    if (initializationAttempted) return;
-    setInitializationAttempted(true);
-
     const cookieConsent = localStorage.getItem('cookieConsent');
 
     if (cookieConsent === 'accepted') {
@@ -62,7 +70,7 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
         }
       }
     }
-  }, [initializationAttempted]);
+  }, []);
 
   return (
     <>

src/components/Providers.tsx

@@ -3,12 +3,19 @@
 import { Suspense } from 'react';
 import { ToastContainer } from '@/components/ui/Toast';
 import AuthProvider from '@/components/SessionProvider';
-import { PostHogProvider } from '@/components/PostHogProvider';
+import { PostHogProvider, PostHogPageView } from '@/components/PostHogProvider';
 import CookieBanner from '@/components/CookieBanner';
+import GoogleAnalytics from '@/components/analytics/GoogleAnalytics';
+import FacebookPixel from '@/components/analytics/FacebookPixel';
 
 export function Providers({ children }: { children: React.ReactNode }) {
     return (
         <PostHogProvider>
+            <Suspense fallback={null}>
+                <PostHogPageView />
+                <GoogleAnalytics />
+                <FacebookPixel />
+            </Suspense>
             <AuthProvider>
                 {children}
             </AuthProvider>

src/components/analytics/GoogleAnalytics.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import Script from 'next/script';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function GoogleAnalytics() {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
+
+    useEffect(() => {
+        if (!GA_MEASUREMENT_ID) return;
+
+        const cookieConsent = localStorage.getItem('cookieConsent');
+        if (cookieConsent !== 'accepted') return;
+
+        const url = pathname + (searchParams?.toString() ? `?${searchParams.toString()}` : '');
+
+        if (typeof window.gtag !== 'undefined') {
+            window.gtag('config', GA_MEASUREMENT_ID, {
+                page_path: url,
+            });
+        }
+    }, [pathname, searchParams, GA_MEASUREMENT_ID]);
+
+    const cookieConsent = typeof window !== 'undefined' ? localStorage.getItem('cookieConsent') : null;
+
+    if (!GA_MEASUREMENT_ID || cookieConsent !== 'accepted') {
+        return null;
+    }
+
+    return (
+        <>
+            <Script
+                strategy="afterInteractive"
+                src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+            />
+            <Script
+                id="google-analytics"
+                strategy="afterInteractive"
+                dangerouslySetInnerHTML={{
+                    __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+
+            gtag('config', '${GA_MEASUREMENT_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+                }}
+            />
+        </>
+    );
+}
+
+// Add gtag to window object for TypeScript
+declare global {
+    interface Window {
+        gtag: (command: string, id: string, config?: any) => void;
+        dataLayer: any[];
+    }
+}