mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
Marc Mintel
2026-02-16 18:30:29 +01:00
parent c2e790e533
commit 58d83a7fa1
22 changed files with 634 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
components/RelatedProducts.tsx
View File

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