Facebook 事件跟踪按钮单击 squarespace

Question

我正在安装一个 FB 事件跟踪像素，以便在单击此页面上的按钮时加载：https://www.naiik.com/booking/

我发现了这个较早的帖子，但没有为我加载该事件：Add FB pixel event code into button - Squarespace

我专门注入了这段代码：

<script>
    (function() {
        var btns = document.getElementsByClassName("sqs-block-button-element");
            btns.addEventListener("click", function() {
                fbq("track", "Lead");
            });
    })();
</script>

我将它注入到页面特定的标题中。

我正在使用 Facebook 的 Pixel Helper chrome 扩展程序，它一直说这个像素没有加载。一直以来，我之前安装的主 FB 像素都运行良好。

谢谢！

Answer 1

您的代码中有 2 个错误。

1。无效的setEventListener() 方法使用

当您调用 document.getElementsByClassName('class') 时，结果值是一个特殊的 HTMLCollection 数组，其中包含在 DOM 中找到的具有给定类的所有元素。 （注意函数名的复数拼写——elements。）

下一步做什么：
要获得所需的结果，您可以更改代码以枚举.getElementsByClassName 返回的结果列表；为此，请对结果使用简单的 for 循环。

for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
        fbq("track", "Lead");
    });
}

2。 Squarespace 按钮类的选择器不正确

如果您将调用选择器并检查生成的 HTMLCollection 数组或直接检查页面上的按钮，您将看到 Squarespace 使用的按钮块具有类 .sqs-block-button-element。这是有道理的：毕竟这些都是您放置在页面编辑器中的按钮块。另一方面，Form Block 不会向该类注册它的 Submit 按钮（它是 .button.sqs-system-button.sqs-editable-button）。

下一步做什么：
要实现正确的 Facebook Pixel 安装，您需要在有意义的营销事件发射器上注册它。不幸的是，大多数 Squarespace 按钮都没有一个常用的类。

1. 您可以保持简单，只需在您的addEventListener 代码中注册表单块.button。这将导致无法捕获对其他按钮的点击的不幸后果。

2. 您还可以同时定位按钮块和表单块按钮，将它们添加到单个 Array 对象，然后将侦听器附加到每个对象。

   但还有更好的选择。

3. 使用定位不同类型按钮的必要性指示不同的像素属性。
   例如。 Form Block 按钮会生成一个 Form-specific Pixel 事件，Button block — Button-specific Pixel 事件：

例子：

var blockBtns = document.getElementsByClassName("sqs-block-button-element");
var formBtns = document.getElementsByClassName("button");

---

您的新代码：

<script>
(function() {
    var blockBtns = document.getElementsByClassName("sqs-block-button-element");
    var formBtns = document.getElementsByClassName("button");
    for (var i = 0; i < blockBtns.length; i++) blockBtns[i].addEventListener("click", function() {
        fbq("track", "Lead", {
            eventSource: "Button Block"
        });
    });
    for (var i = 0; i < formBtns.length; i++) formBtns[i].addEventListener("click", function() {
        fbq("track", "Lead", {
            eventSource: "Form Block"
        });
    });
})();
</script>

您可以根据需要对其进行重构和/或使用 Squarespace 原生 YUI 库来改进和稳定代码。

其他建议：

1. 像素扩展错误很可能是由您的 AdBlock 扩展引起的。 您必须在您的域和 .squarespace.com 内部子域上禁用 AdBlock，才能使用 Pixel 和其他营销工具进行开发。
2. 如果您 initialize your pixel with advanced customer matching — Pixel init() 调用中的 em 变量 — 您需要正确传递客户数据。这是一种非常强大的营销技术，您应该研究 Squarespace 的可能性（不容易）。
3. 使用fbq('track', 'PageView'); 跟踪访问您的潜在客户生成页面的访问者。并非每个用户都点击按钮来调用或提交表单，但每个选择查看“订阅”或“联系”页面的用户都是潜在客户。