SPA Support

How It Works

Klar automatically intercepts the History API to detect page navigation:

• Listens for pushState and replaceState
• Listens for popstate events (back/forward navigation)
• Automatically tracks new page views on navigation

No configuration needed for most frameworks!

Supported Frameworks

Klar works out of the box with:

• React Router
• Vue Router
• SvelteKit
• Next.js (client-side navigation)
• Nuxt
• Ember
• Backbone.js
• Any framework using the History API

Manual Tracking

If automatic tracking doesn't work for your setup, you can manually track page views:

// After navigation completes
klar.trackPageview();

React Example

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function Analytics() {
  const location = useLocation();

  useEffect(() => {
    klar.trackPageview();
  }, [location.pathname]);

  return null;
}

Vue Example

import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

router.afterEach((to) => {
  klar.trackPageview(to.fullPath);
});

Disabling Auto-Tracking

If you want to disable automatic SPA tracking:

<script 
  src="https://your-klar-instance.com/klar.js" 
  data-site-id="your-site-id"
  data-auto-track="false"
  defer
></script>