{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "utm-campaign-builder", "title": "Utm Campaign Builder", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/utm-campaign-builder/UtmCampaignBuilder.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Check,\n Copy,\n Download,\n ExternalLink,\n Globe,\n Link2,\n QrCode,\n RotateCcw,\n CheckCircle2,\n Tag,\n TrendingUp,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface UtmPreset {\n id: string\n name: string\n description: string\n baseUrl: string\n source: string\n medium: string\n campaign: string\n term?: string\n content?: string\n shortlinkSlug: string\n}\n\nexport interface UtmCampaignData {\n baseUrl: string\n source: string\n medium: string\n campaign: string\n term: string\n content: string\n fullUrl: string\n shortlinkUrl: string\n}\n\nexport interface UtmCampaignBuilderProps {\n className?: string\n initialPreset?: string\n initialBaseUrl?: string\n initialSource?: string\n initialMedium?: string\n initialCampaign?: string\n initialTerm?: string\n initialContent?: string\n initialShortlinkDomain?: string\n initialShortlinkSlug?: string\n onCopyUrl?: (url: string) => void\n onCopyShortlink?: (shortlink: string) => void\n onDownloadQr?: (payload: { url: string; filename: string }) => void\n onChange?: (data: UtmCampaignData) => void\n}\n\nexport const CAMPAIGN_PRESETS: UtmPreset[] = [\n {\n id: 'product_launch',\n name: 'Product Launch',\n description: 'SaaS feature launch across social platforms',\n baseUrl: 'https://uipkge.dev/pricing',\n source: 'twitter',\n medium: 'social',\n campaign: 'launch_2026_q3',\n term: 'ui_components',\n content: 'banner_hero_cta',\n shortlinkSlug: 'q3-launch',\n },\n {\n id: 'weekly_newsletter',\n name: 'Weekly Newsletter',\n description: 'Substack / Mailchimp subscriber digest campaign',\n baseUrl: 'https://uipkge.dev/blog',\n source: 'newsletter',\n medium: 'email',\n campaign: 'weekly_digest_issue_48',\n term: 'developer_tools',\n content: 'featured_article_button',\n shortlinkSlug: 'digest-48',\n },\n {\n id: 'google_search_ads',\n name: 'Google Search Ads',\n description: 'Targeted Google Search CPC keyword campaign',\n baseUrl: 'https://uipkge.dev',\n source: 'google',\n medium: 'cpc',\n campaign: 'search_brand_core_us',\n term: 'vue_react_components',\n content: 'headline_v2_price_test',\n shortlinkSlug: 'google-ads',\n },\n {\n id: 'twitter_promo',\n name: 'Twitter / X Promo',\n description: 'Promotional & organic posts on X/Twitter',\n baseUrl: 'https://uipkge.dev/components',\n source: 'twitter',\n medium: 'social',\n campaign: 'flash_discount_august',\n term: 'lifetime_deal',\n content: 'video_card_preview',\n shortlinkSlug: 'x-promo',\n },\n]\n\nconst SOURCE_CHIPS = [\n { label: 'twitter', display: 'Twitter / X' },\n { label: 'google', display: 'Google' },\n { label: 'newsletter', display: 'Newsletter' },\n { label: 'linkedin', display: 'LinkedIn' },\n { label: 'facebook', display: 'Meta / FB' },\n { label: 'youtube', display: 'YouTube' },\n]\n\nconst MEDIUM_CHIPS = [\n { label: 'social', display: 'social' },\n { label: 'cpc', display: 'cpc' },\n { label: 'email', display: 'email' },\n { label: 'referral', display: 'referral' },\n { label: 'organic_social', display: 'organic_social' },\n { label: 'display', display: 'display' },\n]\n\ninterface QueryParamItem {\n key: string\n value: string\n label: string\n required: boolean\n}\n\n// Standalone Pure QR Matrix Generator (Byte mode, standard GF(256) Reed-Solomon)\nfunction generateQrMatrix(text: string): { matrix: boolean[][]; size: number } {\n const bytes: number[] = []\n for (let i = 0; i < text.length; i++) {\n const code = text.charCodeAt(i)\n if (code < 0x80) bytes.push(code)\n else if (code < 0x800) {\n bytes.push(0xc0 | (code >> 6), 0x80 | (code & 0x3f))\n } else {\n bytes.push(0xe0 | (code >> 12), 0x80 | ((code >> 6) & 0x3f), 0x80 | (code & 0x3f))\n }\n }\n\n const versions = [\n { version: 1, size: 21, dataCap: 16, ecWords: 10, blocks: 1, alignPos: [] as number[] },\n { version: 2, size: 25, dataCap: 28, ecWords: 16, blocks: 1, alignPos: [6, 18] },\n { version: 3, size: 29, dataCap: 44, ecWords: 26, blocks: 1, alignPos: [6, 22] },\n { version: 4, size: 33, dataCap: 64, ecWords: 18, blocks: 2, alignPos: [6, 26] },\n { version: 5, size: 37, dataCap: 86, ecWords: 24, blocks: 2, alignPos: [6, 30] },\n { version: 6, size: 41, dataCap: 108, ecWords: 16, blocks: 4, alignPos: [6, 34] },\n { version: 7, size: 45, dataCap: 124, ecWords: 18, blocks: 4, alignPos: [6, 22, 38] },\n { version: 8, size: 49, dataCap: 154, ecWords: 22, blocks: 4, alignPos: [6, 24, 42] },\n { version: 9, size: 53, dataCap: 182, ecWords: 22, blocks: 5, alignPos: [6, 26, 46] },\n { version: 10, size: 57, dataCap: 216, ecWords: 26, blocks: 5, alignPos: [6, 28, 50] },\n ]\n\n let v = versions.find((spec) => bytes.length <= spec.dataCap - 3)\n if (!v) v = versions[versions.length - 1]\n\n const size = v.size\n const matrix: (boolean | null)[][] = Array.from({ length: size }, () => Array(size).fill(null))\n const isFunction: boolean[][] = Array.from({ length: size }, () => Array(size).fill(false))\n\n function placeFinder(r: number, c: number) {\n for (let dr = -1; dr <= 7; dr++) {\n for (let dc = -1; dc <= 7; dc++) {\n const nr = r + dr\n const nc = c + dc\n if (nr >= 0 && nr < size && nc >= 0 && nc < size) {\n isFunction[nr][nc] = true\n if (dr >= 0 && dr <= 6 && dc >= 0 && dc <= 6) {\n const isBorder = dr === 0 || dr === 6 || dc === 0 || dc === 6\n const isCenter = dr >= 2 && dr <= 4 && dc >= 2 && dc <= 4\n matrix[nr][nc] = isBorder || isCenter\n } else {\n matrix[nr][nc] = false\n }\n }\n }\n }\n }\n\n placeFinder(0, 0)\n placeFinder(0, size - 7)\n placeFinder(size - 7, 0)\n\n for (const ar of v.alignPos) {\n for (const ac of v.alignPos) {\n if ((ar === 6 && ac === 6) || (ar === 6 && ac === size - 7) || (ar === size - 7 && ac === 6)) {\n continue\n }\n if (isFunction[ar][ac]) continue\n\n for (let dr = -2; dr <= 2; dr++) {\n for (let dc = -2; dc <= 2; dc++) {\n const nr = ar + dr\n const nc = ac + dc\n isFunction[nr][nc] = true\n const isBorder = Math.abs(dr) === 2 || Math.abs(dc) === 2\n const isCenter = dr === 0 && dc === 0\n matrix[nr][nc] = isBorder || isCenter\n }\n }\n }\n }\n\n for (let i = 0; i < size; i++) {\n if (!isFunction[6][i]) {\n isFunction[6][i] = true\n matrix[6][i] = i % 2 === 0\n }\n if (!isFunction[i][6]) {\n isFunction[i][6] = true\n matrix[i][6] = i % 2 === 0\n }\n }\n\n isFunction[4 * v.version + 9][8] = true\n matrix[4 * v.version + 9][8] = true\n\n for (let i = 0; i < 9; i++) {\n if (i !== 6) {\n isFunction[8][i] = true\n isFunction[i][8] = true\n }\n }\n for (let i = 0; i < 8; i++) {\n isFunction[8][size - 1 - i] = true\n isFunction[size - 1 - i][8] = true\n }\n\n const bitStream: number[] = []\n function pushBits(val: number, len: number) {\n for (let i = len - 1; i >= 0; i--) {\n bitStream.push((val >> i) & 1)\n }\n }\n\n pushBits(0b0100, 4)\n pushBits(bytes.length, 8)\n for (const b of bytes) {\n pushBits(b, 8)\n }\n\n const totalDataBits = v.dataCap * 8\n const termLen = Math.min(4, totalDataBits - bitStream.length)\n pushBits(0, termLen)\n\n while (bitStream.length % 8 !== 0) {\n bitStream.push(0)\n }\n\n const padBytes = [0xec, 0x11]\n let padIdx = 0\n while (bitStream.length < totalDataBits) {\n pushBits(padBytes[padIdx % 2], 8)\n padIdx++\n }\n\n const dataWords: number[] = []\n for (let i = 0; i < bitStream.length; i += 8) {\n let word = 0\n for (let j = 0; j < 8; j++) {\n word = (word << 1) | bitStream[i + j]\n }\n dataWords.push(word)\n }\n\n const EXP: number[] = new Array(512)\n const LOG: number[] = new Array(256)\n let cur = 1\n for (let i = 0; i < 255; i++) {\n EXP[i] = cur\n EXP[i + 255] = cur\n LOG[cur] = i\n cur = (cur << 1) ^ (cur >= 128 ? 0x11d : 0)\n }\n function gfMul(a: number, b: number): number {\n if (a === 0 || b === 0) return 0\n return EXP[LOG[a] + LOG[b]]\n }\n\n function getGeneratorPoly(numEc: number): number[] {\n let poly = [1]\n for (let i = 0; i < numEc; i++) {\n const next = new Array(poly.length + 1).fill(0)\n for (let j = 0; j < poly.length; j++) {\n next[j] ^= gfMul(poly[j], EXP[i])\n next[j + 1] ^= poly[j]\n }\n poly = next\n }\n return poly\n }\n\n const ecWordsPerBlock = v.ecWords\n const numBlocks = v.blocks\n const blockSize = Math.floor(dataWords.length / numBlocks)\n const rawBlocks: number[][] = []\n const ecBlocks: number[][] = []\n const genPoly = getGeneratorPoly(ecWordsPerBlock)\n\n for (let b = 0; b < numBlocks; b++) {\n const blockData = dataWords.slice(b * blockSize, (b + 1) * blockSize)\n rawBlocks.push(blockData)\n\n const rem = new Array(blockData.length + ecWordsPerBlock).fill(0)\n for (let i = 0; i < blockData.length; i++) rem[i] = blockData[i]\n for (let i = 0; i < blockData.length; i++) {\n const factor = rem[i]\n if (factor !== 0) {\n for (let j = 0; j < genPoly.length; j++) {\n rem[i + j] ^= gfMul(genPoly[j], factor)\n }\n }\n }\n ecBlocks.push(rem.slice(blockData.length))\n }\n\n const finalBits: number[] = []\n for (let i = 0; i < blockSize; i++) {\n for (let b = 0; b < numBlocks; b++) {\n const val = rawBlocks[b][i] ?? 0\n for (let bit = 7; bit >= 0; bit--) {\n finalBits.push((val >> bit) & 1)\n }\n }\n }\n for (let i = 0; i < ecWordsPerBlock; i++) {\n for (let b = 0; b < numBlocks; b++) {\n const val = ecBlocks[b][i] ?? 0\n for (let bit = 7; bit >= 0; bit--) {\n finalBits.push((val >> bit) & 1)\n }\n }\n }\n\n let bitPointer = 0\n let right = size - 1\n let upward = true\n\n while (right > 0) {\n if (right === 6) right--\n const colList = [right, right - 1]\n const rowList = upward\n ? Array.from({ length: size }, (_, i) => size - 1 - i)\n : Array.from({ length: size }, (_, i) => i)\n\n for (const r of rowList) {\n for (const c of colList) {\n if (!isFunction[r][c]) {\n let bit = 0\n if (bitPointer < finalBits.length) {\n bit = finalBits[bitPointer++]\n }\n const mask = (r + c) % 2 === 0\n matrix[r][c] = (bit === 1) !== mask\n }\n }\n }\n right -= 2\n upward = !upward\n }\n\n const formatInfo = [1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0]\n const tlCoords: [number, number][] = [\n [8, 0],\n [8, 1],\n [8, 2],\n [8, 3],\n [8, 4],\n [8, 5],\n [8, 7],\n [8, 8],\n [7, 8],\n [5, 8],\n [4, 8],\n [3, 8],\n [2, 8],\n [1, 8],\n [0, 8],\n ]\n for (let i = 0; i < 15; i++) {\n const [r, c] = tlCoords[i]\n matrix[r][c] = formatInfo[i] === 1\n }\n\n for (let i = 0; i < 8; i++) {\n matrix[8][size - 1 - i] = formatInfo[i] === 1\n }\n for (let i = 8; i < 15; i++) {\n matrix[size - (15 - i)][8] = formatInfo[i] === 1\n }\n\n const cleanMatrix: boolean[][] = matrix.map((row) => row.map((cell) => cell === true))\n return { matrix: cleanMatrix, size }\n}\n\nfunction qrToSvgPath(matrix: boolean[][]): string {\n let path = ''\n for (let r = 0; r < matrix.length; r++) {\n for (let c = 0; c < matrix[r].length; c++) {\n if (matrix[r][c]) {\n path += `M${c},${r}h1v1h-1z `\n }\n }\n }\n return path\n}\n\nexport function UtmCampaignBuilder({\n className,\n initialPreset = 'product_launch',\n initialBaseUrl = 'https://uipkge.dev/pricing',\n initialSource = 'twitter',\n initialMedium = 'social',\n initialCampaign = 'launch_2026_q3',\n initialTerm = 'ui_components',\n initialContent = 'banner_hero_cta',\n initialShortlinkDomain = 'https://uipk.ge',\n initialShortlinkSlug = 'q3-launch',\n onCopyUrl,\n onCopyShortlink,\n onDownloadQr,\n onChange,\n}: UtmCampaignBuilderProps) {\n const [selectedPreset, setSelectedPreset] = React.useState(initialPreset)\n const [baseUrl, setBaseUrl] = React.useState(initialBaseUrl)\n const [utmSource, setUtmSource] = React.useState(initialSource)\n const [utmMedium, setUtmMedium] = React.useState(initialMedium)\n const [utmCampaign, setUtmCampaign] = React.useState(initialCampaign)\n const [utmTerm, setUtmTerm] = React.useState(initialTerm)\n const [utmContent, setUtmContent] = React.useState(initialContent)\n\n const [shortlinkDomain] = React.useState(initialShortlinkDomain)\n const [shortlinkSlug, setShortlinkSlug] = React.useState(initialShortlinkSlug)\n\n const [copiedFullUrl, setCopiedFullUrl] = React.useState(false)\n const [copiedShortlink, setCopiedShortlink] = React.useState(false)\n const [downloadedQr, setDownloadedQr] = React.useState(false)\n\n const applyPreset = React.useCallback((presetId: string) => {\n setSelectedPreset(presetId)\n if (presetId === 'custom') return\n\n const preset = CAMPAIGN_PRESETS.find((p) => p.id === presetId)\n if (preset) {\n setBaseUrl(preset.baseUrl)\n setUtmSource(preset.source)\n setUtmMedium(preset.medium)\n setUtmCampaign(preset.campaign)\n setUtmTerm(preset.term ?? '')\n setUtmContent(preset.content ?? '')\n setShortlinkSlug(preset.shortlinkSlug)\n }\n }, [])\n\n const handleReset = React.useCallback(() => {\n setSelectedPreset('product_launch')\n const def = CAMPAIGN_PRESETS[0]\n setBaseUrl(def.baseUrl)\n setUtmSource(def.source)\n setUtmMedium(def.medium)\n setUtmCampaign(def.campaign)\n setUtmTerm(def.term ?? '')\n setUtmContent(def.content ?? '')\n setShortlinkSlug(def.shortlinkSlug)\n }, [])\n\n // Active query parameters\n const activeQueryParameters = React.useMemo(() => {\n const list: QueryParamItem[] = []\n if (utmSource.trim()) {\n list.push({\n key: 'utm_source',\n value: utmSource.trim(),\n label: 'Campaign Source',\n required: true,\n })\n }\n if (utmMedium.trim()) {\n list.push({\n key: 'utm_medium',\n value: utmMedium.trim(),\n label: 'Campaign Medium',\n required: true,\n })\n }\n if (utmCampaign.trim()) {\n list.push({\n key: 'utm_campaign',\n value: utmCampaign.trim(),\n label: 'Campaign Name',\n required: true,\n })\n }\n if (utmTerm.trim()) {\n list.push({\n key: 'utm_term',\n value: utmTerm.trim(),\n label: 'Campaign Term',\n required: false,\n })\n }\n if (utmContent.trim()) {\n list.push({\n key: 'utm_content',\n value: utmContent.trim(),\n label: 'Campaign Content',\n required: false,\n })\n }\n return list\n }, [utmSource, utmMedium, utmCampaign, utmTerm, utmContent])\n\n // Full Generated URL\n const generatedFullUrl = React.useMemo(() => {\n const rawBase = baseUrl.trim()\n if (!rawBase) return ''\n\n let normalized = rawBase\n if (!/^https?:\\/\\//i.test(normalized)) {\n normalized = `https://${normalized}`\n }\n\n const params = new URLSearchParams()\n if (utmSource.trim()) params.set('utm_source', utmSource.trim())\n if (utmMedium.trim()) params.set('utm_medium', utmMedium.trim())\n if (utmCampaign.trim()) params.set('utm_campaign', utmCampaign.trim())\n if (utmTerm.trim()) params.set('utm_term', utmTerm.trim())\n if (utmContent.trim()) params.set('utm_content', utmContent.trim())\n\n const queryString = params.toString()\n if (!queryString) return normalized\n\n const separator = normalized.includes('?') ? '&' : '?'\n return `${normalized}${separator}${queryString}`\n }, [baseUrl, utmSource, utmMedium, utmCampaign, utmTerm, utmContent])\n\n // Shortlink preview\n const generatedShortlink = React.useMemo(() => {\n const domain = shortlinkDomain.replace(/\\/+$/, '')\n const slug =\n shortlinkSlug.trim() ||\n utmCampaign\n .trim()\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '-') ||\n 'link'\n return `${domain}/${slug}`\n }, [shortlinkDomain, shortlinkSlug, utmCampaign])\n\n const isGa4Compliant = Boolean(baseUrl.trim() && utmSource.trim() && utmMedium.trim() && utmCampaign.trim())\n\n React.useEffect(() => {\n onChange?.({\n baseUrl,\n source: utmSource,\n medium: utmMedium,\n campaign: utmCampaign,\n term: utmTerm,\n content: utmContent,\n fullUrl: generatedFullUrl,\n shortlinkUrl: generatedShortlink,\n })\n }, [baseUrl, utmSource, utmMedium, utmCampaign, utmTerm, utmContent, generatedFullUrl, generatedShortlink, onChange])\n\n const handleCopyFullUrl = async () => {\n const url = generatedFullUrl\n if (!url) return\n\n try {\n if (navigator.clipboard && window.isSecureContext) {\n await navigator.clipboard.writeText(url)\n } else {\n const textarea = document.createElement('textarea')\n textarea.value = url\n textarea.style.position = 'fixed'\n textarea.style.opacity = '0'\n document.body.appendChild(textarea)\n textarea.focus()\n textarea.select()\n document.execCommand('copy')\n document.body.removeChild(textarea)\n }\n\n setCopiedFullUrl(true)\n onCopyUrl?.(url)\n setTimeout(() => setCopiedFullUrl(false), 2000)\n } catch (err) {\n console.error('Failed to copy URL:', err)\n }\n }\n\n const handleCopyShortlink = async () => {\n const link = generatedShortlink\n if (!link) return\n\n try {\n if (navigator.clipboard && window.isSecureContext) {\n await navigator.clipboard.writeText(link)\n } else {\n const textarea = document.createElement('textarea')\n textarea.value = link\n textarea.style.position = 'fixed'\n textarea.style.opacity = '0'\n document.body.appendChild(textarea)\n textarea.focus()\n textarea.select()\n document.execCommand('copy')\n document.body.removeChild(textarea)\n }\n\n setCopiedShortlink(true)\n onCopyShortlink?.(link)\n setTimeout(() => setCopiedShortlink(false), 2000)\n } catch (err) {\n console.error('Failed to copy shortlink:', err)\n }\n }\n\n const qrData = React.useMemo(() => {\n const text = generatedFullUrl || 'https://uipkge.dev'\n return generateQrMatrix(text)\n }, [generatedFullUrl])\n\n const qrPath = React.useMemo(() => qrToSvgPath(qrData.matrix), [qrData])\n\n const handleDownloadQr = () => {\n const text = generatedFullUrl || 'https://uipkge.dev'\n const { matrix, size } = generateQrMatrix(text)\n const pathData = qrToSvgPath(matrix)\n const margin = 2\n const totalSize = size + margin * 2\n const filename = utmCampaign.trim() ? `${utmCampaign.trim()}-qr.svg` : 'utm-campaign-qr.svg'\n\n const svgContent = `\n\n \n \n \n \n`\n\n const blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' })\n const url = URL.createObjectURL(blob)\n const link = document.createElement('a')\n link.href = url\n link.download = filename\n document.body.appendChild(link)\n link.click()\n document.body.removeChild(link)\n URL.revokeObjectURL(url)\n\n setDownloadedQr(true)\n onDownloadQr?.({ url: text, filename })\n setTimeout(() => setDownloadedQr(false), 2000)\n }\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n
\n \n
\n

Campaign URL & UTM Builder

\n \n \n {isGa4Compliant ? 'GA4 Standard' : 'Draft Link'}\n \n
\n

\n Generate trackable marketing links with standardized GA4 parameters, shortlinks, and vector QR codes.\n

\n
\n\n {/* Preset Selector & Reset Action */}\n
\n
\n \n
\n\n \n
\n
\n\n {/* 2-Column Builder Layout */}\n
\n {/* Left Column: Parameter Inputs Form */}\n
\n \n \n
\n
\n \n Campaign Parameters\n
\n \n {activeQueryParameters.length} active params\n \n
\n \n Fill in the landing page destination and key attribution parameters for Google Analytics 4.\n \n \n\n \n {/* 1. Base Website URL */}\n
\n
\n \n Destination link\n
\n setBaseUrl(e.target.value)}\n type=\"url\"\n placeholder=\"https://uipkge.dev/pricing\"\n size=\"middle\"\n />\n

