Recently I had to add facebook pixel to production nextjs website.
Before you begin
you need facebook pixel ID
When you will have that ID then start the step 1
Step 1: Create a component named FacebookPixel.tsx
but if you use javascript you need to create FacebookPixel.jsx.
Then paste the following code
'use client';
import Image from 'next/image';
import Script from 'next/script';
const PixelTracker = () => {
return (
<>
{/* Meta Pixel Script */}
<Script
strategy="afterInteractive"
id="facebook-pixel"
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', process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID);
fbq('track', 'PageView');
`
}}
/>
<noscript>
<Image
alt="facebook-pixel"
height={1}
width={1}
style={{ display: 'none' }}
src={`https://www.facebook.com/tr?id=${process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID}&ev=PageView&noscript=1`}
/>
</noscript>
</>
);
};
export default PixelTracker;
Then Add the NEXT_PUBLIC_FACEBOOK_PIXEL_ID
and value in .env file
Step 2: Use the PixelTracker Component in layout.tsx file
import './globals.css';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import FacebookPixel from '@/components/FacebookPixel';
export default function RootLayout({
children
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning className={nunito.className}>
<body className="antialiased dark:bg-slate-900">
<FacebookPixel />
<main className="flex-auto min-w-0 flex flex-col md:px-0">
<Header />
<div className="min-h-screen">{children}</div>
<Footer />
</main>
</body>
</html>
);
}
That’s it.
Facebook pixel integration is completed. It will track all the url of this website.
If you have any query feel free to ask me on my Linkedin profile.
SOCIAL SHARE CARD GENERATOR