Next.js

Visit humblytics.com → Start Free Trial. Finish signup—or log in to your existing workspace.

2 · Add your website in Humblytics

In the sidebar, click Add Website.

Domain – enter your-domain.com (omit https:// and www)
Site Name – internal label (e.g. Marketing-Prod)

Copy the snippet from Install Tracking Code:

html

<!-- Start Humblytics Tracking Code -->
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
<!-- End Humblytics Tracking Code -->

Keep this tab open—we'll return and click Verify Website once the tag is live.

3 · Add the script to your Next.js app

For Next.js 13+ (App Router)

Open app/layout.tsx (or app/layout.js)
Import the Next.js Script component and add before closing </body>:

tsx

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Note: Replace YOUR_ID_HERE with your actual project ID.

For Next.js 12 or older (Pages Router)

Open pages/_app.tsx (or pages/_app.js)
Add the script after your main component:

tsx

import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
        strategy="afterInteractive"
      />
    </>
  )
}

Note: Replace YOUR_ID_HERE with your actual project ID.

Why afterInteractive? Loads the script after the page becomes interactive—optimal for analytics without blocking initial page load.

4 · Deploy and verify

Deploy or restart your development server
Return to Humblytics and click Verify Website
Open your live site in a private/incognito window and refresh once
Within ~30 seconds you should see a green Verified badge and live visitor count

If verification fails, check:

Script ID matches your project
You deployed the latest version
Script isn't blocked by ad-blockers or browser extensions
No Content Security Policy (CSP) blocking the script

5 · Explore & optimize

Dashboard – see traffic, top pages, and referrers
Heatmaps – auto-generated for user clicks and scroll depth
Experiments – run A/B tests without extra libraries (Experiments → New Test)

PreviousLovable NextPodia

Last updated 2 months ago

hashtag1 · Sign up (or log in)

hashtag2 · Add your website in Humblytics

hashtag3 · Add the script to your Next.js app

hashtagFor Next.js 13+ (App Router)

hashtagFor Next.js 12 or older (Pages Router)

hashtag4 · Deploy and verify

hashtag5 · Explore & optimize

1 · Sign up (or log in)