Docs
Integrations
Astro

Install Statsy on Astro

This page is all about how to get Statsy up and running on Astro. We've made the steps easy to follow. If you're ready to use Statsy with Astro, you're in the right place. Let's get started!

View example on Github

Basic setup

Install @statsy/astro

The Statsy Astro package is available on npm. It is recommended to install it with your package manager of choice.

pnpm i @statsy/astro

Add <Analytics /> to your app

The Statsy Astro package provides a component that you can add to your app. It will automatically track page views and send them to Statsy.

src/layouts/BaseLayout.astro
---
import { Statsy } from "@statsy/astro"
---
 
<html>
  <head>
    <Statsy siteId="YOUR_SITE_ID" />
  </head>
</html>

Track custom events

You can track custom events by using the track function.

---
import { track } from "@statsy/astro";
---
 
<button id="button">Click Me</button>
<script>
  function handleClick () {
    track("button-clicked")
  }
  document.getElementById("button").addEventListener("click", handleClick);
</script>

Read more about:

Custom EventsTracking Script Settings

Advanced setup

Component props

The <Analytics /> component accepts the following props:

Prop nameTypeDescriptionRequired
siteIdstringThe ID of your site. You can find it in the Sites section.Yes
trackingEndpointDomainstringThe domain to use for tracking. Defaults to statsy.observer.No
eventMiddlewarefuncA function that is called before sending the request.No

Custom tracking endpoint domain

By default, the Statsy React package sends tracking requests to statsy.observer. You can change this by using the trackingEndpointDomain prop.

src/layouts/BaseLayout.astro
---
import { Statsy } from "@statsy/astro"
---
 
<html>
  <head>
    <Statsy
      siteId="YOUR_SITE_ID"
      trackingEndpointDomain="statsy.example.com"
    />
  </head>
</html>

Learn more about custom domains in the Tracking Script section.

Customizing events with eventMiddleware

The eventMiddleware function is called before sending the request to Statsy. It receives the following arguments:

Argument nameTypeDescription
eventobjectThe event object that will be sent to Statsy.
event.namestringThe name of the event.
event.hrefstringThe href of the event.

The eventMiddleware option lets you change details about an event before sending it to Statsy. For example, you can set it up so that any event with "/admin" in the URL is ignored.

When you make it return null, no event details are sent. Plus, you can tweak the URL however you want, like getting rid of parts after the question mark.

src/layouts/BaseLayout.astro
---
import { Statsy } from "@statsy/astro"
---
 
<html>
  <head>
    <Statsy
      siteId="YOUR_SITE_ID"
      eventMiddleware={(event) => {
        // Ignore all events that have a `/admin` inside the URL
        if (event.href.includes("/admin")) {
          return null;
        }
 
        // Remove the `token` query parameter from the URL
        if (event.href.includes("token")) {
          let url = new URL(event.href);
          url.searchParams.delete("token");
 
          return {
            ...event,
            href: url.toString(),
          };
        }
 
        return event;
      }}
    />
  </head>
</html>
Nuxt.jsHTML