How to add facebook Pixel on Next.js react app?

Question

I know this may be a dumb question. How can I do to use facebook pixel on a next.js react app ?

score 46 · Answer 1 · edited May 27 '21 at 18:04

46

there are no dumb questions.

You can see nextjs example about how implements fb pixel. Nextjs Facebook Pixel

edited May 27 '21 at 18:04

Alan

9,167
4
52
70

answered Nov 27 '20 at 23:34

Nico

743
5
8

Thank you for your answer and the link :) – Carlos Henrique R. Pereira Jul 20 '23 at 19:49

Alan · Answer 2 · 2021-09-23T22:19:46.007

22

Solution with typescript and hook with NextJs

Install react-facebook-pixel yarn add react-facebook-pixel
In your file _app.tsx

// pages/_app.tsx

import { useEffect } from 'react'
import { useRouter } from 'next/router'

const App = ({ Component, pageProps }) => {
  const router = useRouter()

  useEffect(() => {
    import('react-facebook-pixel')
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init('XXXXXXXXXXXXXXXXXXXXX') // facebookPixelId
        ReactPixel.pageView()

        router.events.on('routeChangeComplete', () => {
          ReactPixel.pageView()
        })
      })
  }, [router.events])

  

  return <Component {...pageProps} />
}

export default App

Remark: it works with typescript or JavaScript

edited Sep 23 '21 at 22:19

answered May 27 '21 at 21:40

Alan

9,167
4
52
70

1

+1 - This worked for me. One thing to note is that even though this example and the react-facebook-library mentions Typescript, the same works with normal Javascript as well. – Zaheer Baloch Sep 23 '21 at 21:24
1

True. I will add a comment in my answer. – Alan Sep 23 '21 at 22:19
Might be trival, but good practive :) Remeber to run `router.events.off('routeChangeComplete', fn)` as the return statement in `useEffect` – Michael Falck Wedelgård Nov 15 '21 at 15:07
Do you know, are there some version compatibility issues? I don't see the pixel when I do view page source. No errors though.. – Anton Shestakov Nov 16 '21 at 21:39
P.S. Never mind, found out with the Facebook Pixel Helper extension that I had to turn the adblocker off. :) – Anton Shestakov Nov 16 '21 at 21:59

Jeremy Lynch · Answer 3 · 2021-11-10T22:22:51.307

Use the new Script component released in Next.js version 11. Import the below into your _app.js.

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import {pageview, FB_PIXEL_ID} from '../../lib/fpixel'
import Script from 'next/script'

const handleRouteChange = () => {
  pageview()
}

const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID

const pageview = () => {
  window.fbq('track', 'PageView')
}

const FacebookPixel = ({ children }) => {
  const router = useRouter()

  useEffect(() => {
    // the below will only fire on route changes (not initial load - that is handled in the script below)
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return (
    <Script id="facebook-pixel">
      {`
        !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', ${FB_PIXEL_ID});
        fbq('track', 'PageView');
      `}
    </Script>
  )
}

export default FacebookPixel

UPDATE

Do not use strategy="lazyOnload". I was previously using this and the script was more likely to be blocked by adblocker if using this method.

That is exactly what I need, thank you. – bFunc Sep 26 '21 at 22:58 — bFunc, Sep 26 '21 at 22:58

score 5 · Answer 4 · answered Feb 22 '21 at 08:49

There's a library for React called react-facebook-pixel. In order to make it work with NextJs, try this solution in your _app.jsx file:

function FacebookPixel() {
  React.useEffect(() => {
    import("react-facebook-pixel")
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init('pixel ID here');
        ReactPixel.pageView();

        Router.events.on("routeChangeComplete", () => {
          ReactPixel.pageView();
        });
      });
  });
  return null;
}


export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta charSet="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, viewport-fit=cover"
        />
      </Head>
      <FacebookPixel />
      //…
      <main className="routesContainer">
        <Component siteData={siteData} {...pageProps} />
      </main>
      //…
    </>
  );
}

or in case you're using Class components, insert this in you componentDidMount() inside the App class:

  componentDidMount() {

    import('react-facebook-pixel')
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init('Pixel ID Here');
        ReactPixel.pageView();

        Router.events.on('routeChangeComplete', () => {
          ReactPixel.pageView();
        });
      });
  }

font: https://github.com/zsajjad/react-facebook-pixel/issues/53

score 5 · Answer 5 · answered Jul 06 '21 at 22:12

Simple and easy:

Put the below code inside _app.js:

useEffect(async () => {
        const { default: ReactPixel } = await import('react-facebook-pixel');
        ReactPixel.init(FB_PIXEL, null, {
            autoConfig: true,
            debug: true,
          });
        ReactPixel.pageView();
        ReactPixel.track("ViewContent")
    });

How to add facebook Pixel on Next.js react app?

5 Answers5

UPDATE

Linked