如何在Next.js项目中配置Facebook/Meta Pixel并加载至head？

你遇到的核心问题是：在_app组件中直接使用Script组件会将Facebook Pixel加载到body标签，而你需要它加载到head标签内。以下是可行的解决方法：

方法一：在 Pages Router 中用 next/head 包裹 Script 组件 #

如果你的项目使用的是 Next.js Pages Router（pages目录结构），只需将Script组件放在next/head组件内部，就能将脚本注入到head标签中：

import Head from 'next/head';
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <Script
          id="fb-pixel"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              !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', '你的Facebook Pixel ID');
            `,
          }}
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

方法二：在 App Router 中直接插入到 head 标签 #

如果是 Next.js 13+ 的 App Router（app目录结构），可以在根layout.js的head标签中直接放置Script组件：

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <head>
        <Script
          id="fb-pixel"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              !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', '你的Facebook Pixel ID');
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

也可以通过metadata统一管理脚本（更符合App Router的规范）：

export const metadata = {
  scripts: [
    {
      id: 'fb-pixel',
      strategy: 'afterInteractive',
      dangerouslySetInnerHTML: `
        !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', '你的Facebook Pixel ID');
      `,
    },
  ],
};

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

关键注意事项 #

• 务必将代码中的'你的Facebook Pixel ID'替换为你实际的Pixel ID，不要保留占位符ID FACEBOOK。
• 若需要脚本在页面初始化前加载，可将strategy改为"beforeInteractive"，适合对加载时机要求较高的追踪脚本。
• 检查你的SEO组件，避免重复加载Facebook Pixel脚本。
• 验证是否加载成功：打开浏览器开发者工具，查看head标签内是否存在该脚本，或在控制台输入fbq，若返回函数则说明加载正常。

内容的提问来源于stack exchange，提问作者EFFM