Add Facebook Pixel in NextJS Website (just 2 steps)

Rana Ahammed — Tue, 08 Jul 2025 18:43:57 +0000

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.

If you like to watch tutorial more than bloig then this full video for you.

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 dynamic from 'next/dynamic';
const FacebookPixel = dynamic(import('../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.

For Deep Learning, Do This!

Rana Ahammed — Thu, 23 Jan 2025 05:15:13 +0000

If you learn new thing today in your day job, before going to bed write what you learned.

Write this topic in a way so that non technical or 5 years children can understand very easily. Avoid technical jargon.

It will sharpen your learning, help you in the long run.

Don't think my writing skill is not good, my grammatical is not well.

People doesn't care these.

People care you know this topic or not.