47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
// file: components/tracked-link.tsx
|
|
"use client"; // This component needs to be a client component to use onClick
|
|
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
// Define the props for our component
|
|
interface TrackedLinkProps
|
|
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
href: string;
|
|
eventName: string; // The specific event name for Umami
|
|
}
|
|
|
|
export const TrackedLink = ({
|
|
href,
|
|
eventName,
|
|
children,
|
|
...rest
|
|
}: TrackedLinkProps) => {
|
|
const handleTrack = () => {
|
|
//console.log("Tracking Umami event:", eventName);
|
|
|
|
// Check if the umami function exists on the window object
|
|
if (window.umami) {
|
|
window.umami.track(eventName);
|
|
}
|
|
};
|
|
|
|
// For external links, use a standard <a> tag
|
|
const isExternal =
|
|
href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
|
|
|
|
if (isExternal) {
|
|
return (
|
|
<a href={href} onClick={handleTrack} {...rest}>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
// For internal links, use Next.js's Link component for SPA routing
|
|
return (
|
|
<Link href={href} onClick={handleTrack} {...rest}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}; |