Enable Facebook Pixel Advanced Mapping with CartFlows

cartflows_facebook_advanced_mapping.html

<!-- replace FACEBOOK_PIXEL_ID with your Facebook Pixel's ID -->
<!-- place this script in the "Custom Script" section of your CartFlows step -->
<!-- this will send user checkout informations to Facebook when one of the following buttons are clicked: the next tab button (bottom of first step) or the second tab button (at the top of the two columns checkout) -->
<!-- let's make this bread!! -->
<script>
  
// this function will execute the given method when jQuery becomes available
function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() {
            defer(method)
        }, 50);
    }
}

defer(function() {
    var checkExist = setInterval(function() {
        console.log('checking if amount exists')
        // this checks if the form is visible
        var amount = $('#billing_postcode')
        if (amount.length) {
            var sendMapping = function() {
                console.log('paiemnt cliqué')
                fbq('init', 'FACEBOOK_PIXEL_ID', {
                    em: $('#billing_email')[0].value, // Values will be hashed
                    fn: $('#billing_first_name')[0].value, // automatically by the pixel
                    ln: $('#billing_last_name')[0].value, // using SHA-256
                    ph: $('#billing_phone')[0].value, // phone
                    ct: $('#billing_city')[0].value, // city
                    zp: $('#billing_postcode')[0].value // code postal
                });
                
                // here, I put AddPaymentInfo but you can select any event you want, such as PageView, AddToCart, InitiateCheckout...
                fbq('track', 'AddPaymentInfo')
            }
            
            // once visible, the sendMapping function will be assigned to the following
            // two buttons. You can easily modify targeted classes.
            $('.step-two').click(sendMapping)
            $('.wcf-next-button').click(sendMapping)
        }
        clearInterval(checkExist);
    }, 250); // check every 250ms
})
</script>