Derpy UTM Builder: A Campaign URL Builder made with Svelte, Tailwind & Snowpack

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.

Svelte: 10 Reasons that make it the Best JavaScript Framework

Svelte is a compile time framework, that take our high level declarative components and turns into efficient, imperative, low level code for browsers.

Derpy CoderAbhijit Kar

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 use UTM parameters to track your campaigns and understand the dark traffic

Plausible Analytics has full UTM tags support out-of-the-box to help you track your marketing campaigns with a fast and easy to understand dashboard.

Plausible AnalyticsMarko Saric

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!

UTM Tagging with Google Spreadsheets | Robin Rozhon

Track successfully your marketing campaigns in Google Analytics. This spreadsheet will help you build UTM parameters and stay organized over time.

Robin RozhonRobin Rozhon

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.

abhijit-kar/derpy-utm-builder

My take on UTM Campaign URL Builder to make life a bit easier. - abhijit-kar/derpy-utm-builder

GitHubabhijit-kar

2. Tech Used

1. Snowtail.
2. Svelte.
3. Snowpack.
4. Tailwind CSS.
5. Hero Icons.
6. 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.

Svelte tutorial

Introduction / Basics

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:

Snowpack: 5 Reasons it should be the Standard Build Tool for Front-End Web Dev

Introducing Snowpack, the fastest ESM powered front-end build tool, that takes the development process up a notch and makes it incredibly fast.

Derpy CoderAbhijit Kar

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

Snowtail: Snowpack & Tailwind Starter to Speed up Theme Dev

This post is about Snowtail, a starter template made using Snowpack & Tailwind, that can help speed up the theme development process.

Derpy CoderAbhijit Kar

Let me know your thoughts, down in the comments below.