무료 UTM 캠페인 링크 빌더

사용 방법

UTM 빌더는 표준 URL과 URLSearchParams API를 사용해 전적으로 브라우저에서 추적 URL을 조합합니다. 서버도 업로드도 없습니다. 입력하는 동안 실시간 useMemo 훅이 기본 URL을 파싱하고 호스트 이름을 검증한 뒤, 채운 UTM 매개변수만 덧붙입니다.

1. 1
   URL 파싱과 검증

   기본 URL은 브라우저 내장 URL 생성자에 전달됩니다. 스킴이 없으면 https://를 자동으로 앞에 붙이고, 호스트 이름에 점이 하나 이상 있는지(또는 localhost인지) 확인해 자유 형식 문장이 출력을 망가뜨리기 전에 거부합니다.
2. 2
   URLSearchParams로 UTM 매개변수 추가

   채운 각 입력란(source, medium, campaign, term, content)은 URLSearchParams.set()으로 URL의 검색 매개변수 객체에 기록됩니다. 소문자 토글이 켜져 있으면 이 시점에 값을 소문자로 바꿔 대소문자 불일치로 인한 잘못된 기여 분석을 막습니다.
3. 3
   qrcode 라이브러리로 QR 코드 렌더링

   최종 URL이 바뀔 때마다 qrcode 라이브러리가 인라인 미리보기용 256 px 데이터 URL을 렌더링하고, 동시에 화면 밖 캔버스에 1024 px 버전을 그립니다. 그런 다음 canvas.toBlob()으로 캔버스를 PNG Blob으로 직렬화해 다운로드 버튼이 동기적으로 저장할 수 있게 합니다. 클릭 처리기 안에서 비동기 Blob 생성이 차단되는 iOS에서 필요합니다.
4. 4
   페이지 해시를 통한 공유 가능한 템플릿

   폼 상태(기본 URL과 UTM 값)는 window.history.replaceState로 페이지 URL 프래그먼트에 계속 인코딩됩니다. 해시가 포함된 URL을 여는 사람은 폼이 미리 채워진 상태로 보므로, 서버 측 저장 없이 캠페인 템플릿을 저장하거나 공유할 수 있습니다.

관련 도구