Install on Astro

Put the tag in the layout every page uses. Astro copies it into each page's <head>, on static and server-rendered sites alike.

1. Copy your snippet

   In MetricRaven, open your site's Settings → Install card and copy the script tag. It already contains your site ID.

2. Add it to your base layout

   Replace YOUR_SITE_ID with the public site ID from your site's Settings → Install card. The site ID is public and safe in browser code; never put your secret key in a page.

   src/layouts/Layout.astro

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   15

   16

   17

   18

   19

   ---
   // src/layouts/Layout.astro
   const { title } = Astro.props;
   ---
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <title>{title}</title>
       <script
         is:inline
         defer
         src="https://metricraven.com/js/script.js"
         data-site-id="YOUR_SITE_ID"
       ></script>
     </head>
     <body>
       <slot />
     </body>
   </html>

   is:inline tells Astro to output the tag as written instead of bundling it, which keeps the data-* attributes the tracker reads.

3. Build, deploy and open your site

   astro dev runs on localhost, which is not tracked by default; check the deployed site.

Notes

• Have more than one layout? Add the tag to each, or to a shared head component they all include.
• With view transitions (<ClientRouter />), navigations use the history API, which the tracker records.
• Click between a few pages and check the Network panel shows one /api/v1/collect pageview per navigation. Two per click means the tag is loaded twice.
• To serve the script from your own domain, see the Astro proxy.

Optional script attributes are listed in Install & verify. To exclude your own visits, see Exclude your visits.