Meta pixel setup - v0 by Vercel

I can help you implement Meta Pixel in your Next.js application. Here's how to set it up:

How to use this code:

Replace "XXXXXXXXXX" in the layout.tsx file with your actual Meta Pixel ID from Facebook.
The MetaPixel component automatically tracks page views as users navigate through your site.
To track custom events (like purchases, sign-ups, etc.), you can use the EventTracker component:

import EventTracker from "@/app/components/event-tracker";

export default function CheckoutPage() {
  return (
    <div>
      <h1>Thank you for your purchase!</h1>
      <EventTracker 
        event={{
          eventName: "Purchase",
          eventParams: {
            value: 99.99,
            currency: "USD",
            content_ids: ["product-123"],
          }
        }} 
      />
    </div>
  );
}

This implementation uses Next.js App Router with the Script component for optimal loading and execution of the Meta Pixel code.

I can help you implement Meta Pixel in your Next.js application. Here's how to set it up:

How to use this code:

Replace "XXXXXXXXXX" in the layout.tsx file with your actual Meta Pixel ID from Facebook.
The MetaPixel component automatically tracks page views as users navigate through your site.
To track custom events (like purchases, sign-ups, etc.), you can use the EventTracker component:

import EventTracker from "@/app/components/event-tracker";

export default function CheckoutPage() {
  return (
    <div>
      <h1>Thank you for your purchase!</h1>
      <EventTracker 
        event={{
          eventName: "Purchase",
          eventParams: {
            value: 99.99,
            currency: "USD",
            content_ids: ["product-123"],
          }
        }} 
      />
    </div>
  );
}

This implementation uses Next.js App Router with the Script component for optimal loading and execution of the Meta Pixel code.