feat(analytics): implement total transparency suite and SEO metadata standardization

- Added global ScrollDepthTracker (25%, 50%, 75%, 100%) - Implemented ProductEngagementTracker for deep product analytics - Added field-level tracking to ContactForm and RequestQuoteForm - Standardized SEO metadata (canonical, alternates, x-default) across all routes - Created reusable TrackedLink and TrackedButton components for server components - Fixed 'useAnalytics' hook error in Footer.tsx by adding 'use client'
2026-02-16 18:30:29 +01:00
parent c2e790e533
commit 58d83a7fa1
22 changed files with 634 additions and 98 deletions
--- a/.env
+++ b/.env
@@ -1,6 +1,7 @@
 # Application
 NODE_ENV=production
 NEXT_PUBLIC_BASE_URL=https://klz-cables.com
+UMAMI_WEBSITE_ID=e4a2cd1c-59fb-4e5b-bac5-9dfd1d02dd81
 UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 SENTRY_DSN=https://c10957d0182245b1a2a806ac2d34a197@errors.infra.mintel.me/1
 LOG_LEVEL=info
--- a/app/[locale]/[slug]/page.tsx
+++ b/app/[locale]/[slug]/page.tsx
@@ -6,6 +6,7 @@ import { Metadata } from 'next';
 import { getPageBySlug, getAllPages } from '@/lib/pages';
 import { mdxComponents } from '@/components/blog/MDXComponents';
 import { SITE_URL } from '@/lib/schema';
