如何在 Next.js React 应用程序上添加 facebook Pixel？

问题描述 投票：0回答：7

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

reactjs next.js facebook-pixel
7个回答
50
投票

没有愚蠢的问题。

您可以查看 nextjs 示例了解如何实现 fb 像素。 Nextjs Facebook Pixel

24
投票

使用打字稿和 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

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"
。我之前用过这个，如果使用这个方法，脚本更有可能被adblocker阻止。

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

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")
    });
2
投票

对于 Next Js 应用程序路由器：

路径： src/app/layout.jsx

  export default function RootLayout({ children }) {
      return (
        <html lang='en' suppressHydrationWarning>
          <Script id='fb-pixel' strategy='afterInteractive'>
            {`
              !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.FACEBOOK_PIXEL_ID}');
              fbq('track', 'PageView');
            `}
          </Script>
    
          <body className={openSans.className}>
            <noscript>
              <img
                height='1'
                width='1'
                style='display:none'
                alt={'facebook pixel no script image'}
                src='https://www.facebook.com/tr?id=1002246091049642&ev=PageView&noscript=1'
              />
            </noscript>
          </body>
        </html>
      )

}
0
投票

我使用 

dynamic
和 SSR false 来导出客户端组件，以便您可以像往常一样将它与 
react-facebook-pixel
一起使用。

nextjs中使用的

MetaPixelLazy.tsx

import dynamic from 'next/dynamic'

export const MetaPixel = dynamic(() => import('./MetaPixel'), {
  ssr: false,
})

正在导入 

MetaPixel.tsx

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import ReactPixel from 'react-facebook-pixel'

interface MetaPixelProps {
  pixelId: string
}

// this can't be instatiated in the server
export default function MetaPixelClient(p: MetaPixelProps) {
  const { events } = useRouter()
  useEffect(() => {
    const checkPage = () => ReactPixel.pageView()
    ReactPixel.init(p.pixelId)
    checkPage()

    events.on('routeChangeComplete', checkPage)
    return () => {
      events.off('routeChangeComplete', checkPage)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return null
}

然后我在 

_app.tsx
中实例化它，它不会破坏。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.