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'
This commit is contained in:
2026-02-16 18:30:29 +01:00
parent c2e790e533
commit 58d83a7fa1
22 changed files with 634 additions and 98 deletions

View File

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