This content originally appeared on DEV Community and was authored by David🚀
Most solo founders eventually hit the same wall:
“How do I actually know where my users are coming from?”
Sure, you can install Google Analytics or some other heavy library, but in my case, I didn’t want the weight, the complexity or the setup. I just wanted something lightweight drop a script tag on my landing page and instantly know:
- who visited
- where they came from
- and whether they converted.
So I did the thing every indie hacker tells themselves they’ll never do, I rolled my own tracking script in vanilla JS. Spoiler: it worked, but I made a lot of mistakes along the way.
Here are some dos and don’ts that would have saved me hours if I knew them earlier.
✅ Do: Keep It Lightweight
The beauty of writing a vanilla JS tracking script is that you can keep it under a few kilobytes. No need for 100KB+ analytics libraries.
A basic visitor tracking snippet only needs to:
- grab the current URL
- capture referrer (if available)
- send that data to your server
<script>
(function() {
const payload = {
url: window.location.href,
referrer: document.referrer,
timestamp: Date.now()
};
navigator.trackDetails(
"https://your-tracker-endpoint.com/collect",
JSON.stringify(payload)
);
})();
</script>
That’s it. Async, lightweight, no extra dependencies.
❌ Don’t: Block the Main Thread
One of my early mistakes was firing a synchronous fetch() call before the page finished loading. On a slow connection, this delayed the entire page render basically the opposite of what you want.
For tracking, reliability > speed, but you never want to hurt UX. That’s why navigator.trackDetails is your best friend, it ships data in the background even if the user closes the tab immediately after clicking.
✅ Do: Respect Privacy (Collect Only What You Need)
It’s tempting to grab everything you can like IP addresses, user agents, even mouse movements. Don’t. Not only is it overkill, but you’ll run into GDPR/CCPA compliance headaches.
For most startups, you only need:
- URL visited
- Referrer/source
- Event type (e.g. signup, conversion) Less is more. Your future self (and your lawyers) will thank you.
❌ Don’t: Rely Only on Cookies
Cookies are fragile. Users block them, browsers restrict them and incognito tabs erase them. If your script only uses cookies for user/session tracking, your data will get swiss-cheesed.
Instead, consider a lightweight fingerprint:
- session ID stored in memory/localStorage
- or server-issued UUID attached to the first request
Just don’t go creepy with full device fingerprinting, it’s bad karma.
✅ Do: Handle Single Page Apps (SPAs)
Modern apps don’t always reload pages. If you only fire tracking on window.onload, you’ll miss half your events.
For SPAs, listen to history changes:
(function(history){
const pushState = history.pushState;
history.pushState = function(state) {
trackPageView();
return pushState.apply(history, arguments);
};
})(window.history);
window.addEventListener('popstate', trackPageView);
Now your tracker fires on route changes without needing a reload.
❌ Don’t: Forget Opt-Outs
If someone doesn’t want to be tracked, respect it. A simple global flag works:
if (!window.doNotTrack) {
// run tracking code
}
Better yet, expose a public function:
window.disableTracking = true;
Users and devs alike will appreciate the transparency.
Wrapping Up: How This Shaped Reddimon
When I built Reddimon, I wanted founders to have a tracking script as simple as the code above: copy-paste one script tag and you’re done.
The lessons:
- Keep it tiny
- Don’t block UX
- Collect only what matters
- Support SPAs
- Respect opt-outs
If you’re thinking of rolling your own, I hope these dos and don’ts save you some pain. And if you’d rather not reinvent the wheel well, that’s why I wrapped mine into Reddimon.
This content originally appeared on DEV Community and was authored by David🚀
David🚀 | Sciencx (2025-08-20T16:51:29+00:00) Dos and Don’ts of Building a Tracking Script in Vanilla JS. Retrieved from https://www.scien.cx/2025/08/20/dos-and-donts-of-building-a-tracking-script-in-vanilla-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.