🔗 URL Parameter Manager

The free, open-source URL builder for marketers who work with tracking links every day.

👉 Try it now — no login required 👈

---

🤔 What is this?

Imagine you run ads on Google, Facebook, TikTok, or mobile ad networks. Every time you launch a campaign, you need to add special tags (called parameters) to your URLs so you can track where your traffic is coming from. Doing this by hand is slow and error-prone.

URL Parameter Manager is a web app that lets you paste any URL, visually add or edit those tracking tags, pick from ready-made templates for popular platforms, generate a QR code, and copy the final link — all in seconds. Think of it as a Swiss Army knife for anyone who builds marketing links.

---

✨ Features

Feature	Description
🎯 UTM Builder	Add utm_source, utm_medium, utm_campaign and more with one click
📱 MMP Templates	Pre-built templates for AppsFlyer, Adjust, Branch, and Singular
🤖 DSP Templates	Ready-to-use macros for Moloco, Kayzen, Smadex, AppLovin, and Appnext
🔧 Macro Preservation	Keeps {campaign_id}, ${CLICK_ID}, xapnt1x and other tracking macros intact — never URL-encodes them
📈 QR Code Generator	Instant, customizable QR codes (7 color themes, 3 sizes) with PNG download
🌐 URL Metadata Preview	Automatically fetches page title, description, and Open Graph image for any URL
💾 URL History	Your last 20 URLs are saved locally in your browser — no account needed
🎨 Syntax Highlighting	The generated URL is color-coded so you can spot base path vs. query parameters at a glance
🔒 100% Private	Everything runs in your browser. No data is sent to any server (except the metadata preview, which calls the public Microlink API)

---

🎥 How It Works

1. Paste a URL          -->  Parameters are auto-detected and shown in an editable table
2. Pick a template      -->  One-click presets for Google, Meta, TikTok, AppsFlyer, Moloco...
3. Edit values           -->  Change any parameter name or value — macros stay safe
4. Copy or scan          -->  Copy the final URL to clipboard, or download a QR code

---

🧩 Supported Platforms

Analytics & Ad Platforms

Platform	Template included?	Macro format
Google Ads	✅	{campaignid}, {keyword}, {gclid}
Meta (Facebook) Ads	✅	{{campaign.name}}, {{ad.name}}
TikTok Ads	✅	__CAMPAIGN_NAME__, __CLICKID__

Mobile Measurement Partners (MMPs)

MMP	Template included?	Key parameters
AppsFlyer	✅	pid, c, af_siteid, af_c_id, clickid
Adjust	✅	tracker, campaign, adgroup, creative
Branch	Param-ready	Custom deep link params
Singular	Param-ready	Custom attribution params
Kochava	Param-ready	Custom attribution params

Demand-Side Platforms (DSPs)

DSP	Template included?	Macro format
Moloco	✅	${CAMPAIGN_NAME}, ${CLICK_ID}
Kayzen	✅	{campaign_name}, {CONVERSION_ID}
Smadex	✅	{CAMPAIGN_NAME}, {CLICK_ID}
Appnext	✅	xapnt1x, {apnt_campid}
AppLovin	Param-ready	Custom macros
Liftoff	Param-ready	Custom macros
Unity Ads	Param-ready	Custom macros
Digital Turbine	Param-ready	Custom macros
Mintegral	Param-ready	Custom macros

---

🏗️ Tech Stack

Layer	Technology	Purpose
UI Framework	React 18	Component-based interface
Build Tool	Vite 5	Fast dev server & optimized production builds
Styling	Tailwind CSS 3	Utility-first responsive design
Icons	Lucide React	Clean, consistent SVG icons
QR Codes	qrcode.react	Client-side QR code generation
Metadata	Microlink API	Fetches Open Graph data for URL previews
Deployment	GitHub Actions + FTP	Auto-deploy on every push to main

---

🚀 Getting Started

Prerequisites

• Node.js 18 or higher
• npm (comes with Node.js)

Installation

# 1. Clone the repository
git clone https://github.com/JanNafta/url-parameter-manager.git
cd url-parameter-manager

# 2. Install dependencies
npm install

# 3. Start the development server
npm run dev

The app will open at http://localhost:5173.

Build for Production

npm run build

The optimized output goes to the dist/ folder, ready to deploy anywhere (static hosting, CDN, FTP, etc.).

---

📂 Project Structure

url-parameter-manager/
├── public/                  # Static assets (favicons, robots.txt, sitemap)
├── src/
│   ├── components/
│   │   ├── Header.jsx       # Top navigation bar with feature badges
│   │   ├── Footer.jsx       # CTA section + services grid
│   │   ├── UrlInput.jsx     # URL input field with validation & examples
│   │   ├── ParameterTable.jsx   # Editable table of URL parameters
│   │   ├── UTMTemplates.jsx     # One-click template presets (9 platforms)
│   │   ├── UpdatedUrl.jsx       # Generated URL display with copy button
│   │   ├── MetadataPreview.jsx  # OG metadata + favicon preview
│   │   ├── QRCodeGenerator.jsx  # QR code with color/size options
│   │   ├── URLHistory.jsx       # LocalStorage-based URL history
│   │   └── index.js             # Barrel exports
│   ├── hooks/
│   │   └── useDebounce.js   # Debounce hook (avoids API spam)
│   ├── utils/
│   │   └── urlUtils.js      # URL parsing, macro preservation, encoding
│   ├── App.jsx              # Main application component
│   ├── main.jsx             # React entry point
│   └── index.css            # Global styles + animations
├── index.html               # HTML entry point with SEO meta tags & schemas
├── vite.config.js           # Vite configuration
├── tailwind.config.js       # Tailwind CSS configuration
├── package.json             # Dependencies and scripts
└── deploy.sh                # Manual deployment script

---

🧠 How Macro Preservation Works

Most URL builders break tracking macros like {campaign_id} by URL-encoding the curly braces into %7Bcampaign_id%7D. Ad networks then cannot read them.

This tool detects and preserves six macro formats automatically:

Format	Example	Used by
{macro}	{campaign_id}	AppsFlyer, Kayzen, Smadex
${macro}	${CLICK_ID}	Moloco
[macro]	[timestamp]	Various
%%macro%%	%%CLICK_ID%%	Legacy networks
@[macro]	@[CLICK_ID]	Custom integrations
xapntNx	xapnt1x	Appnext

Everything else gets properly URL-encoded. The logic lives in src/utils/urlUtils.js.

---

🌐 SEO & Metadata

The app includes production-grade SEO out of the box:

• Open Graph & Twitter Card meta tags for rich link previews
• JSON-LD structured data — WebApplication, Person, and FAQ schemas
• Canonical URL, sitemap, and robots.txt
• Accessibility: ARIA labels, focus rings, reduced-motion support, keyboard navigation

---

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

# Fork the repo, then:
git checkout -b feature/my-new-feature
# Make your changes...
git commit -m "feat: add my new feature"
git push origin feature/my-new-feature
# Open a Pull Request on GitHub

---

👤 Author

Jan Naftanaila — Media Buyer & AI Automation Specialist

Specializing in programmatic advertising (DSP/SSP), mobile attribution (AppsFlyer, Adjust, Branch), and user acquisition strategy for mobile apps.

---

📄 License

MIT License — free to use, modify, and distribute. See LICENSE for details.

---

If this tool saved you time, consider giving it a ⭐ on GitHub!

Made with ❤️ by JanNafta