49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
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 = () => {
|
|
try {
|
|
trackEvent(eventName, {
|
|
href,
|
|
...eventProperties,
|
|
});
|
|
} catch {
|
|
// Analytics tracking should not block navigation, so we catch and ignore errors.
|
|
}
|
|
if (onClick) onClick();
|
|
};
|
|
|
|
return (
|
|
<Link href={href} className={className} onClick={handleClick}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|