in your main Layout.astro component .","step":[{"@type":"HowToStep","position":1,"name":"Add to Layout.astro","text":"Embed the script in your base layout template. Example:\n---\n// src/layouts/Layout.astro\ninterface Props {\n title: string;\n}\nconst { title } = Astro.props;\n---\n\n\n \n \n {title}\n \n \n \n \n \n"}]}
Analytics by Sufyaan Studio Logoanalytics
Sign in
NAVIGATION100% COOKIE FREE
DEVELOPER TOOLS & GUIDES
GA4 CalculatorUTM BuilderPrivacy PillarHow-To Guides
Already have an account? Sign in →
FRAMEWORK INTEGRATION GUIDE

How to Install Analytics on Astro

Supercharge your zero-JS static Astro website with an ultra-lightweight 1.15 KB analytics tag.

Quick Setup: Astro
By Sufyaan Studio Research•Verified August 2026

In Astro, place the <script defer src="https://analytics.sufyaanstudio.com/t.js" data-web="YOUR_WEBSITE_ID"></script> in your main Layout.astro component <head>.

KEY TAKEAWAYS
  • 1.15 KB featherlight tracker preserves Astro speed
  • Zero cookie consent banners required
  • Automatic SPA client route change detection
  • Full support for custom conversion event tracking
PREREQUISITES
  • Astro project
  • Website UUID
STEP-BY-STEP IMPLEMENTATION

Installation Instructions

1

Add to Layout.astro

Embed the script in your base layout template.

ASTRO SNIPPET (STEP 1)
--- // src/layouts/Layout.astro interface Props { title: string; } const { title } = Astro.props; --- <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>{title}</title> <script defer src="https://analytics.sufyaanstudio.com/t.js" data-web="YOUR_WEBSITE_ID" ></script> </head> <body> <slot /> </body> </html>
FAQ & VERIFICATION

FAQ: Astro Analytics Integration

Ready to track Astro traffic with speed?

Create your account in 30 seconds and start tracking for $0.

analytics