Add Facebook Pixel in NextJS Website (just 2 steps)

#react #nextjs #facebookpixel

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.