11metrics-pixel-next
v0.1.0
Published
Next.js App Router adapter for 11metrics-pixel-js. Drop <PixelProvider /> in your root layout and it initialises the pixel plus fires pageview() automatically on every client-side route change.
Maintainers
11metricsReadme
11metrics-pixel-next
Next.js App Router adapter for 11metrics-pixel-js. Solves the
one thing the raw <script src="pixel.js"> tag can't: firing pageview()
again on every client-side route change (App Router navigation doesn't
trigger a full page load, so the script's automatic first-load pageview never
repeats on its own).
Install
npm install 11metrics-pixel-next(Pulls in 11metrics-pixel-js automatically. Not yet published — see
"Publishing" below.)
Usage
Add your workspace's pixel ID to .env.local:
NEXT_PUBLIC_11METRICS_PIXEL_ID=your_pixel_id
NEXT_PUBLIC_11METRICS_PIXEL_URL=https://app.11metrics.aiThen mount the provider once in your root layout:
// app/layout.tsx
import { PixelProvider } from '11metrics-pixel-next';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<PixelProvider />
{children}
</body>
</html>
);
}No props needed if the env vars are set — pixelId / pixelUrl props
override them per-environment when you need to.
Everything else (track, identify, setNetworkConsent) is re-exported
from 11metrics-pixel-js for convenience:
import { identify } from '11metrics-pixel-next';
identify({ email: user.email, first_name: user.firstName });Why this exists
public/pixel.js, dropped in as a raw <script> tag, fires exactly one
pageview on initial script execution — there's no pushState/popstate
hook. In an App Router app that means only the very first page a visitor
lands on ever gets tracked; every subsequent client-side navigation is
invisible. PixelProvider watches usePathname()/useSearchParams() and
calls the pixel's pageview() method (added for this purpose) on every
change.
Local development
Not published yet. To build/typecheck locally against ../pixel-js without
polluting package.json's published dependency range:
npm install file:../pixel-js --no-save --legacy-peer-deps
npm run buildPublishing
Publish 11metrics-pixel-js first (this package depends on it). Then:
npm run build
npm login # once, with your npm account
npm publish # from this directoryBump version in package.json first if this isn't the first release.