heatm.app

Back to Installation Guides

Add heatm.app to your Next.js application

Follow these steps to integrate heatm.app analytics into your Next.js application.

Add tracking script using Script component

Add the tracking script to your Next.js application using the Script component in your root layout or _app.js:

1. Open your `app/layout.tsx` or `pages/_app.js` file

2. Import the Script component from Next.js

3. Add the tracking script to the head section:

Code

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://heatm.app/js/script.v2.min.js"
          data-website-id="YOUR_WEBSITE_ID"
          data-domain="your_domain.com"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Replace `YOUR_WEBSITE_ID` with your actual Website ID from heatm.app. Replace `your_domain.com` with your website's root domain.

Verify installation

After implementing:

Visit your live website
Check your heatm.app dashboard for incoming data
It might take a few minutes for the first pageviews to appear

For advanced configuration options like localhost tracking, custom API endpoints, or cross-domain setup, see the script configuration reference.