Install Statsy using HTML

This page is all about how to install Statsy using HTML <script> tag. We've made the steps easy to follow. If you're ready to use Statsy with HTML, you're in the right place. Let's get started!

Basic setup

Add Statsy script to your website

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

<script defer src="https://statsy.observer/YOUR_SITE_ID.js"></script>

Track custom events

You can track custom events by using the track function.

<a href="#" onClick="handleClick()">Click me!</a>
 
<script>
  function handleClick() {
    window.statsy.call("track", {
      name: "Clicked on button",
    });
  }
</script>

Advanced setup

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.

<script defer src="https://statsy.acme.com/YOUR_SITE_ID.js"></script>

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 name	Type	Description
`event`	`object`	The event object that will be sent to Statsy.
`event.name`	`string`	The name of the event.
`event.href`	`string`	The 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.

<script>
  window.statsy = window.statsy || [];
  window.statsy.call("eventMiddleware", (event) => {
    if (event.href.includes("/admin")) {
      return null;
    }
 
    return {
      ...event,
      href: event.href.split("?")[0],
    };
  });
</script>

Astro Data Flow