React Integration

Add AI Search Index to your React application built with Vite, Create React App, or similar tools.

Method 1: HTML Script Tag (Recommended)

The simplest approach is to add the script directly to your index.html:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    
    <!-- AI Search Index Tracking Pixel -->
    <script 
      src="https://www.aisearchindex.com/pixel.js" 
      data-tid="YOUR_TRACKING_ID"
      data-spa="true"
      async
    ></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>

Method 2: React Component

Alternatively, create a component to load the script:

src/components/AISearchIndex.tsx

import { useEffect } from 'react'

interface AISearchIndexProps {
  trackingId: string
  spa?: boolean
  debug?: boolean
}

export function AISearchIndex({ trackingId, spa = true, debug = false }: AISearchIndexProps) {
  useEffect(() => {
    // Check if script already exists
    if (document.querySelector('script[data-ais-pixel]')) return

    const script = document.createElement('script')
    script.src = 'https://www.aisearchindex.com/pixel.js'
    script.async = true
    script.setAttribute('data-tid', trackingId)
    script.setAttribute('data-ais-pixel', 'true')
    
    if (spa) script.setAttribute('data-spa', 'true')
    if (debug) script.setAttribute('data-debug', 'true')
    
    document.body.appendChild(script)

    return () => {
      // Cleanup on unmount (optional)
      script.remove()
    }
  }, [trackingId, spa, debug])

  return null
}

Then add it to your App component:

src/App.tsx

import { AISearchIndex } from './components/AISearchIndex'

function App() {
  return (
    <>
      <AISearchIndex 
        trackingId="YOUR_TRACKING_ID" 
        spa={true} 
      />
      {/* Your app content */}
    </>
  )
}

export default App

Using React Router?

Enable SPA mode to automatically track route changes:

<script 
  src="https://www.aisearchindex.com/pixel.js" 
  data-tid="YOUR_TRACKING_ID"
  data-spa="true"  // Required for React Router
  async
></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>

SPA mode works with React Router v5, v6, and other routing libraries like TanStack Router.

Vite Projects

For Vite projects, add the script to index.html in your project root. The example in Method 1 works directly with Vite.

Create React App

For CRA projects, add the script to public/index.html:

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... meta tags ... -->
  </head>
  <body>
    <div id="root"></div>
    
    <!-- AI Search Index -->
    <script 
      src="https://www.aisearchindex.com/pixel.js" 
      data-tid="YOUR_TRACKING_ID"
      data-spa="true"
      async
    ></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>

Learn more

SPA Support Details Configuration Options