如何在Next.js React应用程序中添加Facebook像素？

Question

如何在Next.js React应用程序中添加Facebook像素？

reactjsnext.jsfacebook-pixel

26

我知道这可能是一个愚蠢的问题。如何在next.js react应用程序中使用Facebook像素？

- Henimbola Tsihala Andrianatoan

5个回答

22

使用TypeScript和NextJs的Hook解决方案

安装react-facebook-pixel：yarn add react-facebook-pixel
在你的文件_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

注意：它可以与TypeScript或JavaScript一起使用。

- Alan

1

+1 - 这对我有用。需要注意的一点是，即使这个例子和react-facebook-library提到了Typescript，同样适用于普通的Javascript。 - Zaheer Baloch

1

返回翻译后的文本：True。我会在我的答案中添加注释。 - Alan

可能有点琐碎，但是很好的练习 :) 记得在 useEffect 中将 router.events.off('routeChangeComplete', fn) 作为返回语句来运行。 - Michael Falck Wedelgård

你知道吗，有一些版本兼容性问题吗？当我查看页面源代码时，我看不到像素。虽然没有错误。 - Anton Shestakov

没事了，我用Facebook像素助手扩展程序发现我需要关闭广告拦截器。 :) - Anton Shestakov

13

使用在 Next.js 11 版本中发布的新的 Script 组件。将以下内容导入到您的 _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

更新

请勿使用 strategy="lazyOnload"。如果使用此方法，脚本更容易被广告拦截器阻止。

- Jeremy Lynch

1

那正是我所需要的，谢谢。 - bFunc

5

简单易懂：

将以下代码放入_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")
    });

- guneetgstar

5

有一个React库叫做react-facebook-pixel。为了使其在NextJs中正常工作，请在您的_app.jsx文件中尝试以下解决方案：

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>
      //…
    </>
  );
}

如果你正在使用Class组件，将以下代码插入到App类的componentDidMount()方法中：

  componentDidMount() {

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

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

字体：https://github.com/zsajjad/react-facebook-pixel/issues/53

- Frederiko Cesar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nico · Accepted Answer

没有愚蠢的问题。

你可以看一下Next.js实现Facebook像素的示例。 Next.js Facebook Pixel