如何在 Next.js react 应用程序上添加 Facebook Pixel？

IT技术 reactjs next.js facebook-pixel
2021-05-22 23:37:40

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

4个回答

没有愚蠢的问题。

您可以查看有关如何实现 fb 像素的 nextjs 示例。 Nextjs Facebook 像素

使用typescript和 NextJs 挂钩的解决方案

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

使用Next.js 版本 11 中发布的新脚本组件。将以下内容导入到您的_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". 我以前使用过这个，如果使用这种方法，脚本更有可能被 adblocker 阻止。

有一个名为 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

其它你可能感兴趣的问题
上一篇通过 USB 打印时 CR-10 随机断开与计算机的连接 下一篇Anycubic i3 Mega 无风扇