Add Facebook Pixel in NextJS Website (just 2 steps)

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 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.

Rana Ahammed

Who I am