Skip to content
Statsy
Sign inStart free trial

Install on Astro

Put the tag in the shared layout every Astro page uses, so it ships with static and server-rendered routes alike.

Astro pages usually share one layout component. The tag goes in that layout’s head, once.

Where it goes

Open src/layouts/Layout.astro (or whatever your base layout is called, often BaseHead.astro) and paste the tag inside <head>.

src/layouts/Layout.astro
<head>
  <meta charset="utf-8" />
  <title>{title}</title>
  <script defer data-website-id="ws_XXXXXXXX" data-domain="yourstartup.com" src="https://statsy.co/js/script.js"></script>
</head>

Astro leaves a plain <script> with a src alone, so there is no need for is:inline to stop it being bundled.

Confirm it works

Build, deploy, open the site, and watch Live. View source on any page and the tag should be in the delivered HTML.

Check every layout

The Astro gotcha is a second layout. Blog posts, documentation and landing pages often use different .astro layouts, and only the one you edited reports. Grep src/layouts for <head> and make sure every layout either contains the tag or imports the head component that does. With Astro’s view transitions turned on, navigation still goes through the History API, so route changes are tracked without extra code.

Last updated · Markdown version