Frameworks

Astro

Astro analytics with Stickybeak starts by adding its script to your rendered pages; this guide shows you where it belongs and how to track page views, goals and purchase revenue. It is a lighter alternative to Google Analytics for Astro, with live visitors, goals and revenue attribution in one script.

#Add the script

#Add the script

1. #Copy your snippet

   In Stickybeak, open Settings, pick your site and choose Astro.

2. #Paste it into your base layout

   Usually src/layouts/Layout.astro, or whichever layout every page uses.

   ---
   const { title } = Astro.props;
   ---
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <title>{title}</title>
       <script
         is:inline
         defer
         data-site="YOUR_SITE_ID"
         data-domain="example.com"
         src="https://app.usestickybeak.com/_cfw/s.js"
       ></script>
     </head>
     <body>
       <slot />
     </body>
   </html>

3. #Build and deploy

   Visits appear once the new build is live.

#Only load it in production

Read the site ID from a PUBLIC_ environment variable and only render the tag in production builds:

#Starlight

In astro.config.mjs, add the same script and attributes through Starlight's head option.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal to links or buttons. For other events, use the typed browser code below. See Custom goals.

<a href="/pricing" data-goal="view_pricing" data-goal-from="hero">See pricing</a>

interface Window {
  stickybeak?: (goal: string, props?: Record<string, string | number | boolean>) => void;
}

<form id="newsletter">
  <input type="email" name="email" required />
  <button>Subscribe</button>
</form>

<script>
  document.addEventListener("astro:page-load", () => {
    const form = document.querySelector<HTMLFormElement>("#newsletter");
    if (!form) return;
    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const res = await fetch("/api/subscribe", { method: "POST", body: new FormData(form) });
      if (res.ok) window.stickybeak?.("newsletter_signup");
    });
  });
</script>

#Track purchases

After confirming an order in the browser, send:

window.stickybeak?.("purchase", { revenue: 49, currency: "USD", order_id: "ORDER_ID" });

Use real values; see Revenue.

#Page changes

<ClientRouter /> (before Astro 5, <ViewTransitions />) counts new paths, including back and forward. Prefetches do not count. See Single-page apps.

#If it isn't working

Check the production site ID and domain, then see Troubleshooting.