javascript - Facebook 事件跟踪 Squarespace 上的按钮点击

Question

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

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

我专门注入(inject)了这段代码:

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

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

我正在使用 Facebook 的 Pixel Helper chrome 扩展程序，但它一直显示该像素尚未加载。一直以来，我之前安装的主 FB Pixel 都工作得很好。

谢谢!

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 使用的按钮 block 具有类 .sqs-block-按钮元素。这是有道理的:毕竟这些都是您放置在页面编辑器中的按钮 block 。另一方面，表单 block 不会向该类注册其提交按钮(它是一个 .button.sqs-system-button.sqs-editable -按钮)。

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

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

2. 您还可以同时定位按钮 block 和表单 block 按钮，将它们添加到单个数组对象，然后为每个对象附加一个监听器。

   但是还有更好的选择。

3. 利用定位不同类型按钮的必要性来指示不同的像素属性。
   例如。表单 block 按钮将生成表单特定的像素事件，按钮 block - 按钮特定的像素事件:

示例:

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