Facebook Pixel addToCart Ajax

Question

I implement the facebook pixel code on my magento store in the head section. I use this code snippet from github: https://gist.github.com/rafaelstz/4dcaecae4318eb552b48

This snippet not works with my "add to cart" because I use Ajax. How I can trigger "fbq('track', 'AddToCart');" with ajax requests?

Answer 1

there is probably a js function that you call when adding a product to the cart.
You can add at the end of that function: fbq('track', 'AddToCart');

Answer 2

Integration through Google Tag Manager:

I stumbled upon a similar problem when trying to implement AddToCart event on an AJAX request on product page as well as catalog pages utilizing product quickview. In result, I used this approach which fires event correctly.

Tag: Custom HTML

if(jQuery('.catalog-product-view')) {
    jQuery('button.btn-cart').click(function() {
         if(jQuery(this).hasClass('validation-passed')) {
            fbq('track', 'AddToCart');
         }
    });
}  

Trigger: Pageview (All pages)

The "add to cart" is usually on product page so catalog-product-view will be present, but Magento performs its own validation and appends the class validation-passed class if everything went well before sending AJAX request. Checking for that class confirms validity of the form when "Add To Cart" button is clicked.

This approach was used to prevent modifying code. This might not work if you need to pass additional product information to the pixel.