Install guide · framework · ~3 min
npm install @admaxxer/pixel — call initPixel() in layout.
For Next.js we recommend the npm package — it is SSR-safe (initPixel no-ops on the server) and gives you type safety. Both the Pages Router and the App Router are supported.
Add @admaxxer/pixel to your project.
npm install @admaxxer/pixel
Create pages/_app.tsx (or edit yours) and call initPixel at module top-level. The function no-ops on the server, so this is safe.
pages/_app.tsx tsximport type { AppProps } from 'next/app';
import { initPixel } from '@admaxxer/pixel';
initPixel({ websiteId: 'YOUR_WEBSITE_ID' });
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
For the App Router, create a client component and import it from the root layout.
app/admaxxer-init.tsx tsx'use client';
import { useEffect } from 'react';
import { initPixel } from '@admaxxer/pixel';
export function AdmaxxerInit() {
useEffect(() => {
initPixel({ websiteId: 'YOUR_WEBSITE_ID' });
}, []);
return null;
}
Load any public page on your site in a fresh browser tab. Within a few seconds, the Admaxxer dashboard realtime view should show the event. If nothing lands after 2 minutes, re-check the snippet is actually in the rendered HTML <head> (View Source, not just DevTools).