My attempt at making a UTM Campaign URL builder using Svelte, Snowpack, & Tailwind CSS, as a replacement to Google's site & excel sheet based approach.
I was on the lookout to apply what I preached about Svelte, Snowpack & Tailwind CSS in my previous posts.

I didn't have to look for too long, as I had a problem right in front of my eyes.
I kept messing up UTM params, as I couldn't stay consistent in my naming, spacing, and casing of the URLs while sharing.
As back-end developers tend to automate stuff, front-end developers tend to, do everything in their power to avoid CLI and, build GUI!
So I decided to create my own custom UI to make my life a little easier & after a week of sacrificing my free time, I have done it!
You can see the fruit of my work, by visiting the Analytics route of my site and playing around with Top Sources.
See: Derpy Coder Analytics powered by Plausible.
Demo
You can directly view the demo in the post itself, or else you can visit my website: Derpy UTM Builder.
Dark Traffic
if you are new to this, as I was, you must be wondering what are UTM params and why build a web app for it.
The whole purpose of adding UTM params to URL is to be able to better differentiate Dark Traffic that comes to your site.
It is already tough to distinguish such traffic, on part due to Chrome's abrasive, albeit justified, referrer policy.
We can't know the exact website, subreddit, post, or tweet, that referred our site because of that.
Furthermore, when a user navigates to a site via links in emails, documents, chat apps, bookmarks, url bar, they become part of the anonymous mass.
However if you visit a url by clicking on a website with relaxed referrer policy, the destination site will know the origin.
To check what the destination site sees when you click links from this blog post. Click this URL: What is my Referrer?
So how do we counter this? A simple ?ref=WhatsApp
or ?source=Slack
would suffice, as it would add a little context to the visitor's identity.
But someone came up with even better approach!
UTM Params
Urchin Tracking Module (UTM) are special query string, attached to a URL to give it meaning.
Params marked with asterisk* are mandatory.
1. Source*
This query string can be anything from Newsletter, Website, App.
e.g. Reddit, Facebook, WhatsApp, ...
2. Campaign*
This signifies the name of the campaign.
e.g. Black Friday, Cyber Monday, Summer Sale.
3. Medium*
This can be anything from Email, Social, Social Paid, CPC, Display, Affiliate, Referral, Chat.
4. Terms
Signifies the keywords of a Campaign.
e.g. Gorilla Glue, ...
5. Content
Used to further differentiate the URL or to do A/B Testing. Like sharing to LinkedIn groups or Subreddits.
e.g. Indie Web Dev, Indie Game Dev, ...
For a elaborate explanation, checkout:


How to Build?
1. Manually
You can just piece the query parameters together by appending them the main URL.
Say you have a website you want to promote: https://www.derpycoder.com
Then you can keep adding to it, starting with ?utm_source=Derpy+Coder
and every other param one after the other by adding an &
.
If you add all mandatory UTM Params to the URL, You will end up with:
https://www.derpycoder.com/
?utm_source=Derpy+Coder
&utm_medium=Blog+Post
&utm_campaign=Derpy+Tools
This, however simple, will weigh you down over time after sharing several URLs.
So I looked for web apps that can do this instead.
2. Web Apps & Chrome Extensions
Google actually has a site where you can build the Campaign URL. See: Campaign URL Builder.
But it's basic, and you can't generate a ton of URLs and target several sites at once.
Chrome Extensions are also simple, with support for generating a single URL at a time. You have to keep deleting & re-entering.
So I googled again, thinking that someone might have made something better, and I came across.
3. Google Sheet
Google Sheet based approach seemed like it could solve my problem, as it can generate several URLs at a time.
But the programmer in me decided not to do it. Instead I spent a few days building my own!


Development
It's not a big application, but for people just starting out, this section can be of big help.
1. Source Code
For the people who like to get down to code, you can see the source for Derpy UTM Builder directly in the browser.
See: Derpy UTM Builder VSCode Online.
2. Tech Used
- Snowtail.
- Svelte.
- Snowpack.
- Tailwind CSS.
- Hero Icons.
- Canvas Confetti & izi Toast for fun. 😜
3. Steps
I follow Evolutionary Prototyping approach while making anything.
So after finishing an initial mockup of the UI using Snowtail, I initialized a Svelte project by following Snowpack's documentation.
Then I plonked the markup along with all the styling, I did in mockup stage, into a single Svelte component.
I didn't divide it into smaller components, as not having to think about wiring and separation of concern in the initial stage of development makes iterating on the app much faster.
Once the functionality was upto my mark, I started separating the pieces one by one. (To see how it's separated, you can go over the source code yourself.)
While separating the pieces, I started using all of the features that Svelte provides to flex on my coding skills. 😉
If you want to learn how to make apps using Svelte. There's no better place than the official website.


Features
I built everything into the app that I was looking for. It might not solve everyone's problem, but I hope it makes a bit of difference.
Here's the list:
- Formatters to enforce consistency. (
Title Case
,lower case
,Plus+Case
,plausible+case
,kebab-case
,snake_case
,fREe+CaSE
,fReE FoRm
) - LocalStorage Persistence, so you can continue where you left off in your computer.
- Intuitive & Responsive Design.
- Common Campaign Name & Terms, so you won't have to enter them again and again.
- Mandatory UTM Params for the forgetful.
- White Space Remover from both ends.
- Ability to Insert / Delete rows at any location.
- Live Updates, on change. (Thanks to Svelte's true Reactive nature!)
- Notification & Confetti for fun. (Because I can!)
On Hold
- Custom Drop Down for each field, with ability to Store / Edit / Delete inputs.
- Persistence to Google Sheets. (For portability)
- Import. (CSV, RSS, JSON)
- Export. (CSV, JSON)
- URL Shortener. (TinyURL, Bit.ly)
URL Shortener is a bit controversial, as it hides the true nature of the site and even referral links. It takes tracking too far, so I may not add it at all. (Plus, Reddit Hates it.)
Rest of the lot seemed like feature creep, that would have kept me from finishing this web app, so I kept them on hold.
Conclusion
If you haven't forked the project and looked at the source code or gave it a go. I urge you to do so, because you are missing out on the best technology till date! (I don't mean my code.)
The speed boost that Svelte, Tailwind CSS & Snowpack gave, during development, blew my mind.
While developing, no matter how many restarts I did, or branches I changed, the development server started within 15ms every time and that Fast Refresh with HMR took my breath away.
If you haven't read about Snowpack yet, checkout:

And if you want to give Snowpack a spin, try out:

Let me know your thoughts, down in the comments below.
- Experiments
- Web Development
- Tutorials
- Tips
- #JavaScript
Abhijit Kar
I bring 5 years worth of industry experience to the table and everything I learnt from countless hours of experimentation over a decade.
Checkout :
Leave a Comment