Astro Integration

Add AI Search Index to your Astro website.

Installation

Add the script to your base layout file:

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" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    
    <!-- AI Search Index Tracking Pixel -->
    <script 
      src="https://www.aisearchindex.com/pixel.js" 
      data-tid="YOUR_TRACKING_ID"
      is:inline
    ></script>
    <noscript><img src="https://www.aisearchindex.com/api/pixel?tid=YOUR_TRACKING_ID" width="1" height="1" style="position:absolute;left:-9999px;visibility:hidden" alt="" /></noscript>
  </body>
</html>

The is:inline Directive

The is:inline directive tells Astro to include the script tag as-is, without bundling or processing it.

Important: Always use is:inline for the tracking pixel to ensure it loads correctly from our CDN.

With View Transitions

If you're using Astro's View Transitions API, enable SPA mode to track navigation:

src/layouts/Layout.astro

---
import { ViewTransitions } from 'astro:transitions'
---

<!doctype html>
<html lang="en">
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
    
    <script 
      src="https://www.aisearchindex.com/pixel.js" 
      data-tid="YOUR_TRACKING_ID"
      data-spa="true"
      is:inline
    ></script>
    <noscript><img src="https://www.aisearchindex.com/api/pixel?tid=YOUR_TRACKING_ID" width="1" height="1" style="position:absolute;left:-9999px;visibility:hidden" alt="" /></noscript>
  </body>
</html>

Static Sites (No SPA)

For purely static Astro sites without View Transitions, you don't need SPA mode:

<script 
  src="https://www.aisearchindex.com/pixel.js" 
  data-tid="YOUR_TRACKING_ID"
  is:inline
></script>
<noscript><img src="https://www.aisearchindex.com/api/pixel?tid=YOUR_TRACKING_ID" width="1" height="1" style="position:absolute;left:-9999px;visibility:hidden" alt="" /></noscript>

Each page load will be tracked as a separate page view.

Hybrid / SSR Mode

For Astro projects using hybrid or SSR mode, the same installation applies. Add the script to your layout file and it will work on both static and server-rendered pages.

Learn more

SPA Support Details Configuration Options