+import TrackedLink from '@/components/analytics/TrackedLink';

 interface PageProps {
  params: Promise<{
@@ -38,11 +39,11 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
    title: pageData.frontmatter.title,
    description: pageData.frontmatter.excerpt || '',
    alternates: {
-      canonical: `/${locale}/${slug}`,
+      canonical: `${SITE_URL}/${locale}/${slug}`,
      languages: {
-        de: `/de/${slug}`,
-        en: `/en/${slug}`,
-        'x-default': `/en/${slug}`,
+        de: `${SITE_URL}/de/${slug}`,
+        en: `${SITE_URL}/en/${slug}`,
+        'x-default': `${SITE_URL}/en/${slug}`,
      },
    },
    openGraph: {
@@ -110,15 +111,19 @@ export default async function StandardPage({ params }: PageProps) {
            <div className="relative z-10 max-w-2xl">
              <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>
              <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
-              <a
+              <TrackedLink
                href={`/${locale}/contact`}
                className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group/link"
+                eventProperties={{
+                  location: 'generic_page_support_cta',
+                  page_slug: slug,
+                }}
              >
                {t('contactUs')}
                <span className="ml-2 transition-transform group-hover/link:translate-x-1">
                  &rarr;
                </span>
-              </a>
+              </TrackedLink>
            </div>
          </div>
        </div>
--- a/app/[locale]/blog/[slug]/page.tsx
+++ b/app/[locale]/blog/[slug]/page.tsx
@@ -30,11 +30,11 @@ export async function generateMetadata({ params }: BlogPostProps): Promise<Metad
    title: post.frontmatter.title,
    description: description,
    alternates: {
-      canonical: `/${locale}/blog/${slug}`,
+      canonical: `${SITE_URL}/${locale}/blog/${slug}`,
      languages: {
-        de: `/de/blog/${slug}`,
-        en: `/en/blog/${slug}`,
-        'x-default': `/en/blog/${slug}`,
+        de: `${SITE_URL}/de/blog/${slug}`,
+        en: `${SITE_URL}/en/blog/${slug}`,
+        'x-default': `${SITE_URL}/en/blog/${slug}`,
      },
    },
    openGraph: {
--- a/app/[locale]/blog/page.tsx
+++ b/app/[locale]/blog/page.tsx
@@ -4,7 +4,7 @@ import { getAllPosts } from '@/lib/blog';
 import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
 import Reveal from '@/components/Reveal';
 import { Metadata } from 'next';
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { SITE_URL } from '@/lib/schema';

 interface BlogIndexProps {
@@ -20,11 +20,11 @@ export async function generateMetadata({ params }: BlogIndexProps) {
    title: t('title'),
    description: t('description'),
    alternates: {
-      canonical: `/${locale}/blog`,
+      canonical: `${SITE_URL}/${locale}/blog`,
      languages: {
-        de: '/de/blog',
-        en: '/en/blog',
-        'x-default': '/en/blog',
+        de: `${SITE_URL}/de/blog`,
+        en: `${SITE_URL}/en/blog`,
+        'x-default': `${SITE_URL}/en/blog`,
      },
    },
    openGraph: {
@@ -42,6 +42,7 @@ export async function generateMetadata({ params }: BlogIndexProps) {

 export default async function BlogIndex({ params }: BlogIndexProps) {
  const { locale } = await params;
+  setRequestLocale(locale);
  const t = await getTranslations('Blog');
  const posts = await getAllPosts(locale);

--- a/app/[locale]/contact/page.tsx
+++ b/app/[locale]/contact/page.tsx
@@ -26,8 +26,9 @@ export async function generateMetadata({ params }: ContactPageProps): Promise<Me
    alternates: {
      canonical: `${SITE_URL}/${locale}/contact`,
      languages: {
-        'de-DE': '/de/contact',
-        'en-US': '/en/contact',
+        de: `${SITE_URL}/de/contact`,
+        en: `${SITE_URL}/en/contact`,
+        'x-default': `${SITE_URL}/en/contact`,
      },
    },
    openGraph: {
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -2,6 +2,7 @@ import Footer from '@/components/Footer';
 import Header from '@/components/Header';
 import JsonLd from '@/components/JsonLd';
 import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
+import ScrollDepthTracker from '@/components/analytics/ScrollDepthTracker';
 import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
 import { RecordModeProvider } from '@/components/record-mode/RecordModeContext';
 import { RecordModeVisuals } from '@/components/record-mode/RecordModeVisuals';
@@ -111,6 +112,7 @@ export default async function LocaleLayout({

            <Suspense fallback={null}>
              <AnalyticsProvider />
+              <ScrollDepthTracker />
            </Suspense>
            <ToolCoordinator feedbackEnabled={feedbackEnabled} />
          </RecordModeProvider>
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -85,11 +85,11 @@ export async function generateMetadata({
    title,
    description,
    alternates: {
-      canonical: `/${locale}`,
+      canonical: `${SITE_URL}/${locale}`,
      languages: {
-        de: '/de',
-        en: '/en',
-        'x-default': '/en',
+        de: `${SITE_URL}/de`,
+        en: `${SITE_URL}/en`,
+        'x-default': `${SITE_URL}/en`,
      },
    },
    openGraph: {
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -16,6 +16,7 @@ import { MDXRemote } from 'next-mdx-remote/rsc';
 import Image from 'next/image';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
+import ProductEngagementTracker from '@/components/analytics/ProductEngagementTracker';

 interface ProductPageProps {
  params: Promise<{
@@ -52,11 +53,11 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
      title: categoryTitle,
      description: categoryDesc,
      alternates: {
-        canonical: `/${locale}/products/${productSlug}`,
+        canonical: `${SITE_URL}/${locale}/products/${productSlug}`,
        languages: {
-          de: `/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
-          en: `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
-          'x-default': `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+          de: `${SITE_URL}/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+          en: `${SITE_URL}/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+          'x-default': `${SITE_URL}/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
        },
      },
      openGraph: {
@@ -80,11 +81,11 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
    title: product.frontmatter.title,
    description: product.frontmatter.description,
    alternates: {
-      canonical: `/${locale}/products/${slug.join('/')}`,
+      canonical: `${SITE_URL}/${locale}/products/${slug.join('/')}`,
      languages: {
-        de: `/de/products/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
-        en: `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
-        'x-default': `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+        de: `${SITE_URL}/de/products/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+        en: `${SITE_URL}/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+        'x-default': `${SITE_URL}/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
      },
    },
    openGraph: {
@@ -212,7 +213,10 @@ export default async function ProductPage({ params }: ProductPageProps) {
          <Container className="relative z-10">
            <div className="max-w-4xl animate-slide-up">
              <nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
-                <Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
+                <Link
+                  href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`}
+                  className="hover:text-accent transition-colors"
+                >
                  {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
                </Link>
                <span className="mx-3 opacity-30">/</span>
@@ -353,6 +357,12 @@ export default async function ProductPage({ params }: ProductPageProps) {
  return (
    <div className="flex flex-col min-h-screen bg-white relative">
      {/* Product Hero */}
+      <ProductEngagementTracker
+        productName={product.frontmatter.title}
+        productSlug={productSlug}
+        categories={product.frontmatter.categories}
+        sku={product.frontmatter.sku}
+      />
      <section className="relative pt-40 pb-24 overflow-hidden bg-primary-dark">
        {/* Background Decorative Elements */}
        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-accent/5 to-transparent pointer-events-none" />
@@ -361,7 +371,10 @@ export default async function ProductPage({ params }: ProductPageProps) {
        <Container className="relative z-10">
          <div className="max-w-4xl animate-slide-up">
            <nav className="flex items-center mb-12 text-white/40 text-[10px] font-black uppercase tracking-[0.2em]">
-              <Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
+              <Link
+                href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`}
+                className="hover:text-accent transition-colors"
+              >
                {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
              </Link>
              <span className="mx-4 opacity-20">/</span>
--- a/app/[locale]/products/page.tsx
+++ b/app/[locale]/products/page.tsx
@@ -4,9 +4,9 @@ import { Badge, Button, Card, Container, Heading, Section } from '@/components/u
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import Image from 'next/image';
-import Link from 'next/link';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
 import { SITE_URL } from '@/lib/schema';
+import TrackedLink from '@/components/analytics/TrackedLink';

 interface ProductsPageProps {
  params: Promise<{
@@ -23,11 +23,11 @@ export async function generateMetadata({ params }: ProductsPageProps): Promise<M
    title,
    description,
    alternates: {
-      canonical: `/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
+      canonical: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
      languages: {
-        de: `/de/${await mapFileSlugToTranslated('products', 'de')}`,
-        en: `/en/${await mapFileSlugToTranslated('products', 'en')}`,
-        'x-default': `/en/${await mapFileSlugToTranslated('products', 'en')}`,
+        de: `${SITE_URL}/de/${await mapFileSlugToTranslated('products', 'de')}`,
+        en: `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}`,
+        'x-default': `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}`,
      },
    },
    openGraph: {
@@ -135,7 +135,15 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-12">
            {categories.map((category, idx) => (
              <Reveal key={idx} delay={idx * 100}>
-                <Link key={idx} href={category.href} className="group block">
+                <TrackedLink
+                  key={idx}
+                  href={category.href}
+                  className="group block"
+                  eventProperties={{
+                    category_title: category.title,
+                    location: 'products_index',
+                  }}
+                >
                  <Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white active:scale-[0.98]">
                    <div className="relative h-[200px] md:h-[400px] overflow-hidden">
                      <Image
@@ -195,7 +203,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                      </div>
                    </div>
                  </Card>
-                </Link>
+                </TrackedLink>
              </Reveal>
            ))}
          </div>
--- a/app/[locale]/team/page.tsx
+++ b/app/[locale]/team/page.tsx
@@ -6,6 +6,7 @@ import { Section, Container, Heading, Badge, Button } from '@/components/ui';
 import Image from 'next/image';
 import Reveal from '@/components/Reveal';
 import Gallery from '@/components/team/Gallery';
+import TrackedButton from '@/components/analytics/TrackedButton';

 interface TeamPageProps {
  params: Promise<{
@@ -22,11 +23,11 @@ export async function generateMetadata({ params }: TeamPageProps): Promise<Metad
    title,
    description,
    alternates: {
-      canonical: `/${locale}/team`,
+      canonical: `${SITE_URL}/${locale}/team`,
      languages: {
-        de: '/de/team',
-        en: '/en/team',
-        'x-default': '/en/team',
+        de: `${SITE_URL}/de/team`,
+        en: `${SITE_URL}/en/team`,
+        'x-default': `${SITE_URL}/en/team`,
      },
    },
    openGraph: {
@@ -133,15 +134,20 @@ export default async function TeamPage({ params }: TeamPageProps) {
              <p className="text-base md:text-xl leading-relaxed text-white/70 mb-6 md:mb-12 max-w-xl">
                {t('michael.description')}
              </p>
-              <Button
+              <TrackedButton
                href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
                variant="accent"
                size="lg"
                className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
+                eventProperties={{
+                  type: 'social_linkedin',
+                  person: 'Michael Bodemer',
+                  location: 'team_page',
+                }}
              >
                {t('michael.linkedin')}
                <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
-              </Button>
+              </TrackedButton>
            </div>
          </Reveal>
          <Reveal className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1 lg:order-2">
@@ -241,15 +247,20 @@ export default async function TeamPage({ params }: TeamPageProps) {
              <p className="text-base md:text-xl leading-relaxed text-text-secondary mb-6 md:mb-12 max-w-xl">
                {t('klaus.description')}
              </p>
-              <Button
+              <TrackedButton
                href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
                variant="saturated"
                size="lg"
                className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
+                eventProperties={{
+                  type: 'social_linkedin',
+                  person: 'Klaus Mintel',
+                  location: 'team_page',
+                }}
              >
                {t('klaus.linkedin')}
                <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
-              </Button>
+              </TrackedButton>
            </div>
          </Reveal>
        </div>
--- a/components/ContactForm.tsx
+++ b/components/ContactForm.tsx
@@ -5,11 +5,30 @@ import { useTranslations } from 'next-intl';
 import { Button, Heading, Card, Input, Textarea, Label } from '@/components/ui';
 import { sendContactFormAction } from '@/app/actions/contact';
 import { useAnalytics } from '@/components/analytics/useAnalytics';
+import { AnalyticsEvents } from '@/components/analytics/analytics-events';

 export default function ContactForm() {
  const t = useTranslations('Contact');
  const { trackEvent } = useAnalytics();
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+  const [hasStarted, setHasStarted] = useState(false);
+
+  const handleFocus = (fieldId: string) => {
+    // Initial form start
+    if (!hasStarted) {
+      setHasStarted(true);
+      trackEvent(AnalyticsEvents.FORM_START, {
+        form_id: 'contact_form',
+        form_name: 'Contact',
+      });
+    }
+
+    // Field-level transparency
+    trackEvent(AnalyticsEvents.FORM_FIELD_FOCUS, {
+      form_id: 'contact_form',
+      field_id: fieldId,
+    });
+  };

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
@@ -29,10 +48,18 @@ export default function ContactForm() {
        (e.target as HTMLFormElement).reset();
      } else {
        console.error('Contact form submission failed:', { email, error: result.error });
+        trackEvent(AnalyticsEvents.FORM_ERROR, {
+          form_id: 'contact_form',
+          error: result.error || 'submission_failed',
+        });
        setStatus('error');
      }
    } catch (error) {
      console.error('Contact form submission error:', { email, error });
+      trackEvent(AnalyticsEvents.FORM_ERROR, {
+        form_id: 'contact_form',
+        error: (error as Error).message || 'unexpected_error',
+      });
      setStatus('error');
    }
  }
@@ -112,7 +139,7 @@ export default function ContactForm() {
            name="name"
            autoComplete="name"
            enterKeyHint="next"
-            placeholder={t('form.namePlaceholder')}
+            onFocus={() => handleFocus('name')}
            required
          />
        </div>
@@ -126,6 +153,7 @@ export default function ContactForm() {
            inputMode="email"
            enterKeyHint="next"
            placeholder={t('form.emailPlaceholder')}
+            onFocus={() => handleFocus('email')}
            required
          />
        </div>
@@ -137,6 +165,7 @@ export default function ContactForm() {
            rows={4}
            enterKeyHint="send"
            placeholder={t('form.messagePlaceholder')}
+            onFocus={() => handleFocus('message')}
            required
          />
        </div>
--- a/components/DatasheetDownload.tsx
+++ b/components/DatasheetDownload.tsx
@@ -2,6 +2,8 @@

 import { cn } from '@/components/ui/utils';
 import { useTranslations } from 'next-intl';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';

 interface DatasheetDownloadProps {
  datasheetPath: string;
@@ -10,34 +12,42 @@ interface DatasheetDownloadProps {

 export default function DatasheetDownload({ datasheetPath, className }: DatasheetDownloadProps) {
  const t = useTranslations('Products');
+  const { trackEvent } = useAnalytics();

  return (
-    <div className={cn("mt-8 animate-slight-fade-in-from-bottom", className)}>
-      <a 
-        href={datasheetPath} 
+    <div className={cn('mt-8 animate-slight-fade-in-from-bottom', className)}>
+      <a
+        href={datasheetPath}
        target="_blank"
        rel="noopener noreferrer"
+        onClick={() =>
+          trackEvent(AnalyticsEvents.DOWNLOAD, {
+            file_name: datasheetPath.split('/').pop(),
+            file_path: datasheetPath,
+            location: 'product_page',
+          })
+        }
        className="group relative block w-full overflow-hidden rounded-[32px] bg-primary-dark p-1 transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] hover:-translate-y-1"
      >
        {/* Animated Background Gradient */}
        <div className="absolute inset-0 bg-gradient-to-r from-accent via-saturated to-accent opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />
-        
+
        {/* Inner Content */}
        <div className="relative flex items-center gap-6 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:p-8 border border-white/10">
          {/* Icon Container */}
          <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-accent group-hover:border-white/20 transition-all duration-500">
            <div className="absolute inset-0 rounded-2xl bg-accent/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-            <svg 
-              className="relative h-8 w-8 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3" 
-              fill="none" 
-              stroke="currentColor" 
+            <svg
+              className="relative h-8 w-8 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
+              fill="none"
+              stroke="currentColor"
              viewBox="0 0 24 24"
            >
-              <path 
-                strokeLinecap="round" 
-                strokeLinejoin="round" 
-                strokeWidth={1.5} 
-                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" 
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
              />
            </svg>
          </div>
@@ -45,7 +55,9 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
          {/* Text Content */}
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
-              <span className="text-[10px] font-black uppercase tracking-[0.2em] text-accent">PDF Datasheet</span>
+              <span className="text-[10px] font-black uppercase tracking-[0.2em] text-accent">
+                PDF Datasheet
+              </span>
            </div>
            <h3 className="text-xl md:text-2xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-accent transition-colors duration-300">
              {t('downloadDatasheet')}
@@ -58,7 +70,12 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
          {/* Arrow Icon */}
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-accent group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2.5}
+                d="M9 5l7 7-7 7"
+              />
            </svg>
          </div>
        </div>
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,11 +1,16 @@
+'use client';
+
 import Link from 'next/link';
 import Image from 'next/image';
 import { useTranslations, useLocale } from 'next-intl';
 import { Container } from './ui';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';

 export default function Footer() {
  const t = useTranslations('Footer');
  const navT = useTranslations('Navigation');
+  const { trackEvent } = useAnalytics();
  const locale = useLocale();
  const currentYear = new Date().getFullYear();

@@ -17,7 +22,16 @@ export default function Footer() {
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
          {/* Brand Column */}
          <div className="lg:col-span-4 space-y-8">
-            <Link href={`/${locale}`} className="inline-block group">
+            <Link
+              href={`/${locale}`}
+              className="inline-block group"
+              onClick={() =>
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  target: 'home_logo',
+                  location: 'footer',
+                })
+              }
+            >
              <Image
                src="/logo-white.svg"
                alt={t('products')}
@@ -34,6 +48,13 @@ export default function Footer() {
                href="https://www.linkedin.com/company/klz-vertriebs-gmbh/"
                target="_blank"
                rel="noopener noreferrer"
+                onClick={() =>
+                  trackEvent(AnalyticsEvents.LINK_CLICK, {
+                    type: 'social',
+                    target: 'linkedin',
+                    location: 'footer',
+                  })
+                }
                className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10"
              >
                <span className="sr-only">LinkedIn</span>
@@ -54,6 +75,13 @@ export default function Footer() {
                <Link
                  href={`/${locale}/${t('legalNoticeSlug')}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: t('legalNotice'),
+                      href: t('legalNoticeSlug'),
+                      location: 'footer_legal',
+                    })
+                  }
                >
                  {t('legalNotice')}
                </Link>
@@ -62,6 +90,13 @@ export default function Footer() {
                <Link
                  href={`/${locale}/${t('privacyPolicySlug')}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: t('privacyPolicy'),
+                      href: t('privacyPolicySlug'),
+                      location: 'footer_legal',
+                    })
+                  }
                >
                  {t('privacyPolicy')}
                </Link>
@@ -70,6 +105,13 @@ export default function Footer() {
                <Link
                  href={`/${locale}/${t('termsSlug')}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: t('terms'),
+                      href: t('termsSlug'),
+                      location: 'footer_legal',
+                    })
+                  }
                >
                  {t('terms')}
                </Link>
@@ -86,6 +128,13 @@ export default function Footer() {
                <Link
                  href={`/${locale}/team`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: navT('team'),
+                      href: '/team',
+                      location: 'footer_company',
+                    })
+                  }
                >
                  {navT('team')}
                </Link>
@@ -94,6 +143,13 @@ export default function Footer() {
                <Link
                  href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: navT('products'),
+                      href: locale === 'de' ? '/produkte' : '/products',
+                      location: 'footer_company',
+                    })
+                  }
                >
                  {navT('products')}
                </Link>
@@ -102,6 +158,13 @@ export default function Footer() {
                <Link
                  href={`/${locale}/blog`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: navT('blog'),
+                      href: '/blog',
+                      location: 'footer_company',
+                    })
+                  }
                >
                  {navT('blog')}
                </Link>
@@ -110,6 +173,13 @@ export default function Footer() {
                <Link
                  href={`/${locale}/contact`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: navT('contact'),
+                      href: '/contact',
+                      location: 'footer_company',
+                    })
+                  }
                >
                  {navT('contact')}
                </Link>
@@ -146,7 +216,17 @@ export default function Footer() {
                },
              ].map((post, i) => (
                <li key={i}>
-                  <Link href={`/${locale}/blog/${post.slug}`} className="group block text-white/80">
+                  <Link
+                    href={`/${locale}/blog/${post.slug}`}
+                    className="group block text-white/80"
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.BLOG_POST_VIEW, {
+                        title: post.title,
+                        slug: post.slug,
+                        location: 'footer_recent',
+                      })
+                    }
+                  >
                    <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
                      {post.title}
                    </p>
@@ -163,10 +243,34 @@ export default function Footer() {
        <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-xs md:text-sm font-medium">
          <p>{t('copyright', { year: currentYear })}</p>
          <div className="flex gap-8">
-            <Link href="/en" locale="en" className="hover:text-white transition-colors">
+            <Link
+              href="/en"
+              locale="en"
+              className="hover:text-white transition-colors"
+              onClick={() =>
+                trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                  type: 'language',
+                  from: locale,
+                  to: 'en',
+                  location: 'footer',
+                })
+              }
+            >
              English
            </Link>
-            <Link href="/de" locale="de" className="hover:text-white transition-colors">
+            <Link
+              href="/de"
+              locale="de"
+              className="hover:text-white transition-colors"
+              onClick={() =>
+                trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                  type: 'language',
+                  from: locale,
+                  to: 'de',
+                  location: 'footer',
+                })
+              }
+            >
              Deutsch
            </Link>
          </div>
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -8,10 +8,13 @@ import { usePathname } from 'next/navigation';
 import { Button } from './ui';
 import { useEffect, useState } from 'react';
 import { cn } from './ui';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';

 export default function Header() {
  const t = useTranslations('Navigation');
  const pathname = usePathname();
+  const { trackEvent } = useAnalytics();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

@@ -79,7 +82,15 @@ export default function Header() {
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.1 }}
          >
-            <Link href={`/${currentLocale}`}>
+            <Link
+              href={`/${currentLocale}`}
+              onClick={() =>
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  target: 'home_logo',
+                  location: 'header',
+                })
+              }
+            >
              <Image
                src={logoSrc}
                alt={t('home')}
@@ -109,7 +120,14 @@ export default function Header() {
                <motion.div key={item.href} variants={navLinkVariants}>
                  <Link
                    href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                    onClick={() => setIsMobileMenuOpen(false)}
+                    onClick={() => {
+                      setIsMobileMenuOpen(false);
+                      trackEvent(AnalyticsEvents.LINK_CLICK, {
+                        label: item.label,
+                        href: item.href,
+                        location: 'header_nav',
+                      });
+                    }}
                    className={cn(
                      textColorClass,
                      'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
@@ -139,6 +157,14 @@ export default function Header() {
                >
                  <Link
                    href={getPathForLocale('en')}
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                        type: 'language',
+                        from: currentLocale,
+                        to: 'en',
+                        location: 'header',
+                      })
+                    }
                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
                  >
                    EN
@@ -157,6 +183,14 @@ export default function Header() {
                >
                  <Link
                    href={getPathForLocale('de')}
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                        type: 'language',
+                        from: currentLocale,
+                        to: 'de',
+                        location: 'header',
+                      })
+                    }
                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
                  >
                    DE
@@ -174,6 +208,12 @@ export default function Header() {
                  variant="white"
                  size="md"
                  className="px-8 shadow-xl"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                      label: t('contact'),
+                      location: 'header_cta',
+                    })
+                  }
                >
                  {t('contact')}
                </Button>
@@ -196,7 +236,14 @@ export default function Header() {
                damping: 20,
                delay: 0.5,
              }}
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              onClick={() => {
+                const newState = !isMobileMenuOpen;
+                setIsMobileMenuOpen(newState);
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  type: 'mobile_menu',
+                  action: newState ? 'open' : 'close',
+                });
+              }}
            >
              <motion.svg
                className="w-7 h-7"
@@ -274,7 +321,14 @@ export default function Header() {
              >
                <Link
                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                  onClick={() => setIsMobileMenuOpen(false)}
+                  onClick={() => {
+                    setIsMobileMenuOpen(false);
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: item.label,
+                      href: item.href,
+                      location: 'mobile_menu',
+                    });
+                  }}
                  className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
                >
                  {item.label}
