Astro Analytics: Lightweight Tracking for a Lightweight Framework
You chose Astro to ship less JavaScript. Your analytics should respect that. Setting up a ~1 KB cookieless tracker in Astro, including view transitions.
Astro's entire thesis is shipping zero JavaScript by default. Then someone pastes in an analytics suite and the network tab shows more tracking code than site. If you cared enough about performance to choose Astro, your analytics should be held to the same standard: a script measured in hundreds of bytes, not hundreds of kilobytes, and no consent banner bloating your beautiful static pages.
The 60-second setup
Add the tracker to your base layout — the one component every page shares:
---
// src/layouts/Base.astro
---
<html lang="en">
<head>
<script
defer
src="https://clycyo.com/tracker.js"
data-tracking-id="YOUR_TRACKING_ID"
></script>
</head>
<body>
<slot />
</body>
</html>That is the complete installation for a classic multi-page Astro site. Each navigation is a real page load, the tracker fires on each one, and you get pageviews, referrers, UTM capture, load times, Web Vitals, and JS errors with no further work.
View Transitions: the one thing to know
Astro's <ClientRouter /> (formerly <ViewTransitions />) upgrades navigation to SPA-style soft loads — which means the load event stops firing on navigation, exactly like a React SPA. Clycyo's tracker handles this automatically because it instruments the History API, so soft navigations are recorded as pageviews with their own timing. If you ever need to verify, navigate between pages with transitions enabled and watch events arrive in the dashboard's live view.
Tracking events from islands
Custom events work from any island, regardless of framework:
// A React/Svelte/Vue island, or a plain <script> tag
window.webanalytics?.track('newsletter_signup', {
location: 'footer',
});For static parts of the page, a small inline script on the relevant button does the same job without hydrating anything — very much in the Astro spirit:
<script>
document.getElementById('cta')?.addEventListener('click', () => {
window.webanalytics?.track('cta_clicked', { page: 'home' });
});
</script>Why cookieless matters double for content sites
Most Astro sites are content: blogs, docs, marketing. For these, a consent banner is pure loss — it costs CLS, it costs conversions, and refusals delete a third of your data. Cookieless analytics needs no banner because it stores no persistent identifiers, which means an Astro site can stay exactly as clean as the framework intended while still telling you which posts resonate and where readers come from.
The performance math
| Setup | Analytics JS shipped |
|---|---|
| gtag.js + Google Tag Manager | ~90–120 KB |
| Typical product-analytics suite | ~30–60 KB |
| Clycyo tracker | 1.1 KB |
On an Astro site whose entire page might weigh 50 KB, the difference between 1 KB and 100 KB of analytics is the difference between invisible and dominant. Your Lighthouse score will notice; so will the Core Web Vitals ranking signal.
Setup details for every framework live in the quickstart, and the free tier — 10,000 events/month, forever — comfortably covers most content sites. Watch it work on real traffic at /open first if you like.