Bookmarks for Devs

UTM link builder and campaign URL generator

Build correctly encoded UTM tracking links from a URL and your source, medium and campaign — with the existing query string and fragment preserved, values properly percent-encoded, and warnings for the capitalisation and spacing that split one campaign across several rows in an analytics report.

Free · no sign-up · runs in your browser

A bare hostname works; https is assumed.

Where it comes from — newsletter, google, twitter.

The channel — email, cpc, social.

Which campaign — spring-launch.

Paid keyword. Optional.

Which creative or link. Optional.

Copy the link

Tracking URL

https://example.com/pricing?utm_source=newsletter&utm_medium=email&utm_campaign=spring-launch

Recent links

Links you build appear here.

Kept in this browser only. Never sent anywhere.

A UTM link is simple enough that most people build one by hand, and that is exactly why campaign reports end up with 'Email', 'email' and 'e-mail' as three separate sources. This appends the parameters properly — keeping any query string and fragment the URL already had, encoding values so an ampersand in a campaign name cannot break the link — and flags the inconsistencies before they reach your analytics rather than after.

How it works

  1. 01Paste any URL. A bare hostname works — the scheme is filled in as https rather than the link being rejected.
  2. 02Source, medium and campaign are the three that make a visit attributable; term and content are optional and used mostly for paid search and A/B variants.
  3. 03Parameters are appended with the URL's own encoder, so an ampersand, an equals sign or a hash inside a value cannot break the link. Building these by string concatenation is where that goes wrong.
  4. 04An existing query string and fragment are preserved, so a link into a specific section of a page still lands there. Existing utm values are replaced rather than duplicated — a URL carrying two sources is ambiguous, and tools disagree about which wins.
  5. 05Values are checked for capital letters and spaces. Analytics tools treat source values case-sensitively, so Email and email are two rows for the same campaign; the tidy button rewrites a value to a safe lowercase-and-hyphens form.
  6. 06The last ten links you build are kept in your browser's own storage so you can copy one again. They are never sent anywhere, and the clear button removes them.

Use cases

  • Tagging a newsletter link so the traffic it brings is attributable.
  • Building a consistent set of links for one campaign across email, social and paid.
  • Adding tracking to a link that already has query parameters, without breaking them.
  • Distinguishing two creatives in the same campaign with utm_content.
  • Fixing a link that was hand-built with a space or a capital in the source.
  • Producing a batch of links quickly and copying them back from the history.

Frequently asked questions

What are the five UTM parameters?

utm_source (where the traffic comes from — newsletter, google, twitter), utm_medium (the kind of channel — email, cpc, social), utm_campaign (which campaign — spring-launch), utm_term (the paid keyword) and utm_content (which creative or link, for telling two variants apart). The first three are what make a visit attributable at all; the last two are refinements.

Are UTM parameters case-sensitive?

Yes, and this catches more people than any other detail. GA4 and most other tools treat Email and email as different sources, so one campaign reported both ways is split across two rows and neither shows the real number. Pick lowercase, use it everywhere, and use the tidy button here to enforce it.

Should I use spaces in a UTM value?

No. A space is encoded as %20 or + depending on what encoded it, so the same campaign can arrive under two spellings and split again. Use hyphens — spring-launch, not spring launch. This tool flags any value containing whitespace.

Do UTM parameters hurt SEO?

Not if the page has a self-referencing canonical tag, which it should have anyway. The tagged URL is a distinct URL, so without a canonical you can end up with duplicate URLs indexed. UTM links are also normally used in email, social and ads rather than in links between your own pages — tagging internal links actively breaks attribution, because it restarts the session and overwrites the original source.

Can I add UTM parameters to a URL that already has a query string?

Yes, and this handles it: existing parameters and the fragment are kept, and the utm values are appended or replaced. What you should not do is append `?utm_source=...` to a URL that already has a `?` — that produces a malformed link, which is the most common hand-building mistake.

Where is the link history stored?

In your browser's local storage, on your machine only. Nothing is sent to a server, it is not shared between devices or browsers, and clearing it removes it. If storage is unavailable — private browsing, or a browser set to block it — the tool still works and simply does not remember.

Related resources

Related reading

More tools

Tailwind CSS color palette generator

Open →

Turn one hex code into a full Tailwind color scale — 11 OKLCH-tuned shades from 50 to 950, with contrast ratios, ready to paste into Tailwind v4's @theme block or a v3 config. Free, no sign-up, runs in your browser.

CSS clamp() calculator for fluid typography

Open →

Generate a responsive CSS clamp() font size from a minimum and maximum size and the viewport range they should grow across — with the slope and intercept shown, a live preview, and the rendered size at every common screen width. Free, no sign-up.

SVG to JSX converter for React components

Open →

Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.

Meta tag generator with Google SERP preview

Open →

Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.

Favicon generator — .ico, PNG set and manifest

Open →

Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.

JSON-LD schema generator and validator

Open →

Build valid JSON-LD structured data for Article, FAQPage, Product, Organization and BreadcrumbList from a form, or paste existing markup to have it pretty-printed and checked for the mistakes that stop a rich result appearing. Free, runs in your browser.

robots.txt generator with validation

Open →

Build a robots.txt from user-agent groups, allow and disallow rules, crawl-delay and sitemap URLs — with presets for allowing everything, blocking AI crawlers, or locking down a staging site, and warnings for the mistakes that quietly block your whole site.

Colour contrast checker with WCAG suggestions

Open →

Check any two colours against WCAG 2 — normal text, large text and UI components — see the ratio and live samples, and get the nearest passing colour when a pair fails, adjusted in OKLCH so the hue stays yours. Free, runs in your browser.

Image converter — WebP, AVIF, JPEG and PNG

Open →

Convert and resize images to WebP, AVIF, JPEG or PNG at the quality you choose, see exactly how many bytes each one saved, and download them one at a time or as a zip. Everything happens in your browser — no image is uploaded.

JSON formatter and validator — free, in your browser

Open →

Format, minify and validate JSON in your browser. Broken documents get the exact line and column of the error. Nothing is uploaded, and there is no size limit but your machine.

JSON to TypeScript — generate interfaces from a payload

Open →

Paste a JSON payload and get TypeScript interfaces: merged array shapes, optional properties, and real unions instead of any. Runs in your browser — nothing is uploaded.

OG image generator — free 1200×630 social cards

Open →

Generate an Open Graph image for any page: type a title, pick a theme, download a 1200×630 PNG. Runs entirely in your browser — no account, no upload, no watermark.