SPA

Installation for React, Next.js, Remix, and other single-page application frameworks.

Palace Tracker has built-in support for SPAs and client-side routing. It automatically detects route changes by monitoring the browser's History API (pushState and replaceState), so no additional configuration is needed beyond the standard script tag.

When a route change is detected, the tracker sends a page_exit event for the previous page, resets the timer and scroll depth tracker, and sends a new pageview event after a 300ms delay. In SPAs, the original external referrer is preserved throughout the session — internal route changes do not update it.

To prevent tracking on certain pages, set data-auto-track="false" and manually call palace.track() where and when data should be tracked.

React

Add to public/index.html:

<script 
  src="https://cdn.palaceanalytics.com/palace-tracker.js" 
  data-website-id="your-website-id"
  data-auto-track="true"
  defer
></script>

Or add via a useEffect hook:

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.palaceanalytics.com/palace-tracker.js';
  script.setAttribute('data-website-id', 'your-website-id');
  script.setAttribute('data-auto-track', 'true');
  script.defer = true;
  document.head.appendChild(script);
}, []);

Next.js

App Router (app/layout.tsx):

<Script 
  src="https://cdn.palaceanalytics.com/palace-tracker.js" 
  data-website-id="your-website-id"
  data-auto-track="true"
  strategy="afterInteractive"
/>

Pages Router (pages/_document.tsx):

<Script 
  src="https://cdn.palaceanalytics.com/palace-tracker.js" 
  data-website-id="your-website-id"
  data-auto-track="true"
  strategy="afterInteractive"
/>

Remix

Add to app/root.tsx:

<script 
  src="https://cdn.palaceanalytics.com/palace-tracker.js" 
  data-website-id="your-website-id"
  data-auto-track="true"
  defer
/>