修复 React-facebook-pixel答案

【问题标题】：Fix React-facebook-pixel修复 React-facebook-pixel
【发布时间】：2022-03-28 02:39:02
【问题描述】：

我对 Facebook 像素包有点问题。我只需要它来查看页面。我查阅了官方文档here，似乎很容易使用。但是，它仍然不起作用。我写了以下代码：

import ReactPixel from 'react-facebook-pixel'

const advancedMatching = { em: 'some@email.com' }
const options = {
  autoConfig: true,
  debug: false,
}

function MyPage(){
  // other delarations
    useEffect(() => {
      ReactPixel.init('123456', advancedMatching, options)
      if (hasMarketingPreference) {
        console.log("I've just viewed the page!")
        ReactPixel.pageView()
      } else {
        ReactPixel.revokeConsent()
      }
    }, [])

  return (<>{/*the page code*/}</>)
}

看起来它到达了console.log() 语句，但它仍然不起作用。我做错什么了吗？非常感谢！

【问题讨论】：

不起作用 - 您是否在控制台中收到脚本错误，或者只是看不到跟踪的请求，或者其他什么？对于初学者，我会尝试将debug 更改为true，看看这是否告诉您任何信息，或者删除高级匹配的电子邮件地址（您使用的是真实地址，还是只是您从示例中复制并粘贴的地址？）如果您在ReactPixel.pageView() 之后添加一个console.log，是否也可以达到？
如果我更改为true debug 它告诉我[react-facebook-pixel] called fbq('track', 'PageView');。是的，它在ReactPixel.PageView() 之后到达控制台日志
听起来脚本认为它正在工作。如果您查看浏览器的网络选项卡，您会看到 PageView 跟踪请求吗？是否有成功错误代码，响应正文中的内容（如果有）看起来是成功还是失败？
网络选项卡中没有任何内容。它应该调用api还是什么？但我在控制台中有一个错误：GET https://connect.facebook.net/en_US/fbevents.js net::ERR_BLOCKED_BY_CLIENT 也许 facebook 像素是错误的？顺便说一句，电子邮件是假的，我不需要它
From this question 我猜 ERR_BLOCKED_BY_CLIENT 要么是 CORS 类型的错误（但我希望 Facebook 能够正确设置），要么是广告屏蔽插件或反垃圾邮件插件你的防病毒软件。您可以在没有任何广告拦截插件的另一台 PC 或其他浏览器中尝试此操作吗？

标签： javascript node.js reactjs facebook-pixel

【解决方案1】：

为我工作！！！

如果广告拦截器处于活动状态，我们会在 chrome 上收到错误 ERR_BLOCKED_BY_CLIENT。只需禁用广告拦截器即可。

【讨论】：