javascript - 将 Facebook Pixel 事件添加到 Squarespace 按钮点击

Question

我正在尝试将 Facebook 像素事件——“ViewContent”——添加到我的 Squarespace 网站。我有一个带有一个按钮的页面，我想在单击按钮时触发事件。 感觉它应该很简单，但我在当前设置的 Facebook Pixel Helper 中一直遇到错误。

我引用了这篇文章:Add FB pixel event code into button - Squarespace

按照答案中的建议，我在此页面的标题中使用了每页代码注入(inject):https://www.wearpapercrane.com/survey

这是我的——

    <script>
    (function() {
        var btns = document.getElementsByClassName("sqs-block-button-element");
        var i, I;

        for (i=0, I=btns.length; i<I; i++) {
            btns[i].addEventListener("click", function() {
                fbq("track", "ViewContent");
            });
        }
    })();
</script>

但这是我在使用 Facebook Pixel Helper 进行验证时在另一端得到的结果 --

(这是在点击之后，顺便说一下......按钮在单独的选项卡中打开链接，所以这是在点击后返回页面并查看 Pixel Helper)。

是不是我遗漏了什么导致了这个错误？

我已经安装了 Pixel，并且我有一个“引导”事件在另一个页面上正常工作(使用 Squarespace 的表单嵌入功能)，所以我很确定这是这个特定代码注入(inject)的问题。

会喜欢任何和所有建议。谢谢!!

Answer 1

事件没有触发，因为你引用的答案(我写的)没有考虑到这样一个事实，即当通过 header 注入(inject)(站点级或页面级)注入(inject)代码时，必须等待 DOM在将事件附加到元素之前加载。

您引用的答案已更新，特别是以下部分:

<script>
    window.Squarespace.onInitialize(Y, function() {
        var btns = document.getElementsByClassName("sqs-block-button-element");
        var i;
        for (i=btns.length-1; i>=0; i--) {
            btns[i].addEventListener("click", function() {
                fbq("track", "AddToCart");
            });
        }
    });
</script>