Install GeoEngage on Next.js
Add the GeoEngage tag to a Next.js root layout or custom document as a plain script, so it runs before the page paints.
App Router
Add the tag to the <head> of your root layout, app/layout.tsx (or .jsx):
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<script
src="https://cdn.geoengage.app/ge.js"
data-api-key="YOUR_API_KEY"
data-require-consent="false"
/>
</head>
<body>{children}</body>
</html>
);
}
Use a plain <script> here, not next/script. Its default afterInteractive strategy and lazyOnload both run the tag after the page has painted, which is exactly what GeoEngage has to avoid.
Pages Router
Add the tag to pages/_document.tsx, creating the file if your app doesn't have one:
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head>
<script
src="https://cdn.geoengage.app/ge.js"
data-api-key="YOUR_API_KEY"
data-require-consent="false"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Navigation
Nothing to set up. Next.js changes routes through the browser's History API, which the widget follows: on every route change it removes the previous page's actions, checks your rules again and records a page view. See Single-page apps.
Check it's working
Deploy, open your site in a private window, then follow the checks.