UTM Link

1"use client"
2 
3import Link from "next/link"
4 
5type UTMLinkProps = {
6  href: string
7  children: React.ReactNode
8  source?: string
9  medium?: string
10  campaign?: string
11} & React.ComponentProps<typeof Link>
12 
13export default function UTMLink({
14  href,
15  children,
16  source,
17  medium,
18  campaign,
19  onMouseDown,
20  onClick,
21  ...props
22}: UTMLinkProps) {
23  const applySearchParams = (e: React.MouseEvent<HTMLAnchorElement>) => {
24    if (e.defaultPrevented) return
25    if (e.button !== 0 && e.type !== "click") return
26    if (!source && !medium && !campaign) return
27 
28    const hrefAttr = e.currentTarget.getAttribute("href")
29    if (!hrefAttr || hrefAttr.startsWith("#")) {
30      return
31    }
32 
33    const url = new URL(e.currentTarget.href)
34 
35    if (url.protocol !== "http:" && url.protocol !== "https:") return
36 
37    if (
38      (!source || url.searchParams.has("utm_source")) &&
39      (!medium || url.searchParams.has("utm_medium")) &&
40      (!campaign || url.searchParams.has("utm_campaign"))
41    ) {
42      return
43    }
44 
45    if (source && !url.searchParams.has("utm_source")) {
46      url.searchParams.set("utm_source", source)
47    }
48    if (medium && !url.searchParams.has("utm_medium")) {
49      url.searchParams.set("utm_medium", medium)
50    }
51    if (campaign && !url.searchParams.has("utm_campaign")) {
52      url.searchParams.set("utm_campaign", campaign)
53    }
54 
55    e.currentTarget.href = url.toString()
56  }
57 
58  return (
59    <Link
60      href={href}
61      onMouseDown={(e) => {
62        onMouseDown?.(e)
63        applySearchParams(e)
64      }}
65      onClick={(e) => {
66        onClick?.(e)
67        if (e.detail === 0) applySearchParams(e)
68      }}
69      {...props}>
70      {children}
71    </Link>
72  )
73}