Q: How to fix Facebook Add to Cart Pixel Firing Issue? I am working for one of my client , which needs to track users who add items to cart , and didnt buy it ..
The Site uses BigCommerce , So the Add to Cart is performed Dynamically on Page without moving to next page .
Here is code for AddtoCart


<div class="form-action">
  <input id="form-action-addToCart" data-wait-message="Adding to cart…" class="button button--primary" type="submit" value="Add to Cart">
</div>


And for facebook pixel :


 

<!-- Add Pixel Events to the button's click handler -->

<script type="text/javascript">
      $('#form-action-addToCart').click(function() {
        fbq('track', 'AddToCart', {
          content_name: 'Really Fast Running Shoes', 
          content_category: 'Apparel & Accessories > Shoes',
          content_ids: ['1234'],
          content_type: 'product',
          value: 4.99,
          currency: 'USD' 
        });  
      });
</script>


Also , tried Using $('input#form-action-addToCart') , but pixel didnt get fired .. I am using Facebook Official Pixel Chrome Extension ...


A: Ok , after some research , Finally got it working .. !
What we are doing here, is triggering the pixel on button or element click, rather than page load, which we do usually. As not all websites, might have separte page for every action, and some actions might be there in that page itself, like Add to Cart, Delete and more. So, we need to perform action on and trigger pixel.


<script type="text/javascript">
$("#form-action-addToCart" ).click(function() {
-- Your Pixel Code Here --
};
</script>


Replace #form-action-addToCart with id of the element, for which you want the the pixel to be triggered.
