Add DataFast to your Astro project

Follow these steps to integrate DataFast analytics into your Astro application.

Add tracking script to layout component

The recommended way to add scripts to all pages in an Astro application is by using a layout component.

Open or create your main layout file, typically located at src/layouts/Layout.astro.

Add the DataFast tracking script to the <head> section:

---
// 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-website-id="YOUR_WEBSITE_ID"
      data-domain="YOUR_DOMAIN.COM"
      src="https://datafa.st/js/script.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Replace YOUR_WEBSITE_ID with your actual Website ID from DataFast. Replace YOUR_DOMAIN.COM with your website's root domain.

Make sure all your pages use this layout component:

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

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

Alternative: Using Astro's built-in head management

You can also add the script using Astro's head management in individual pages:

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

<html lang="en">
  <head>
    <script
      defer
      data-website-id="YOUR_WEBSITE_ID"
      data-domain="YOUR_DOMAIN.COM"
      src="https://datafa.st/js/script.js"
    ></script>
  </head>
  <body>
    <!-- Your page content -->
  </body>
</html>

Verify installation

After implementing either method:

Build and deploy your Astro site
Visit your live website
Check your DataFast dashboard for incoming data
It might take a few minutes for the first pageviews to appear

DataFast is disabled on localhost to avoid tracking your own traffic during development.

Something missing? Suggest features ✍️