AlphaWe’re still building this tool. Results may be incomplete or inaccurate, and features may change.It’s publicly accessible so others can try it and share feedback.
Send feedback
AI
SEARCH INDEX

SPA Support

Single Page Applications use client-side routing, which requires special handling for analytics tracking.

What is a Single Page Application?

A Single Page Application (SPA) loads a single HTML page and dynamically updates content as users navigate. Instead of full page reloads, the JavaScript framework handles routing client-side.

Common SPA frameworks include:

  • React (with React Router, Next.js)
  • Vue.js (with Vue Router, Nuxt)
  • Angular
  • Svelte (with SvelteKit)
  • Astro (with View Transitions)

Enabling SPA Mode

Add the data-spa="true" attribute to enable automatic route change detection:

<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>

How It Works

When SPA mode is enabled, the tracking pixel automatically listens for:

pushState

Triggered when the browser history is updated via history.pushState(). This is how most routers navigate to new pages.

replaceState

Triggered when the current history entry is replaced via history.replaceState(). Used for redirects or URL updates without adding history.

popstate

Triggered when users navigate using the browser's back/forward buttons.

When to Use SPA Mode

Use SPA Mode

  • • React with React Router
  • • Next.js (App or Pages Router)
  • • Vue with Vue Router
  • • Nuxt
  • • Angular
  • • SvelteKit
  • • Astro with View Transitions

SPA Mode Not Needed

  • • Static HTML websites
  • • WordPress (without AJAX navigation)
  • • Shopify (standard themes)
  • • Traditional multi-page applications
  • • Server-rendered pages without client routing

Deduplication

The tracking pixel automatically prevents duplicate tracking for:

  • Same URL navigations (no page view recorded)
  • Hash-only changes (e.g., #section)
  • Query parameter changes (only pathname changes trigger new page views)

Troubleshooting

Page views not tracking after navigation

Make sure data-spa="true" is set. Enable debug mode to see if route changes are being detected.

Duplicate page views

Check that you haven't accidentally included the script twice. Also verify your framework isn't manually triggering page view events.

Custom routing implementation

If your app uses a custom routing solution that doesn't use the History API, you may need to manually trigger page views. Contact support for guidance.

Debug SPA Tracking

Enable debug mode to see detailed logs about route detection in your browser console.

data-debug="true"