The full landing page URL where users will arrive.

\n
\n\n \n\n {/* 2. Campaign Source (utm_source) */}\n
\n
\n
\n \n \n utm_source\n \n
\n \n Required\n \n
\n setUtmSource(e.target.value)}\n placeholder=\"e.g. twitter, google, newsletter\"\n size=\"middle\"\n />\n {/* Quick Chips */}\n
\n Suggestions:\n {SOURCE_CHIPS.map((chip) => (\n setUtmSource(chip.label)}\n >\n {chip.label}\n \n ))}\n
\n
\n\n {/* 3. Campaign Medium (utm_medium) */}\n
\n
\n
\n \n \n utm_medium\n \n
\n \n Required\n \n
\n setUtmMedium(e.target.value)}\n placeholder=\"e.g. social, cpc, email, referral\"\n size=\"middle\"\n />\n {/* Quick Chips */}\n
\n Suggestions:\n {MEDIUM_CHIPS.map((chip) => (\n setUtmMedium(chip.label)}\n >\n {chip.label}\n \n ))}\n
\n
\n\n {/* 4. Campaign Name (utm_campaign) */}\n
\n
\n
\n \n \n utm_campaign\n \n
\n \n Required\n \n
\n setUtmCampaign(e.target.value)}\n placeholder=\"e.g. launch_2026_q3, summer_promo\"\n size=\"middle\"\n />\n

