ActionLab Analytics for Astro

Add privacy-first, AI-powered analytics to your Astro site in under 60 seconds. No cookies, no consent banners, no complex setup.

Setup at a Glance

Add ActionLab to Astro in 4 simple steps. Copy one script tag, paste it into your project, and start collecting privacy-friendly analytics immediately.

Category: Framework|4 setup steps|No cookies required

About Astro

Astro is a web framework that delivers fast, content-focused websites by shipping zero JavaScript by default and selectively hydrating interactive components. Its "islands architecture" and support for multiple UI frameworks (React, Vue, Svelte, Solid) within a single project make it ideal for content sites, marketing pages, and documentation. Astro strong focus on performance and content delivery aligns well with ActionLab lightweight, privacy-first analytics approach.

Why Add Analytics to Astro

Astro was created to solve the problem of JavaScript-heavy websites, and its content-focused architecture produces some of the fastest sites on the web. Adding a heavy analytics tool would contradict Astro core value proposition. ActionLab sub-2KB script is proportional to the minimal JavaScript that Astro ships, maintaining the performance characteristics that Astro developers achieve. The is:inline integration ensures the script stays external and is not processed by Astro, keeping the build clean. For content-focused Astro sites, the AI insights are particularly valuable for understanding which content performs best and how readers discover and engage with the site.

Installation Code

Astro
---
// src/layouts/Layout.astro
---
<html>
  <head>
    <script
      src="https://cdn.actionlabanalytics.com/actionlab.js"
      data-site="YOUR_SITE_ID"
      defer
      is:inline
    ></script>
  </head>
  <body><slot /></body>
</html>

Step-by-Step Setup

  1. 1

    Open your base layout file, typically src/layouts/Layout.astro, which wraps all or most pages on your Astro site.

  2. 2

    Add the ActionLab script tag with the is:inline directive in the <head> section. The is:inline attribute is important — it tells Astro to leave the script tag as-is instead of processing and bundling it.

  3. 3

    Replace YOUR_SITE_ID with your actual site ID from the ActionLab dashboard.

  4. 4

    Build and deploy your Astro site. ActionLab works with both static generation (the default) and SSR mode with any Astro adapter.

Why Use ActionLab with Astro

  • The is:inline directive keeps the script external and unbundled, loading from the ActionLab CDN as intended rather than being processed by Astro build pipeline.
  • Works with Astro static generation (default) and SSR mode with any deployment adapter.
  • View Transitions API navigation is tracked automatically when Astro View Transitions are enabled.
  • Matches Astro philosophy of shipping minimal JavaScript — the sub-2KB analytics script is proportional to Astro near-zero-JS approach.

Frequently Asked Questions

Why use is:inline?

The is:inline directive tells Astro to leave the script tag exactly as written in the HTML output, rather than processing it through Astro build pipeline. Without is:inline, Astro would attempt to bundle the external script, which would fail because it is a CDN URL, or it would modify the script tag in ways that break the data-site attribute handling. is:inline ensures the ActionLab script loads directly from the CDN as an external resource, which is the correct behavior for analytics scripts.

Does ActionLab work with Astro View Transitions?

Yes. When Astro View Transitions are enabled, page navigations happen client-side with smooth visual transitions. ActionLab detects these navigations via the History API and records them as pageviews automatically. No additional configuration is needed for View Transitions compatibility.

Does ActionLab work with Astro islands?

Yes. ActionLab operates at the page level, independent of Astro component islands. Whether your interactive components are React, Vue, Svelte, or Solid islands, ActionLab tracks the page they are rendered on. The analytics script does not interact with island hydration or any framework-specific runtime.

Can I use ActionLab with Astro Content Collections?

Yes. Astro Content Collections generate pages from Markdown, MDX, or other content formats. Each generated page gets its own URL and is tracked individually by ActionLab. The top pages report shows which content collection entries attract the most traffic, and the AI insights analyze content patterns across your entire collection.

Does ActionLab work with Astro SSR adapters?

Yes. ActionLab works with all Astro deployment adapters including Node.js, Netlify, Vercel, Cloudflare, and Deno. The tracking script runs on the client side regardless of how the page is rendered and delivered. Your SSR adapter choice does not affect ActionLab functionality.