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 ?

Answer 1

there are no dumb questions.

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

Answer 2

Solution with typescript and hook with NextJs

1. Install react-facebook-pixel yarn add react-facebook-pixel
2. 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