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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user