# 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

```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

```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

```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)
