How to set up Meta CAPI in Next.js without GTM

GTM was built for marketers injecting scripts without engineering. In App Router, it fights the component model, loads extra JavaScript, and creates a debugging black box.

Server-Side GTM adds containers and variable mapping disconnected from your TypeScript types.

Add the SDK, wrap your layout with the provider, and configure Meta pixel ID and access token in the TrackStack dashboard — not in client env vars for secrets.

Follow quickstart for keys, domain allowlist, and first test event.

import { TrackStackProvider, TrackStackPageview } from "@trackstack/sdk";
import { trackstack } from "@/lib/trackstack";

export default function RootLayout({ children }) {
  return (
    <TrackStackProvider instance={trackstack}>
      <TrackStackPageview />
      {children}
    </TrackStackProvider>
  );
}

Call capture() with canonical event names. The edge maps SignUp to Meta CompleteRegistration and Purchase to Purchase, hashing email automatically.

Always include eventId if you also run the Meta pixel.

trackstack.capture("SignUp", {
  email: user.email,
  eventId: `signup_${user.id}`,
});

trackstack.capture("Purchase", {
  email: session.customer_email,
  value: session.amount_total / 100,
  currency: session.currency,
  transactionId: session.id,
  eventId: `purchase_${session.id}`,
});

Open Logs after your first test event. Confirm HTTP 200 from Meta and inspect Event Match Quality indicators.

GTM sends events into a void. An SDK with logs tells you within seconds whether Meta accepted the conversion.

For purchases confirmed server-side, fire Purchase from the Stripe webhook handler with the same eventId you used client-side when possible. See examples for webhook patterns.