Next.js

1 · Sign up (or log in)

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)

  1. Open app/layout.tsx (or app/layout.js)

  2. 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)

  1. Open pages/_app.tsx (or pages/_app.js)

  2. 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

  1. Deploy or restart your development server

  2. Return to Humblytics and click Verify Website

  3. Open your live site in a private/incognito window and refresh once

  4. 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)

PreviousWordPressNextGhost CMS

Last updated

Was this helpful?