\n Unique promotion identifier, product slogan, or promo code.\n

\n
\n\n \n\n {/* Optional Parameters Section Header */}\n
\n \n \n Optional GA4 Attributes\n \n
\n\n {/* 5. Campaign Term (utm_term) */}\n
\n
\n
\n \n \n utm_term\n \n
\n Optional · Paid search keywords\n
\n setUtmTerm(e.target.value)}\n placeholder=\"e.g. ui_components, vue_dashboard\"\n size=\"middle\"\n />\n
\n\n {/* 6. Campaign Content (utm_content) */}\n
\n
\n
\n \n \n utm_content\n \n
\n Optional · A/B test & ad creative\n
\n setUtmContent(e.target.value)}\n placeholder=\"e.g. banner_cta_blue, sidebar_link_v2\"\n size=\"middle\"\n />\n
\n \n \n
\n\n {/* Right Column: Generated Campaign URL Card (Sticky) */}\n
\n \n \n
\n
\n \n \n \n \n Generated Campaign URL\n
\n \n Live Ready\n \n
\n \n Formatted destination URL with tracking query parameters.\n \n \n\n \n {/* Monospace Syntax-Highlighted Code Container */}\n
\n {generatedFullUrl ? (\n
\n {baseUrl.trim()}\n {activeQueryParameters.length > 0 && (\n <>\n {baseUrl.includes('?') ? '&' : '?'}\n {activeQueryParameters.map((param, index) => (\n \n {param.key}\n =\n {encodeURIComponent(param.value)}\n {index < activeQueryParameters.length - 1 && (\n &\n )}\n \n ))}\n \n )}\n
\n ) : (\n
\n Enter a destination website URL to generate your campaign link...\n
\n )}\n
\n\n {/* Action Buttons */}\n
\n \n {copiedFullUrl ? (\n \n ) : (\n \n )}\n {copiedFullUrl ? 'Copied Full URL!' : 'Copy Full URL'}\n \n\n \n \n \n Test in New Tab\n \n \n
\n\n \n\n {/* Shortlink Generator Preview */}\n
\n
\n
\n \n Shortlink Generator\n
\n For SMS & Social\n
\n\n
\n
\n setShortlinkSlug(e.target.value)}\n placeholder=\"custom-slug\"\n size=\"small\"\n prefix={uipk.ge/}\n className=\"font-mono text-xs\"\n />\n
\n \n
\n
\n\n \n\n {/* SVG QR Code Generator Pass */}\n
\n
\n
\n \n QR Code Campaign Pass\n
\n \n Print & Banners\n \n
\n\n
\n {/* Crisp Vector SVG QR Code */}\n
\n \n \n \n \n \n \n
\n\n

\n Vector SVG scales to any resolution for billboard, print collateral, or event badges.\n

\n\n \n {downloadedQr ? (\n \n ) : (\n \n )}\n {downloadedQr ? 'Downloaded SVG!' : 'Download QR Code (.SVG)'}\n \n
\n
\n\n \n\n {/* Parameters Breakdown Table */}\n
\n
\n Parameters Verification\n {activeQueryParameters.length}/5 Active\n
\n\n
\n \n \n \n Parameter\n Value\n Status\n \n \n \n \n utm_source\n \n {utmSource.trim() || '—'}\n \n \n \n {utmSource.trim() ? 'Set' : 'Missing'}\n \n \n \n\n \n utm_medium\n \n {utmMedium.trim() || '—'}\n \n \n \n {utmMedium.trim() ? 'Set' : 'Missing'}\n \n \n \n\n \n utm_campaign\n \n {utmCampaign.trim() || '—'}\n \n \n \n {utmCampaign.trim() ? 'Set' : 'Missing'}\n \n \n \n\n \n utm_term\n \n {utmTerm.trim() || '—'}\n \n \n \n {utmTerm.trim() ? 'Set' : 'Optional'}\n \n \n \n\n \n utm_content\n \n {utmContent.trim() || '—'}\n \n \n \n {utmContent.trim() ? 'Set' : 'Optional'}\n \n \n \n \n
\n
\n
\n \n \n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/UtmCampaignBuilder.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "Google Analytics 4 (GA4) campaign link generator with preset presets, shortlink generator, syntax-highlighted URL preview, parameter verification table, and vector QR code export.", "categories": [ "marketing", "app", "form" ] }