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.