18 / CSS / 2026-04-11
UTM Tag Builder
Build campaign-tagged URLs. Source, medium, campaign, copy out.
How it works
// 01 DPI and pixel density
The form state is a small object with the five UTM fields plus the base URL. On every keystroke, the state is serialized via `URL` and `URLSearchParams` (the standards-compliant browser APIs, not manual string concatenation) to produce the tagged URL. Using the standard APIs matters because they handle edge cases like existing query parameters, URL-encoding of special characters, and fragment preservation that naive string concatenation gets wrong.
// 02 Bleed and cut tolerance
Normalization happens on blur, not on keystroke, so you can type freely. When a field loses focus, its value is lowercased, spaces are replaced with hyphens, and duplicate separators collapse. The original case is preserved in the display if you want it, but the emitted URL always uses the normalized values. This matches the convention recommended by Google Analytics and used by every major campaign management tool.
// 03 Safe zone and trim accuracy
History storage uses localStorage with a capped array of the last five campaign configurations. On load, the most recent entry seeds the form. Each entry stores the full field set plus a timestamp, so you can revisit a previous campaign without retyping. The storage footprint is tiny (a few hundred bytes per entry) and it stays local to your browser.
// why this exists
real marketing tooling for real campaigns
UTM parameters are the five query-string tags that tell your analytics tool where a visitor came from. Every marketer who runs paid campaigns, content distribution, email sequences, or partnerships uses them. Every marketer who runs them by hand eventually ships an inconsistent tag, breaks a report, and spends a half-day trying to figure out why one campaign shows up under three different source names. This widget is the fix. Fill the form, get a correctly tagged URL, copy the URL.
The five parameters are standardized by Google Analytics and adopted by basically every other analytics platform. `utm_source` is the platform (google, facebook, newsletter). `utm_medium` is the mechanism (cpc, email, social). `utm_campaign` is the specific campaign name (q2-launch, welcome-flow). Two optional ones, `utm_term` and `utm_content`, cover paid search keywords and creative variants respectively. Get these five right and your attribution is clean. Get one of them wrong and your reports lie to you.
The widget does three things a spreadsheet-based UTM template cannot. First, it enforces naming conventions (lowercase, hyphen separators, no spaces) automatically because inconsistent casing is the most common UTM bug. Second, it validates that the URL resolves to a real origin before letting you copy, which catches typos in the base URL. Third, it generates a shortened version using the URL-safe short hash, which matters when you are dropping the link into a 280-character social post.
I built this for my own campaigns because none of the free UTM builders online felt fast enough to use inside the flow of writing an email or scheduling a social post. This one lives in the site, loads instantly, and remembers the last five campaigns you used so repeat-tagging gets faster over time. The history persists in localStorage, which means it is private to your browser and never round-trips to a server.
If you paste a URL that already has UTM parameters, the form pre-fills with the existing values so you can edit instead of reconstructing. That is the single most-used feature in my workflow: take a partially tagged URL, fix one field, copy the corrected version.
Frequently asked questions
What are UTM parameters?
Five standard URL query-string tags (source, medium, campaign, term, content) that tell your analytics platform where a visitor came from. Google Analytics defined them; every other analytics tool now reads them.
What is the difference between utm_source and utm_medium?
Source is the platform or publisher (google, facebook, newsletter-partner). Medium is the mechanism of the visit (cpc, email, social, referral). A newsletter is a source; email is its medium.
Do UTM parameters slow down my page?
No. They are query-string tags that analytics scripts read on load. They have no impact on rendering, caching, or SEO.
Why does my analytics show the same campaign under different names?
Inconsistent casing or spelling. 'Q2-Launch' and 'q2-launch' are two different campaigns to Google Analytics. Always lowercase, always hyphen-separated, and the widget enforces both automatically.
Should utm_campaign include a date?
If the campaign has a natural end date, yes. 'q2-2026-webinar' is clearer than 'webinar' when you review the report six months later. If it is evergreen, skip the date.
Do UTM parameters affect SEO?
They can create duplicate URLs in search indexes if not handled. Use a canonical tag on the page or configure your analytics to strip UTMs from indexed URLs. Most modern setups handle this automatically.
What is utm_term for?
Originally the paid search keyword that triggered the ad. Still used for that. Some marketers use it as a freeform audience tag, which is fine as long as the team agrees on the convention.
Can I use UTM parameters on internal links?
No. Internal UTMs overwrite the visitor's original session source in most analytics tools, which breaks attribution. For internal tracking, use a different parameter name or a dedicated event tracking plan.
How do I track UTMs inside a single-page app?
Read the UTMs on first page load and store them in a cookie or sessionStorage. Emit them as properties on every analytics event. Client-side routing does not trigger a new page load, so your analytics will not re-capture them otherwise.