点击方形空间按钮的Facebook事件跟踪

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中找到的给定类的所有元素。 （注意函数名称的复数拼写 - 元素 s 。）

下一步做什么：
要获得所需的结果，您可以更改代码以枚举.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。这是有道理的：在所有这些按钮块之后，您已经放置在页面编辑器中。另一方面，表单块不会在该类中注册提交按钮（它是.button.sqs-system-button.sqs-editable-button）。< / p>

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

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

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

   但还有更好的选择。

3. 使用必要定位不同类型按钮来指示不同的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-native YUI库来改进和稳定代码。

其他建议：

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