NextJS 中的 Facebook Pixel：类型错误：window.fbq 不是函数

Question

尝试在我的 NextJS 应用程序路由器项目中使用 facebook Pixel 来跟踪客户端事件。

几乎遵循 NextJS Pixel 存储库中的所有步骤： https://github.com/vercel/next.js/tree/canary/examples/with-facebook-pixel/app

我的

pixel.js

文件夹中有一个

public/scripts

脚本。 我的

FacebookPixel

中有

layout.tsx

组件 我的库中有

fpixel.js

文件

但是，当我尝试使用像素记录任何事件时，我收到错误。 用途：

import * as fbq from "../../../library/third-party/fpixel"
// ...
      fbq.event("Purchase", { currency: "GBP", value: 1 });

浏览器中的错误是：

TypeError: window.fbq is not a function

指向

fpixel.js

文件，可以方便地导出

event

供我们轻松使用。

为什么我会收到此错误？请帮忙

Answer 1

事实证明，在撰写本文时，Facebook Pixel 组件中 github 上的 Next/FB-pixel 示例显示了以下内容：

<Script

    id="fb-pixel"
    src="/scripts/pixel.js"
    strategy="afterInteractive"
    ...

这导致了包含像素逻辑（并且相互依赖）的组件之后的像素加载问题。 因此将策略切换为 beforeInactive 固定（以更快地加载像素）。

供参考： https://nextjs.org/docs/app/api-reference/components/script#optional-props