How to Add Meta Pixel to a Next.js 13 App (App Directory)
Meta Pixel (formerly Facebook Pixel) lets you track events like page views, button clicks, and purchases ā crucial for running ads and remarketing on Facebook/Instagram.
Steps to Integrate Meta Pixel:
1. Get Your Pixel ID
Head to Meta Business Manager ā Events Manager ā Pixels ā Copy your Pixel ID.
2. Create a Component
In your Next.js 13 project, create this component inside components/common/PixelTracker.tsx:
// components/common/PixelTracker.tsx
'use client';
import Script from 'next/script';
const PixelTracker = () => {
return (
<>
{/* Meta Pixel Script */}
<Script
id="meta-pixel"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
`,
}}
/>
{/* Fallback for no JS */}
<noscript>
<img
height="1"
width="1"
style={{ display: 'none' }}
src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"
alt=""
/>
</noscript>
</>
);
};
export default PixelTracker;
3. Use It in Your Layout
Edit your global layout file app/layout.tsx and add the component:
// app/layout.tsx
import './globals.css'
import { ReactNode } from 'react'
import PixelTracker from '@/components/common/PixelTracker'
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<PixelTracker />
{children}
</body>
</html>
);
}
ā Done!
Meta Pixel will now fire PageView events across your entire Next.js app using the App Directory.
Last updated: April 19, 2025
