Astro is a modern web framework for building fast, content-focused websites. Loamly works with both static (SSG) and server-rendered (SSR) Astro sites.

Add the tracking script

Add the Loamly script to your base layout file (usually src/layouts/Layout.astro) just before the closing </head> tag:

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

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{title}</title>

  <!-- Loamly tracking script -->
  <script src="https://app.loamly.ai/t.js?d=yourdomain.com" defer></script>
</head>
<body>
  <slot />
</body>
</html>

Replace yourdomain.com

Replace yourdomain.com with the domain you registered in your Loamly workspace settings.

Works with SSG and SSR

This approach works with both static site generation and server-side rendering. The script loads on the client regardless of how the HTML is generated.

Using astro.config.mjs

Alternatively, you can inject the script globally using Astro's configuration file. This avoids editing layout files and ensures the script is included on every page:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    plugins: [
      {
        name: 'loamly-inject',
        transformIndexHtml() {
          return [
            {
              tag: 'script',
              attrs: {
                src: 'https://app.loamly.ai/t.js?d=yourdomain.com',
                defer: true,
              },
              injectTo: 'head',
            },
          ];
        },
      },
    ],
  },
});

Or use a <script> tag with is:inline in a shared component:

---
// src/components/Analytics.astro
---

<script
  is:inline
  src="https://app.loamly.ai/t.js?d=yourdomain.com"
  defer
></script>

Then include it in your layout:

---
// src/layouts/Layout.astro
import Analytics from '../components/Analytics.astro';
---

<html lang="en">
<head>
  <Analytics />
</head>
<body>
  <slot />
</body>
</html>

Enable AI verification (recommended)

The client-side script tracks page views, but to unlock the full power of Loamly you need server-side setup. This enables AI bot crawl detection, RFC 9421 signature verification, bot-to-click temporal matching, and prompt-to-crawl correlation with your Intelligence data. Without it, you miss the connection between AI bots crawling your site and the humans who visit after.

See the AI Visitor Verification guide for setup instructions.

Verify installation

Start your development server with npm run dev
Visit your site in a browser
Right-click → View Page Source
Search for "loamly" to confirm the script is in the head
Check your Loamly dashboard — the visit should appear within 2 minutes

Troubleshooting

Not seeing visits?

Make sure the domain in the script tag matches the domain registered in your Loamly workspace settings
Wait at least 2 minutes — data is not instant
If using is:inline, ensure the script tag is not being processed by Astro's bundler

Ad blockers

Some browser extensions may block tracking scripts. Try loading your site in an incognito/private window with extensions disabled

Debug mode

Open your browser's developer console and run:

Loamly.debug(true)

This will log all tracking events to the console so you can verify everything is working.

Need help?

If you're still having trouble, email us at hello@loamly.ai and we'll help you get set up.