11metrics-pixel-next

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.ai

Then 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 build

Publishing

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 directory

Bump version in package.json first if this isn't the first release.