Question

我正在将像素脚本注入<Head />中，并尝试在联系表单的fbq("track")处理程序中使用onSubmit函数。处理程序的精简版：

const handleSubmit = async e => {
  e.preventDefault();
  try {
    // send form data to server, if successful, proceed...
    window.fbq("track", "Contact");
  } catch (error) {
    // handle error
  }
};

在开发过程中，一切都按预期进行：Facebook Pixel Helper显示“联系”事件已成功跟踪。

但是，在生产中，该事件不会被跟踪。 Pixel Helper注册了“自动检测到的按钮单击”，但是没有跟踪明确的“联系”事件。 编辑：我的问题的标题可能有点用词不当，因为fbq("track", "PageView")中的<Head />调用正常工作。

没有错误，似乎根本就没有触发。

任何关于我做错事情的想法都将受到赞赏??

Answer 1

已解决。

也许此问题需要更多的代码上下文。我仍然不完全知道为什么为什么可以解决此问题，但是如果将来有人偶然发现此问题，这就是为我做的事情...

其他上下文中，表单数据通过input[type=text], select { border: 0; outline: none; font-family: 'Roboto', serif; font-size: 14px; } .wrap { width: 50%; border: 1px black solid; border-radius: 15px; padding: 10px; display: flex; align-items: center; justify-content: center; flex-flow: row; margin-left: auto; margin-right: auto; } p { font-family: 'Roboto', serif; font-size: 14px; }发布到服务器，并且<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet"> <div class="wrap"> <p>paypal.me/<input type="text" name="username" id="username" autofocus></p> </div>链接到fetch()回调中，如下所示：

window.fbq("track")

解决方案只是将.then()从回调中移出：

const handleSubmit = async e => {
    e.preventDefault();
    try {
      await fetch("/contact", {options})
        .then(res => res.json())
        .then(json => {
          if (json.success) {
            // handle success
            window.fbq("track", "Contact");
          } 
        });
    } catch (error) {
      // handle error
    }
  };

Facebook Pixel fbq（'track'）无法在生产环境中运行

1 个答案: