Set up Flowsery Analytics in an Astro project

This guide walks you through adding Flowsery Analytics tracking to your Astro site.

Insert the tracking snippet into your layout

The best approach for loading scripts on every page of an Astro app is through a shared layout component.

  1. Open (or create) your main layout file -- usually at src/layouts/Layout.astro.

  2. Place the Flowsery Analytics script tag inside <head>:

    ---
// src/layouts/Layout.astro
export interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title}</title>
    <script
      defer
      data-fl-website-id="flid_******"
      data-domain="your_domain.com"
      src="https://analytics.flowsery.com/js/script.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

    Swap flid_****** for the Website ID shown in your Flowsery Analytics settings. Swap your_domain.com for the root domain of your site.

  3. Confirm that every page in your project uses this layout:

    ---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---

<Layout title="Welcome to Astro">
  <main>
    <h1>Welcome to Astro</h1>
  </main>
</Layout>

Alternative: Astro's built-in head management

You can also embed the script directly in any .astro page:

---
// Any .astro page
---

<html lang="en">
  <head>
    <script
      defer
      data-fl-website-id="flid_******"
      data-domain="your_domain.com"
      src="https://analytics.flowsery.com/js/script.js"
    ></script>
  </head>
  <body>
    <!-- Your page content -->
  </body>
</html>

Confirm everything is working

Once you have deployed one of the methods above:

  • Build and publish your Astro site
  • Navigate to your live URL
  • Open your Flowsery Analytics dashboard and look for incoming pageviews
  • The first data points may take a couple of minutes to appear

For additional options such as localhost tracking, custom API endpoints, or cross-domain configuration, refer to the script configuration reference.

Flowsery Analytics ignores localhost traffic by default so you do not inflate your numbers during development.