SPA Tracking

Clickport automatically tracks page navigations in single page applications. If your site is built with React, Vue, Next.js, Nuxt, Angular, Svelte, or any other SPA framework, pageviews are recorded on every route change without any extra configuration.

Zero configuration required. Just add the standard Clickport script tag to your app. The tracker detects SPA navigations automatically. There are no special SPA modes, plugins, or router integrations to set up.

How it works

Modern SPA frameworks use the browser's History API to change the URL without triggering a full page reload. Clickport intercepts these changes at the browser level by wrapping two History API methods and listening for navigation events:

history.pushState: Called by frameworks when navigating to a new route (e.g., clicking a link in React Router or Vue Router).
history.replaceState: Called when the current history entry is replaced (e.g., redirects, query parameter updates).
popstate event: Fired when the user clicks the browser's back or forward buttons.

The tracker wraps pushState and replaceState with thin wrappers that call the original method, then check if the URL has changed. If it has, a new pageview event is sent to Clickport. The popstate listener handles back/forward button navigation the same way.

How SPA tracking works

What happens when a visitor navigates between routes in your SPA

Visitor clicks a link

Your framework's router calls history.pushState() to update the URL

Clickport intercepts the call

The wrapped pushState runs the original method, then checks if the URL changed

Engagement data is linked to the page visit

Scroll depth and active time for the previous page are associated with its page visit ID

New pageview is recorded

A pageview event is sent with the new URL. The server assigns a new page visit ID.

Session continues

The session ID (stored in sessionStorage) persists across navigations. All pages belong to one session.

URL change detection

The tracker keeps a reference to the last known URL. On every pushState, replaceState, or popstate event, it compares the current location.href to this reference. A new pageview is only sent when the full URL actually changes. This prevents duplicate pageviews when a framework calls replaceState without changing the URL.

Framework installation guides

The installation is the same for every SPA framework: add the Clickport script tag once in your app's HTML entry point. The tracker handles everything else.

React / Vite / Create React App

<head> <meta charset="UTF-8"> <title>My App</title>  <script defer data-domain="yoursite.com" src="https://clickport.io/tracker.js"></script> </head>

Next.js

In Next.js 13+ with the App Router, add the script to your root layout. For the Pages Router, use _document.js.

Next.js App Router (app/layout.js)

import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <head> <Script defer data-domain="yoursite.com" src="https://clickport.io/tracker.js" strategy="afterInteractive" /> </head> <body>{children}</body> </html> ) }

Vue / Nuxt

For a standard Vue app (Vite), add the script to index.html. For Nuxt 3, use nuxt.config.ts.

Nuxt 3 (nuxt.config.ts)

export default defineNuxtConfig({ app: { head: { script: [{ src: 'https://clickport.io/tracker.js', defer: true, 'data-domain': 'yoursite.com' }] } } })

Angular

Add the script tag to src/index.html inside the <head> section. Angular's router uses pushState by default, so SPA tracking works automatically.

<!-- src/index.html -->
<head>
  <!-- Clickport Analytics -->
  <script defer data-domain="yoursite.com"
    src="https://clickport.io/tracker.js"></script>
</head>

Svelte / SvelteKit

For SvelteKit, add the script to src/app.html. For a plain Svelte app, use index.html.

<!-- src/app.html -->
<head>
  <!-- Clickport Analytics -->
  <script defer data-domain="yoursite.com"
    src="https://clickport.io/tracker.js"></script>

  %sveltekit.head%
</head>

Astro

Add the script in your base layout component, typically src/layouts/Layout.astro.

<!-- src/layouts/Layout.astro -->
<head>
  <!-- Clickport Analytics -->
  <script defer data-domain="yoursite.com"
    src="https://clickport.io/tracker.js"></script>
</head>

Astro note. Astro renders pages as static HTML by default (MPA mode). SPA tracking only applies to interactive islands or if you have enabled client-side routing via View Transitions. For standard Astro sites, the tracker's regular pageview tracking handles each page load.

Session continuity

Clickport maintains a single session across all SPA navigations. The session ID is stored in sessionStorage, which persists as long as the browser tab stays open. When a visitor navigates from /home to /pricing to /signup within your SPA, all three pageviews belong to the same session.

Each pageview within the session receives its own unique page visit ID. This ID is used to link engagement data (scroll depth, active time) to the correct page.

Pages Sessions Goals

Session #48291 3 pages 4:32 duration Eng 74%

Chrome / macOS / Berlin, Germany