e-tib.com/components/analytics/TrackedLink.tsx

'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;
  target?: string;
  rel?: string;
}

/**
 * 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,
  target,
  rel,
}: 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} target={target} rel={rel}>
      {children}
    </Link>
  );
}