How to Add Orbit Analytics to an Astro Site

Most Astro projects route every page through a shared layout component, which makes tracking a one-file change: add the script to that layout's <head>, and every page that uses it picks up tracking automatically.

Setup steps

  1. Open your shared layout fileTypically src/layouts/Layout.astro, which most Astro projects use to wrap every page's <head> and <body>.
  2. Add the script tag inside <head>Paste the Orbit <script defer src="https://orbitanalytics.app/script.js" data-website-id="{id}"></script> tag directly in the <head> section, alongside your existing meta tags.
  3. Confirm every page uses that layoutIf some pages use a different layout component or none at all, add the script there too, or consolidate on one shared layout.
  4. Build and deployRun your normal astro build — the script tag ships as static HTML on every page using the layout, regardless of which components on the page are hydrated.

Frequently asked questions

Does this work with Astro's SSR adapters, or only static output?

Both — whether Astro renders a page at build time (static) or per-request (SSR via an adapter), the <head> content in your layout component is included the same way.

Do I need a client:load directive on the script?

No — client: directives are for hydrating Astro's own component islands. A plain <script> tag in the head is static HTML and needs no hydration directive.

Does Astro's partial hydration affect when the script fires?

No — the script tag isn't an Astro component and isn't part of the islands architecture, so it loads independently of whichever components on the page are or aren't hydrated.

What if my project has more than one layout file?

Add the script to each layout actually used to render a page, or have all of them extend one base layout that includes it once.

See it on your own site

Free for 1 website, no card required.