@adkit.so/meta-pixel-next/dist/index.mjs

Next.js integration for Meta Pixel tracking - auto PageView on route changes

'use client';

import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { useRef, useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { MetaPixelProvider, useMetaPixel } from '@adkit.so/meta-pixel-react';
export { MetaPixelProvider, initMetaPixel, useMetaPixel } from '@adkit.so/meta-pixel-react';

function MetaPixel({
  pixelId,
  debug = false,
  enableLocalhost = false,
  trackPageViews = true,
  children
}) {
  const resolvedPixelId = pixelId || process.env.NEXT_PUBLIC_META_PIXEL_ID || "";
  if (!resolvedPixelId) {
    console.warn("[Meta Pixel] No pixel ID provided. Set pixelId prop or NEXT_PUBLIC_META_PIXEL_ID env var.");
    return /* @__PURE__ */ jsx(Fragment, { children });
  }
  return /* @__PURE__ */ jsxs(
    MetaPixelProvider,
    {
      pixelIds: resolvedPixelId,
      debug,
      enableLocalhost,
      autoTrackPageView: true,
      children: [
        trackPageViews && /* @__PURE__ */ jsx(RouteChangeTracker, { debug }),
        children
      ]
    }
  );
}
function RouteChangeTracker({ debug }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const meta = useMetaPixel();
  const isFirstRender = useRef(true);
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    if (meta.isLoaded()) {
      meta.track("PageView");
      if (debug) {
        console.log("[Meta Pixel] PageView tracked for:", pathname + (searchParams?.toString() ? `?${searchParams}` : ""));
      }
    }
  }, [pathname, searchParams, meta, debug]);
  return null;
}

export { MetaPixel };