Building a UTM Link Builder — Why Tracking Links Matter for Developers

If you're running a side project and sharing links across channels, UTM parameters are the simplest way to know what's actually working.

What UTM Parameters Do

They append tracking metadata to URLs. When a visitor arrives via a UTM-tagged link, analytics tools (Google Analytics, Plausible, etc.) record the source metadata.

https://toolzip.app/tools/image-compress
  ?utm_source=devto
  &utm_medium=article
  &utm_campaign=image-tools-launch

This tells your analytics: "This visitor came from Dev.to, via an article, from the image-tools-launch campaign."

The Five Parameters

Source, medium, and campaign are the essential three.

Building the URL

function buildUtmUrl(baseUrl, params) {
  const url = new URL(baseUrl);

  const utmFields = {
    utm_source: params.source,
    utm_medium: params.medium,
    utm_campaign: params.campaign,
    utm_term: params.term,
    utm_content: params.content,
  };

  for (const [key, value] of Object.entries(utmFields)) {
    if (value?.trim()) {
      url.searchParams.set(key, value.trim().toLowerCase().replace(/\s+/g, '-'));
    }
  }

  return url.toString();
}

Consistency is Everything

The biggest UTM mistake is inconsistency. devto, Dev.to, and DEV.TO are three different sources in your analytics. Standardize:

• lowercase everything
• use hyphens instead of spaces
• decide on source names and stick to them

Saving Recent Links

Storing recent UTM links in localStorage gives users a history without needing a server:

function saveToHistory(url, params) {
  const history = JSON.parse(localStorage.getItem('utm_history') || '[]');
  history.unshift({ url, params, timestamp: Date.now() });
  localStorage.setItem('utm_history', JSON.stringify(history.slice(0, 8)));
}

Build UTM links at toolzip.app/tools/utm-builder.