Marc Mintel
58d83a7fa1
- 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'
45 lines
963 B
TypeScript
45 lines
963 B
TypeScript
'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>
|
|
);
|
|
}
|