NextJS App Router中使用Facebook Pixel报错：TypeError: window.fbq is not a function

可能的原因 #

1. 事件调用时机早于Pixel脚本初始化
   事件调用代码可能在Facebook Pixel核心脚本加载完成前就执行了，此时window.fbq还未被定义为函数。这种情况常见于在组件初始化阶段直接调用fbq.event，或者在服务器组件中尝试调用客户端API。

2. fpixel.js封装逻辑存在问题
   如果你的fpixel.js没有对window.fbq做存在性检查，或者调用方式不符合Facebook Pixel规范，就会触发该错误。比如直接调用window.fbq()而不是按window.fbq('track', eventName, data)的格式调用，或者未判断window对象是否存在。

3. FacebookPixel组件加载逻辑错误

   • 若FacebookPixel组件未标记为客户端组件（缺少'use client'指令），在服务器组件环境中无法初始化window.fbq。
   • 组件内的脚本加载逻辑有问题，比如未正确触发Pixel初始化，或者脚本加载失败。

解决办法 #

1. 确保事件在客户端环境且脚本加载完成后执行 #

调用fbq.event的组件必须添加'use client'指令，明确为客户端组件，并在useEffect中延迟调用以确保脚本加载完成：

'use client';
import * as fbq from "../../../library/third-party/fpixel";
import { useEffect } from 'react';

export default function CheckoutPage() {
  useEffect(() => {
    fbq.event("Purchase", { currency: "GBP", value: 1 });
  }, []);

  return <div>Checkout Complete</div>;
}

2. 修正fpixel.js的封装逻辑 #

确保你的fpixel.js包含window对象检查和正确的fbq调用格式：

// library/third-party/fpixel.js
export function event(eventName, eventData) {
  if (typeof window !== 'undefined' && window.fbq) {
    window.fbq('track', eventName, eventData);
  }
}

export function init(pixelId) {
  if (typeof window !== 'undefined' && !window.fbq) {
    window.fbq = function() {
      window.fbq.callMethod 
        ? window.fbq.callMethod.apply(window.fbq, arguments) 
        : window.fbq.queue.push(arguments);
    };
    window._fbq = window._fbq || [];
    window.fbq.push = window.fbq;
    window.fbq.loaded = true;
    window.fbq.version = '2.0';
    window.fbq.queue = [];

    const script = document.createElement('script');
    script.async = true;
    script.src = `https://connect.facebook.net/en_US/fbevents.js`;
    document.body.appendChild(script);

    window.fbq('init', pixelId);
  }
}

3. 验证FacebookPixel组件的正确性 #

确保FacebookPixel是客户端组件且正确初始化：

'use client';
import { init } from '../library/third-party/fpixel';

export default function FacebookPixel() {
  const PIXEL_ID = 'YOUR_FACEBOOK_PIXEL_ID';

  init(PIXEL_ID);

  return (
    <noscript>
      <img
        height="1"
        width="1"
        style={{ display: 'none' }}
        src={`https://www.facebook.com/tr?id=${PIXEL_ID}&ev=PageView&noscript=1`}
      />
    </noscript>
  );
}

若根layout.tsx是服务器组件，直接引入该组件即可，Next.js会自动处理客户端组件的嵌入。

额外注意事项 #

• 禁止在服务器组件中直接调用fbq.event，服务器环境不存在window对象。
• 若你在public/scripts中放置了pixel.js，确认其内容与动态加载的脚本无冲突，建议优先使用官方示例的动态加载方式，避免重复加载。

内容的提问来源于stack exchange，提问作者p--h