Add Analytics to Your Astro Site Without GDPR Issues

Astro sites are fast by default. The framework ships zero JavaScript to the client unless you explicitly opt in with client:load or client:visible directives. Pages load in milliseconds. Lighthouse scores are perfect.

Then you add Google Analytics. Suddenly there is 45KB of JavaScript, multiple cookies with 2-year expiry, a consent banner covering your carefully designed hero section, and a GDPR compliance burden that requires a cookie management plugin. The entire philosophy of choosing Astro — minimal, fast, no bloat — is undermined by the analytics tool.

EngageTrack is astro analytics done right: a 3KB cookieless script that requires no consent banner, no Astro integration package, and no framework adapter. One script tag in your layout, and you have GDPR-compliant analytics without sacrificing what makes Astro fast.

Why Does GA4 Conflict with Astro's Philosophy?

Astro's core principle is "ship less JavaScript." The framework renders HTML on the server by default and only hydrates interactive islands when necessary. A typical Astro blog might ship 0KB of client-side JavaScript.

GA4's gtag.js adds 45KB+ of gzipped JavaScript to every page. It sets _ga and _gid cookies that persist for up to 2 years. Under GDPR, setting these cookies before user consent is illegal — so you need a cookie consent banner, which adds another JavaScript bundle and a layout-shifting UI element.

The numbers:

	Without Analytics	With GA4	With EngageTrack
Client JS	0KB	45KB+	3KB
Cookies set	0	3+	0
Consent banner needed	No	Yes	No
Extra DOM elements	0	Consent modal + GA iframe	0
Lighthouse Performance	100	85–95	100

EngageTrack preserves Astro's performance characteristics. GA4 does not.

How Do You Install EngageTrack in an Astro Site?

Add one script tag to your layout's <head>:

---
// src/layouts/Layout.astro
const { title } = Astro.props;
---
 
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <script
      defer
      data-site-id="YOUR_SITE_ID"
      src="https://cdn.engagetrack.net/sdk.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

That is the complete installation. No npm install, no integration package, no configuration file, no adapter dependency. The full Astro installation guide covers additional options, but for most sites this is all you need.

EngageTrack automatically tracks:

Pageviews on every page navigation
Traffic sources and referrers
UTM parameters
Outbound link clicks
File downloads
Scroll depth
Form submissions

The defer attribute ensures the script loads without blocking HTML parsing. The 3KB payload downloads in parallel with other resources and executes after the DOM is ready.

Does EngageTrack Work with Astro's View Transitions?

Yes. Astro's View Transitions API (enabled with <ViewTransitions /> in your layout) uses client-side navigation to create smooth page transitions. EngageTrack detects these navigations by listening for astro:page-load events and fires a pageview event for each transition.

No additional configuration is needed. The script handles View Transitions automatically.

---
// src/layouts/Layout.astro
import { ViewTransitions } from "astro:transitions";
---
 
<html lang="en">
  <head>
    <ViewTransitions />
    <script
      defer
      data-site-id="YOUR_SITE_ID"
      src="https://cdn.engagetrack.net/sdk.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Both static navigation (full page loads) and client-side navigation (View Transitions) are tracked correctly.

Does It Work with Static Output and SSR Modes?

EngageTrack works identically in all Astro output modes:

Static (output: "static") — The default. Pages are pre-rendered to HTML at build time. The script tag is included in every page's HTML. Analytics data is collected when visitors load pages in their browsers.

Server (output: "server") — Pages are rendered on the server at request time. The script tag is included in the server-rendered HTML. Analytics collection works the same way — the script runs in the browser after the page loads.

Hybrid (output: "hybrid") — A mix of static and server-rendered pages. EngageTrack works on both types because the script is in the layout, which wraps all pages regardless of rendering mode.

The tracking script is client-side JavaScript — it runs in the visitor's browser, not on the server. The Astro rendering mode determines how the HTML is generated, but the script's behavior is the same in all cases.

How Do You Track Custom Events in Astro?

For static Astro components, use an inline script:

---
// src/components/Newsletter.astro
---
 
<form id="newsletter-form">
  <input type="email" name="email" placeholder="[email protected]" required />
  <button type="submit">Subscribe</button>
</form>
 
<script>
  document.getElementById("newsletter-form")?.addEventListener("submit", () => {
    window.engagetrack?.track("newsletter_signup");
  });
</script>

