Skip to content
fusionaly_
GitHub

Astro Analytics Without Cookies

Add Fusionaly to an Astro site with one script tag in your layout. It works on static sites and with view transitions, with no cookies.

In Astro, add the Fusionaly script to the layout that all your pages use. It works on static sites, on server-rendered sites, and with view transitions.

Before you start

You need a Fusionaly server, with your site's domain added as a website. Fusionaly takes events only from the domains you added. See Installation.

In the examples, replace analytics.example.com with the domain of your Fusionaly server.

Add the script

  1. Open the layout that holds <head>, often src/layouts/Layout.astro.

  2. Add the script with is:inline:

    src/layouts/Layout.astro
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <script is:inline defer src="https://analytics.example.com/y/api/v1/sdk.js"></script>
        <title>{title}</title>
      </head>
      <body>
        <slot />
      </body>
    </html>

is:inline tells Astro to keep the tag as you wrote it. Without it, Astro tries to bundle the script.

Page changes

Without view transitions, each page is a full page load, and Fusionaly counts it. With view transitions (<ClientRouter />), Astro changes pages with history.pushState, and Fusionaly counts a page view each time the path changes. If Astro runs the script tag again after a page change, the SDK ignores it, so nothing is counted twice.

Skip it in development

This is optional. Fusionaly refuses events from localhost, so your own tests never count. To not load the script at all in development, wrap the tag in import.meta.env.PROD:

src/layouts/Layout.astro
{import.meta.env.PROD && (
  <script is:inline defer src="https://analytics.example.com/y/api/v1/sdk.js"></script>
)}

Track events

Fusionaly counts page views and button clicks without any setup. To give an event your own name, use the data-fusionaly-event-name attribute. See Tracking.

Add the attribute in any component:

<a href="/docs/" data-fusionaly-event-name="docs_clicked">Read the docs</a>

An .astro component has no click handlers. For data that only the browser knows, call the SDK from a <script>:

<button id="copy">Copy</button>


<script>
  document.getElementById("copy")?.addEventListener("click", () => {
    window.Fusionaly?.sendCustomEvent("code_copied", { page: location.pathname });
  });
</script>

With TypeScript, declare the SDK in a .d.ts file that your tsconfig.json includes:

fusionaly.d.ts
declare global {
  interface Window {
    Fusionaly?: {
      sendCustomEvent(name: string, metadata?: Record<string, unknown>): void;
      sendPageView(): void;
    };
  }
}


export {};

Check that it works

  1. Open your site in a normal browser window. Fusionaly skips automated browsers, such as Playwright, and browsers that send Do Not Track.
  2. In the developer tools, open the network tab, and find a POST request to /x/api/v1/events. A 403 status means that your site's domain is not added as a website.
  3. Open your Fusionaly dashboard. The visit shows up within about a minute.

Next steps

Guides for other frameworks: Next.js, React, Nuxt, SvelteKit, WordPress, Shopify, Webflow, Ghost, Hugo, and the generic guide.