Add FB pixel event code into button into Squarespace

Question

trying to get FB event code to fire on a button click (Download button on this page: https://frequencydigital.com/guide-download/).

I saw this earlier post, however the code suggested by Brandon is not working for me: Add FB pixel event code into button - Squarespace

Per Facebook, they provide this code to use, however not working either:

<!-- The below method uses jQuery, but that is not required -->
<button id="addToCartButton">Add To Cart</button>
<!-- Add event to the button's click handler -->
<script type="text/javascript">
$( '#addToCartButton' ).click(function() {
fbq('track', 'AddToCart', {
content_ids: ['1234'],
content_type: 'product',value: 2.99,currency: 'USD'
});
});
</script>

When I view source for the page I'm trying to update, the button code is:

<div class="form-button-wrapper form-button-wrapper--align-center">
    <input class="button sqs-system-button sqs-editable-button" 
type="submit" value="Download"/>
  </div>

Not sure what I'm doing wrong here.

score 0 · Answer 1 · answered Jul 06 '17 at 17:57

The code from the answer to which you linked needs to be modified slightly for your case, where a form submit button is used rather than a button block.

<script>
    (function() {
        var btns = document.querySelectorAll('form input[type="submit"]');
        var i, I;

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

This code is written so that it will work even if multiple such forms are used on a single page. If you were sure to only have one such form/button, it could be simplified a bit.

Note that all of the suggestions and considerations from the previous answer still apply. In addition, you may choose a different code other than "lead".

Add FB pixel event code into button into Squarespace

1 Answers1