import NewsletterSignup from '../../components/NewsletterSignup.astro';
I love using Umami Analytics โ it's privacy-friendly, fast, and self-hostable. But I found myself repeatedly wiring up the same event tracking logic for things like scroll depth, time on page, and click tracking.
So I built umami-kit: a drop-in JavaScript utility that adds rich, configurable analytics to any Umami-powered site โ with minimal effort and no cookies.
## ๐ What It Tracks Automatically
Once added to your site, umami-kit can track:
- โ Scroll depth (customizable thresholds)
- โ Time on page with heartbeat & idle detection
- โ Clicks (either explicitly marked or all clickable elements)
- โ Element visibility (track when key content enters viewport)
- โ External link clicks
- โ Page exit stats (total time, max scroll)
- โ And more, including forms, downloads, searches, and ecommerce events via the programmatic API
## ๐ How to Use It
Drop-in setup using HTML attributes:
```js
```
Or initialize manually for full control:
```js
const kit = new UmamiKit({
autoTrackAllClicks: true,
scrollDepthThresholds: [25, 50, 75, 90],
heartbeatInterval: 30000,
debug: true
});
```
You can also track visibility and clicks declaratively:
```
...
```
## ๐งช How I Use It
I self-host Umami on Vercel, using a custom subdomain per site for clean, first-party analytics. umami-kit builds on that by collecting richer behavioral data without any cookies, third-party requests, or PII.
This lets me understand how people engage with my sites while maintaining full respect for user privacy โ something Google Analytics has never made easy.
## ๐ Check it out on GitHub:
https://github.com/rhelmer/umami-kit
๐ก Let me know what you think โ feedback, PRs, and suggestions are welcome.