For interactive islands using React, Vue, Svelte, or other frameworks with client:load:

// src/components/PricingCard.tsx (React island)
export function PricingCard({ plan }: { plan: string }) {
  const handleClick = () => {
    window.engagetrack?.track("pricing_click", { plan });
  };
 
  return (
    <button onClick={handleClick}>
      Choose {plan}
    </button>
  );
}

---
// In your Astro page
import { PricingCard } from "../components/PricingCard";
---
 
<PricingCard client:load plan="pro" />

The window.engagetrack global is available to any client-side JavaScript, whether it is in an Astro inline script, a framework island, or a standalone .js file.

How Do You Deploy to Cloudflare Pages, Vercel, or Netlify?

EngageTrack requires no platform-specific configuration. The script tag in your layout is included in the built HTML files, and it loads from EngageTrack's CDN when visitors access your pages.

For Cloudflare Pages, Vercel, and Netlify static deployments:

Add the script tag to your layout as shown above
Build with astro build
Deploy as normal

No environment variables, no edge functions, no build plugins needed.

For SSR deployments on Cloudflare Workers, Vercel Functions, or Netlify Functions, the same applies — the script is in your layout HTML and runs in the browser. The server-side adapter does not interact with the tracking script.

How Does EngageTrack Compare to Other Astro Analytics Options?

Feature	EngageTrack	GA4	Plausible	Fathom
Script size (gzipped)	3KB	45KB+	~1KB	5KB
Cookies	None	Multiple (2yr)	None	None
GDPR compliant (no banner)	Yes	No	Yes	Yes
Revenue attribution	Stripe, LemonSqueezy, Paddle, Polar	Google Ads only	No	No
View Transitions support	Auto	Requires config	Auto	Auto
Astro integration needed	No (script tag)	No	No	No
Conversion funnels	Yes	Yes	Basic	No
Custom events	Yes	Yes	Yes	Yes
REST API	Full read/write	Reporting API	Read-only	Read-only
Visitor profiles	Yes	Limited	No	No
EU data hosting	Frankfurt	Optional	EU	Canada
Starting price	€5/mo	Free (with limits)	$9/mo	$15/mo
Lighthouse impact	None	Significant	None	Minimal

How Do You Get Started?

The getting started guide walks through the full setup, but for Astro specifically:

Create an EngageTrack account (14-day free trial, no credit card)
Add your site domain in the dashboard
Copy the script tag with your site ID
Paste it into your Layout.astro <head>
Deploy

Analytics data starts appearing within seconds of the first visitor.

FAQ

Does EngageTrack work with Astro's View Transitions?

Yes. EngageTrack detects Astro View Transitions automatically and fires a pageview event on each client-side navigation. No configuration or additional script attributes are needed. Both full page loads and client-side transitions are tracked.

Do I need an Astro integration package for EngageTrack?

No. EngageTrack is a plain <script> tag — it does not require an Astro integration, npm package, or adapter. Add the script tag to your layout's <head> and it works. This means zero dependency management, zero version conflicts, and zero build step modifications.

What about Astro sites deployed to Cloudflare Pages?

EngageTrack works on Cloudflare Pages without any platform-specific configuration. The tracking script is part of your static HTML and loads from EngageTrack's CDN. For Astro SSR on Cloudflare Workers, the same applies — the script runs in the visitor's browser regardless of where the HTML is rendered.

Does EngageTrack track Astro content collections and blog posts?

EngageTrack tracks pageviews on any page that includes the script tag in its layout. If your blog posts use a layout that includes the EngageTrack script (which they will if you add it to your base Layout.astro), every blog post is tracked automatically. You can see which posts get the most views, where readers come from, and how deep they scroll.

Can I use EngageTrack with Starlight (Astro docs theme)?

Yes. Starlight uses Astro layouts internally. Add the EngageTrack script tag to your Starlight configuration's head array in astro.config.mjs:

export default defineConfig({
  integrations: [
    starlight({
      title: "My Docs",
      head: [
        {
          tag: "script",
          attrs: {
            defer: true,
            "data-site-id": "YOUR_SITE_ID",
            src: "https://cdn.engagetrack.net/sdk.js",
          },
        },
      ],
    }),
  ],
});

Astro sites deserve analytics that match their performance philosophy. EngageTrack adds 3KB of JavaScript, zero cookies, and zero compliance overhead. Start your free 14-day trial and have analytics on your Astro site in under a minute. No credit card required.