attribu.tech

Astro

Add attribu.tech to your Astro project.

Add the script to your layout

Add the tracking script to the <head> of your base layout component. This ensures it loads on every page that uses the layout.

---
// src/layouts/Layout.astro
const { title } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <script
      defer
      data-website-id="YOUR_SITE_ID"
      data-domain="yourdomain.com"
      src="https://attribu.tech/js/script.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>
Replace YOUR_SITE_ID with your actual Website ID from attribu.tech. Replace yourdomain.com with your website's root domain.

Using the layout in a page

Any page that imports the layout will automatically include the tracking script:

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

<Layout title="Home">
  <h1>Welcome</h1>
</Layout>
Astro strips the defer attribute from <script> tags that use the is:inline directive. Use a plain <script> tag as shown above so the attribute is preserved.

View transitions

If you use Astro's ViewTransitions component for client-side navigation, the tracking script automatically detects route changes. No extra setup needed.

Verify installation

  1. Start your Astro dev server or deploy the site.
  2. Open your browser's Developer Tools and check the Network tab for a request to /js/script.js and a POST to /api/events.
  3. Check your attribu.tech dashboard for incoming pageviews.

What's next

PreviousVue.jsNextWordPress
Copied