1

I'm installing a FB event tracking pixel to load when a button is clicked on this page: https://www.naiik.com/booking/

I found this earlier post, but the event is not loading for me: Add FB pixel event code into button - Squarespace

I've specifically injected this code:

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

I injected it in the page specific header.

I'm using Facebook's Pixel Helper chrome extension and it keeps saying that this pixel has not loaded. All the while, the main FB pixel, which I installed previously, is working just fine.

Thank you!

Misha Blu Talavera
  • 11
  • 1

1 Answers1

0

There are 2 errors in your code.

1. Invalid setEventListener() method usage

When you call document.getElementsByClassName('class') the resulting value is a special HTMLCollection array of all elements with a given class that were found in the DOM. (Notice the plural spelling of the function name — elements.)

What to do next:
To achieve the desired result you can change your code to enumerate over the list of results returned by .getElementsByClassName; to do that, use a simple for loop on your result.

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

2. Incorrect selector for Squarespace button classes

If you will call the selector and inspect the resulting HTMLCollection array or directly inspect the buttons on the page you will see that button blocks that Squarespace uses have the class .sqs-block-button-element. It makes sense: after all these are Button Blocks you have placed in your page editor. The Form Block, on the other hand, does not register it's Submit button with that class (it's a .button.sqs-system-button.sqs-editable-button).

What to do next:
To achieve correct Facebook Pixel installation you need to register it on the meaningful marketing event emitters. Unfortunately, there is no one commonly used class for the majority of Squarespace buttons.

  1. You could keep it simple and just register the Form Block .button in your addEventListener code. This would have an unfortunate consequence of not catching clicks to other buttons.

  2. You also could target both the Button Block and Form Block Buttons, add them to a single Array object and then attach a listener to each one of them.

    But there is a better option.

  3. Use the necessity of targeting different types of buttons to indicate different Pixel properties.
    E.g. the Form Block button will generate a Form-specific Pixel event, Button block — Button-specific Pixel event:

Example:

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

Your new code:

<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>

You can refactor it as you wish and/or use the Squarespace-native YUI library to improve and stabilize the code.

Additional recommendations:

  1. Most likely the Pixel Extension error is due to your AdBlock extension. You must disable AdBlock on your domain and on your .squarespace.com internal subdomain to develop with Pixel and other marketing tools.
  2. If you initialize your pixel with advanced customer matching — the em variable in your Pixel init() call — you need to correctly pass the customer data. That's a very powerful marketing technique and you should research what's possible with Squarespace (not easy).
  3. Use fbq('track', 'PageView'); to track visitors coming to your lead-generating pages. Not every user clicks a button to call or submit a form, but every user that chooses to view a "Subscription" or "Contact" page is a prospective customer.
ermik
  • 408
  • 3
  • 17