Clickport
Start free trial
Intuitive Dashboard Real-Time Analytics Session Tracking Engagement Tracking Goal Conversions Filtering & Segments Conversion Funnels User Flows Privacy First Bot Protection
For agencies For SaaS For e-commerce For affiliates For bloggers For publishers Google Search Console Bing Webmaster Tools WordPress Shopify Tracker install SPA tracking Custom Events API reference vs Google Analytics vs Matomo vs Cloudflare
How It Works Blog Updates Documentation UTM Builder GDPR Checker GA4 Data Loss Estimator GA Legal Status About Contact Status Security

Next.js

Clickport works in any Next.js app with a single component in your root layout. Client-side navigation is picked up automatically, so every route change counts as a pageview without any router integration.

App Router

Add the tracker to app/layout.tsx (or .jsx) using the Script component:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          defer
          data-domain="yoursite.com"
          src="https://clickport.io/tracker.js"
        />
      </body>
    </html>
  )
}

Replace yoursite.com with the domain you registered in Clickport. The default loading strategy (afterInteractive) is right for analytics; the custom data-domain attribute passes through unchanged.

A plain <script> tag in the layout's <head> works as well if you prefer zero abstraction. Both end up in every page of the app.

Pages Router

On the older Pages Router, put the same Script component in pages/_app.js:

import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script
        defer
        data-domain="yoursite.com"
        src="https://clickport.io/tracker.js"
      />
      <Component {...pageProps} />
    </>
  )
}

Route changes are tracked automatically

Next.js navigates client-side after the first load. The Clickport tracker hooks the History API, so router.push, Link clicks, and back/forward navigation each record a pageview with no extra code. See SPA Tracking for the details, including scroll and engagement measurement across route changes.

Custom events

Track anything beyond pageviews from client components:

'use client'

function SignupButton() {
  return (
    <button onClick={() => window.clickport?.track('Signup Click')}>
      Sign up
    </button>
  )
}

The optional chaining keeps the call safe when the tracker has not loaded yet (or is blocked). See Custom Events for properties and revenue.

Good to know

  • next dev on localhost is never tracked; the tracker ignores localhost by design. Your dev sessions stay out of your stats even before you set up self-exclusion.
  • Preview deployments on shared hosts have their own hostnames. Use the hostname allow list if you want production-only numbers.
  • If you have a custom not-found page, set window.cpConfig = { is_404: true } in it so hard loads of dead URLs land in 404 Tracking. Client-side navigations to it are not flagged.
  • Serving the tracker through your own domain? See Proxy Setup; there is a rewrite recipe for Vercel and Next.js setups.

Related

Previous Google Tag Manager