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/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>