🔗URL & UTM

Add Query Parameter to URL

Programmatically add query parameters to URLs while preserving existing ones

Explanation

Safely append query parameters without breaking existing parameters or URL structure.

Examples

Add to URL without params

Input

https://example.com/page

Output

https://example.com/page?param=value

Add to URL with existing params

Input

https://example.com/page?existing=yes

Output

https://example.com/page?existing=yes&new=value

Code Examples

JavaScript (Modern)

// Modern approach using URL API
function addQueryParam(url, key, value) {
  const urlObj = new URL(url);
  urlObj.searchParams.set(key, value);
  return urlObj.toString();
}

// Add multiple parameters
function addQueryParams(url, params) {
  const urlObj = new URL(url);
  Object.entries(params).forEach(([key, value]) => {
    urlObj.searchParams.set(key, value);
  });
  return urlObj.toString();
}

// Usage
const url = 'https://example.com/page?foo=bar';
const newUrl = addQueryParam(url, 'utm_source', 'newsletter');
// Result: https://example.com/page?foo=bar&utm_source=newsletter

const multiUrl = addQueryParams(url, {
  utm_source: 'newsletter',
  utm_medium: 'email',
  utm_campaign: 'weekly'
});

JavaScript (Legacy)

// Legacy approach (for older browsers)
function addQueryParamLegacy(url, key, value) {
  const separator = url.includes('?') ? '&' : '?';
  const encodedKey = encodeURIComponent(key);
  const encodedValue = encodeURIComponent(value);
  return `${url}${separator}${encodedKey}=${encodedValue}`;
}

Try it Now

Open in URL Parser

💡 Tips

Always use URL API in modern browsers
URL.searchParams.set() replaces existing values
Use append() instead of set() to keep duplicates
Remember to encode special characters
Check for existing ? vs & separator in legacy code

⚠️ Common Pitfalls

Forgetting to encode parameter values
Not handling existing parameters properly
URL API not available in IE11
Relative URLs need base URL for URL constructor