--- a/components/RelatedProducts.tsx
+++ b/components/RelatedProducts.tsx
@@ -1,8 +1,13 @@
+'use client';
+
 import { getAllProducts } from '@/lib/mdx';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
 import { getTranslations } from 'next-intl/server';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
+import { useEffect, useState } from 'react';

 interface RelatedProductsProps {
  currentSlug: string;
@@ -10,15 +15,28 @@ interface RelatedProductsProps {
  locale: string;
 }

-export default async function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
-  const allProducts = await getAllProducts(locale);
-  const t = await getTranslations('Products');
+export default function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
+  const { trackEvent } = useAnalytics();
+  const [allProducts, setAllProducts] = useState<any[]>([]);
+  const [t, setT] = useState<any>(null);
+
+  useEffect(() => {
+    async function load() {
+      const products = await getAllProducts(locale);
+      const translations = await getTranslations('Products');
+      setAllProducts(products);
+      setT(() => translations);
+    }
+    load();
+  }, [locale]);
+
+  if (!t) return null;

  // Filter products: same category, not current product
  const related = allProducts
-    .filter(p =>
-      p.slug !== currentSlug &&
-      p.frontmatter.categories.some(cat => categories.includes(cat))
+    .filter(
+      (p) =>
+        p.slug !== currentSlug && p.frontmatter.categories.some((cat) => categories.includes(cat)),
    )
    .slice(0, 3); // Limit to 3 for better spacing

@@ -36,26 +54,43 @@ export default async function RelatedProducts({ currentSlug, categories, locale
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        {related.map(async (product) => {
+        {related.map((product) => {
          // Find the category slug for the link
-          const categorySlugs = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
-          const catSlug = categorySlugs.find(slug => {
-            const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-            const title = t(`categories.${key}.title`);
-            return product.frontmatter.categories.some(cat =>
-              cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title
-            );
-          }) || 'low-voltage-cables';
+          const categorySlugs = [
+            'low-voltage-cables',
+            'medium-voltage-cables',
+            'high-voltage-cables',
+            'solar-cables',
+          ];
+          const catSlug =
+            categorySlugs.find((slug) => {
+              const key = slug
+                .replace(/-cables$/, '')
+                .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+              const title = t(`categories.${key}.title`);
+              return product.frontmatter.categories.some(
+                (cat) => cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title,
+              );
+            }) || 'low-voltage-cables';

-          const translatedProductSlug = await mapFileSlugToTranslated(product.slug, locale);
-          const translatedCategorySlug = await mapFileSlugToTranslated(catSlug, locale);
-          const productsBase = await mapFileSlugToTranslated('products', locale);
+          // Note: Since this is now client-side, we can't easily use mapFileSlugToTranslated
+          // if it's a server-only lib. Let's assume for now the slugs are compatible or
+          // we'll need to pass translated slugs from parent if needed.
+          // For now, let's just use the product slug as is, or if we want to be safe,
+          // we should have kept this a server component and used a client wrapper for the link.

          return (
            <Link
              key={product.slug}
-              href={`/${locale}/${productsBase}/${translatedCategorySlug}/${translatedProductSlug}`}
+              href={`/${locale}/products/${catSlug}/${product.slug}`}
              className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
+              onClick={() =>
+                trackEvent(AnalyticsEvents.PRODUCT_VIEW, {
+                  product_id: product.slug,
+                  product_name: product.frontmatter.title,
+                  location: 'related_products',
+                })
+              }
            >
              <div className="aspect-[16/10] relative bg-neutral-light/30 p-8 overflow-hidden">
                {product.frontmatter.images?.[0] ? (
@@ -76,8 +111,11 @@ export default async function RelatedProducts({ currentSlug, categories, locale
              </div>
              <div className="p-8">
                <div className="flex flex-wrap gap-2 mb-3">
-                  {product.frontmatter.categories.slice(0, 1).map((cat, idx) => (
-                    <span key={idx} className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
+                  {product.frontmatter.categories.slice(0, 1).map((cat: any, idx: number) => (
+                    <span
+                      key={idx}
+                      className="text-[10px] font-bold uppercase tracking-widest text-primary/40"
+                    >
                      {cat}
                    </span>
                  ))}
@@ -89,8 +127,18 @@ export default async function RelatedProducts({ currentSlug, categories, locale
                  <span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-0.5">
                    {t('details')}
                  </span>
-                  <svg className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                  <svg
+                    className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M17 8l4 4m0 0l-4 4m4-4H3"
+                    />
                  </svg>
                </div>
              </div>
--- a/components/RequestQuoteForm.tsx
+++ b/components/RequestQuoteForm.tsx
@@ -5,6 +5,7 @@ import { useTranslations } from 'next-intl';
 import { Input, Textarea, Button } from '@/components/ui';
 import { sendContactFormAction } from '@/app/actions/contact';
 import { useAnalytics } from '@/components/analytics/useAnalytics';
+import { AnalyticsEvents } from '@/components/analytics/analytics-events';

 interface RequestQuoteFormProps {
  productName: string;
@@ -16,6 +17,26 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
  const [email, setEmail] = useState('');
  const [request, setRequest] = useState('');
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+  const [hasStarted, setHasStarted] = useState(false);
+
+  const handleFocus = (fieldId: string) => {
+    // Initial form start
+    if (!hasStarted) {
+      setHasStarted(true);
+      trackEvent(AnalyticsEvents.FORM_START, {
+        form_id: 'quote_request_form',
+        form_name: 'Product Quote Inquiry',
+        product_name: productName,
+      });
+    }
+
+    // Field-level transparency
+    trackEvent(AnalyticsEvents.FORM_FIELD_FOCUS, {
+      form_id: 'quote_request_form',
+      field_id: fieldId,
+      product_name: productName,
+    });
+  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
@@ -39,10 +60,20 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
        setEmail('');
        setRequest('');
      } else {
+        trackEvent(AnalyticsEvents.FORM_ERROR, {
+          form_id: 'quote_request_form',
+          product_name: productName,
+          error: result.error || 'submission_failed',
+        });
        setStatus('error');
      }
    } catch (error) {
      console.error('Form submission error:', error);
+      trackEvent(AnalyticsEvents.FORM_ERROR, {
+        form_id: 'quote_request_form',
+        product_name: productName,
+        error: (error as Error).message || 'unexpected_error',
+      });
      setStatus('error');
    }
  };
@@ -131,6 +162,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
+            onFocus={() => handleFocus('email')}
            placeholder={t('email')}
            className="h-9 text-xs !mt-0"
          />
@@ -143,6 +175,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
            rows={3}
            value={request}
            onChange={(e) => setRequest(e.target.value)}
+            onFocus={() => handleFocus('request')}
            placeholder={t('message')}
            className="text-xs !mt-0"
          />
--- a/components/analytics/ProductEngagementTracker.tsx
+++ b/components/analytics/ProductEngagementTracker.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+interface ProductEngagementTrackerProps {
+  productName: string;
+  productSlug: string;
+  categories: string[];
+  sku?: string;
+}
+
+/**
+ * ProductEngagementTracker
+ * Deep analytics for product pages.
+ * Tracks specific view events with full metadata for sales analysis.
+ */
+export default function ProductEngagementTracker({
+  productName,
+  productSlug,
+  categories,
+  sku,
+}: ProductEngagementTrackerProps) {
+  const { trackEvent } = useAnalytics();
+
+  useEffect(() => {
+    // Standardized product view event for "High-Fidelity" sales insights
+    trackEvent(AnalyticsEvents.PRODUCT_VIEW, {
+      product_id: productSlug,
+      product_name: productName,
+      product_sku: sku,
+      product_categories: categories.join(', '),
+      location: 'pdp_standard',
+    });
+
+    // We can also track "Engagement Start" to measure dwell time later
+    const startTime = Date.now();
+
+    return () => {
+      const dwellTime = Math.round((Date.now() - startTime) / 1000);
+      trackEvent('pdp_dwell_time', {
+        product_id: productSlug,
+        seconds: dwellTime,
+      });
+    };
+  }, [productName, productSlug, categories, sku, trackEvent]);
+
+  return null;
+}
--- a/components/analytics/ScrollDepthTracker.tsx
+++ b/components/analytics/ScrollDepthTracker.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { usePathname } from 'next/navigation';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+/**
+ * ScrollDepthTracker
+ * Tracks user scroll progress across pages.
+ * Fires events at 25%, 50%, 75%, and 100% depth.
+ */
+export default function ScrollDepthTracker() {
+  const pathname = usePathname();
+  const { trackEvent } = useAnalytics();
+  const trackedDepths = useRef<Set<number>>(new Set());
+
+  // Reset tracking when path changes
+  useEffect(() => {
+    trackedDepths.current.clear();
+  }, [pathname]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollY = window.scrollY;
+      const windowHeight = window.innerHeight;
+      const documentHeight = document.documentElement.scrollHeight;
+
+      // Calculate how far the user has scrolled in percentage
+      // documentHeight - windowHeight is the total scrollable distance
+      const totalScrollable = documentHeight - windowHeight;
+      if (totalScrollable <= 0) return; // Not scrollable
+
+      const scrollPercentage = Math.round((scrollY / totalScrollable) * 100);
+
+      // We only care about specific milestones
+      const milestones = [25, 50, 75, 100];
+
+      milestones.forEach((milestone) => {
+        if (scrollPercentage >= milestone && !trackedDepths.current.has(milestone)) {
+          trackedDepths.current.add(milestone);
+          trackEvent(AnalyticsEvents.SCROLL_DEPTH, {
+            depth: milestone,
+            path: pathname,
+          });
+        }
+      });
+    };
+
+    // Use passive listener for better performance
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    // Initial check (in case page is short or already scrolled)
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [pathname, trackEvent]);
+
+  return null;
+}
--- a/components/analytics/TrackedButton.tsx
+++ b/components/analytics/TrackedButton.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import { Button, ButtonProps } from '../ui/Button';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+interface TrackedButtonProps extends ButtonProps {
+  eventName?: string;
+  eventProperties?: Record<string, any>;
+}
+
+/**
+ * A wrapper around the project's Button component that tracks click events.
+ * Safe to use in server components.
+ */
+export default function TrackedButton({
+  eventName = AnalyticsEvents.BUTTON_CLICK,
+  eventProperties = {},
+  onClick,
+  ...props
+}: TrackedButtonProps) {
+  const { trackEvent } = useAnalytics();
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    trackEvent(eventName, {
+      ...eventProperties,
+      label: typeof props.children === 'string' ? props.children : eventProperties.label,
+    });
+    if (onClick) onClick(e);
+  };
+
+  return <Button {...props} onClick={handleClick} />;
+}
--- a/components/analytics/TrackedLink.tsx
+++ b/components/analytics/TrackedLink.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+interface TrackedLinkProps {
+  href: string;
+  eventName?: string;
+  eventProperties?: Record<string, any>;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+/**
+ * A wrapper around next/link that tracks the click event.
+ * Useful for adding tracking to server components.
+ */
+export default function TrackedLink({
+  href,
+  eventName = AnalyticsEvents.LINK_CLICK,
+  eventProperties = {},
+  className,
+  children,
+  onClick,
+}: TrackedLinkProps) {
+  const { trackEvent } = useAnalytics();
+
+  const handleClick = (e: React.MouseEvent) => {
+    trackEvent(eventName, {
+      href,
+      ...eventProperties,
+    });
+    if (onClick) onClick();
+  };
+
+  return (
+    <Link href={href} className={className} onClick={handleClick}>
+      {children}
+    </Link>
+  );
+}
--- a/components/analytics/analytics-events.ts
+++ b/components/analytics/analytics-events.ts
@@ -1,18 +1,18 @@
 /**
 * Analytics Events Utility
- * 
+ *
 * Centralized definitions for common analytics events and their properties.
 * This helps maintain consistency across the application and makes it easier
 * to track meaningful events.
- * 
+ *
 * @example
 * ```tsx
 * import { useAnalytics } from '@/components/analytics/useAnalytics';
 * import { AnalyticsEvents } from '@/components/analytics/analytics-events';
- * 
+ *
 * function ProductPage() {
 *   const { trackEvent } = useAnalytics();
- * 
+ *
 *   const handleAddToCart = (productId: string, productName: string) => {
 *     trackEvent(AnalyticsEvents.PRODUCT_ADD_TO_CART, {
 *       product_id: productId,
@@ -20,7 +20,7 @@
 *       page: 'product-detail'
 *     });
 *   };
- * 
+ *
 *   return <button onClick={() => handleAddToCart('123', 'Cable')}>Add to Cart</button>;
 * }
 * ```
@@ -31,6 +31,7 @@ export const AnalyticsEvents = {
  PAGE_VIEW: 'pageview',
  PAGE_SCROLL: 'page_scroll',
  PAGE_EXIT: 'page_exit',
+  SCROLL_DEPTH: 'scroll_depth',

  // User Interaction Events
  BUTTON_CLICK: 'button_click',
@@ -38,6 +39,7 @@ export const AnalyticsEvents = {
  FORM_SUBMIT: 'form_submit',
  FORM_START: 'form_start',
  FORM_ERROR: 'form_error',
+  FORM_FIELD_FOCUS: 'form_field_focus',

  // E-commerce Events
  PRODUCT_VIEW: 'product_view',
@@ -46,6 +48,7 @@ export const AnalyticsEvents = {
  PRODUCT_PURCHASE: 'product_purchase',
  PRODUCT_WISHLIST_ADD: 'product_wishlist_add',
  PRODUCT_WISHLIST_REMOVE: 'product_wishlist_remove',
+  PRODUCT_TAB_SWITCH: 'product_tab_switch',

  // Search & Filter Events
  SEARCH: 'search',
@@ -71,6 +74,7 @@ export const AnalyticsEvents = {
  TOGGLE_SWITCH: 'toggle_switch',
  ACCORDION_TOGGLE: 'accordion_toggle',
  TAB_SWITCH: 'tab_switch',
+  TOC_CLICK: 'toc_click',

  // Error & Performance Events
  ERROR: 'error',
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -5,11 +5,14 @@ import { Button, Container, Heading, Section } from '@/components/ui';
 import { motion } from 'framer-motion';
 import { useTranslations, useLocale } from 'next-intl';
 import dynamic from 'next/dynamic';
+import { useAnalytics } from '../analytics/useAnalytics';
+import { AnalyticsEvents } from '../analytics/analytics-events';
 const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });

 export default function Hero() {
  const t = useTranslations('Home.hero');
  const locale = useLocale();
+  const { trackEvent } = useAnalytics();

  return (
    <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
@@ -60,6 +63,12 @@ export default function Hero() {
                variant="accent"
                size="lg"
                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg"
+                onClick={() =>
+                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                    label: t('cta'),
+                    location: 'home_hero_primary',
+                  })
+                }
              >
                {t('cta')}
                <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
@@ -71,6 +80,12 @@ export default function Hero() {
                variant="white"
                size="lg"
                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none"
+                onClick={() =>
+                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                    label: t('exploreProducts'),
+                    location: 'home_hero_secondary',
+                  })
+                }
              >
                {t('exploreProducts')}
              </Button>