Open your website’s installation guide
In VisitLift Settings, select your website and choose Open installation guide. Copy AI agent prompt is the quickest way to give your coding assistant the correct website ID and tracker origin. Ask it to use Next.js Script with afterInteractive and review the changed layout before publishing.
The example below uses placeholders. Replace the entire https://YOUR_VISITLIFT_HOST origin and YOUR_SITE_ID with the values from your actual guide. The Site ID is a public tracking destination, not a Stripe key or an administrative credential.
1. Install the tracking code
For the App Router, find app/layout.tsx or src/app/layout.tsx. If tracking should cover only your public marketing pages, use the shared layout around those pages instead. Import Script from next/script and add one Script component inside the existing layout.
Use strategy="afterInteractive" for this analytics script. Keep your root layout as a Server Component; it does not need "use client" just to render Script. Merge the component into your existing layout and preserve its metadata, fonts, providers, children, and other scripts. Do not replace the whole file with this example.
For the older Pages Router, render the same Script once in pages/_app.tsx. Use one installation approach. Do not also paste a raw tracker script into individual pages, a tag manager, or another layout.
// Add to your existing app/layout.tsx or src/app/layout.tsx.
import Script from "next/script";
// Inside your existing <body>, alongside {children}:
<Script
id="visitlift-tracker"
src="https://YOUR_VISITLIFT_HOST/tracker.js"
data-site="YOUR_SITE_ID"
strategy="afterInteractive"
/>2. Publish and visit your website
Save the change, run your normal build checks, and deploy it using your existing hosting workflow. Wait until the deployment is available on the domain registered in VisitLift. An unregistered preview subdomain or localhost page will not verify that production website.
Open a public page directly, then follow a Next.js internal link to another public page. The tracker observes client-side history navigation, so do not add a second pageview call or a route-change tracking effect. A full page load and an internal navigation should both be checked on your actual deployment.
3. Verify your first event
Return to VisitLift’s installation guide and choose Check for first event. It also checks automatically while open. The received-event timestamp confirms that your site’s events are being accepted. Use Overview or Acquisition afterward to inspect traffic.
If nothing arrives, confirm the deployed domain, script source, and data-site value. Check that the current page is not excluded and that a blocker or Content Security Policy is not preventing tracker.js or /api/collect. Basic tracking does not require an attribution-consent call.
Browser-only code and consent
Custom event and consent methods use window.visitlift and belong in client-side code after the external script is ready. Do not access window in a Server Component. The basic installation needs no extra JavaScript calls.
After a real action succeeds, a Client Component can call window.visitlift?.track("signup_completed"). Optional chaining avoids a missing-script error but does not queue an early event; coordinate with Script readiness if the action can occur before load.
Persistent attribution remains optional. Connect setConsent(true) to your consent manager only after the visitor grants the relevant permission, and setConsent(false) on revocation. Do not enable it unconditionally in the layout or an onLoad callback.