CartFlows automatic Mautic contact information population - can be used to send abandonment carts(not RGPD compliant !)

cartflows_mautic_contact_tracking.html

<!-- NOTE: concerning phone number validation; replace FR with your targeted country code -->

<!-- libphonenumber-mex: validation du numéro de téléphone -->
<script src="https://unpkg.com/libphonenumber-js@1.7.44/bundle/libphonenumber-max.js"></script>

<!-- choppage des informations du visiteur -->
<script>
function deferMauticJQuery(method) {
    if (Boolean(window.jQuery) && Boolean(window.MauticJS)) {
        method();
    } else {
        setTimeout(function() {
            deferMauticJQuery(method)
        }, 50);
    }
}

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

// sendFormData envoie le formulaire à Mautic
var sendFormData = function() {
    var form_name = 'formulairedabandon'

    console.log('mise à jour des informations du visiteur mautic')

    var em = $('#billing_email').val()
    var fn = $('#billing_first_name').val()
    var ln = $('#billing_last_name').val()
    var ph = $('#billing_phone').val()
    var ct = $('#billing_city').val()
    var zp = $('#billing_postcode').val()
    var ad1 = $('#billing_address_1').val()
    var ad2 = $('#billing_address_2').val()
    var country = $('#billing_country').val()
    
    var trackingData = {}

    if (validateEmail(em)) {
        trackingData['email'] = em;
    }
    
    try {
        var parsed_ph = libphonenumber.parsePhoneNumber(ph, 'FR')
        if (parsed_ph.isValid()) {
            trackingData['phone'] = parsed_ph.number;
        }
    } catch(e) {
        console.log('unparsable phone number')
    }
    
    if (fn.length >= 3) {
        trackingData['firstname'] = fn;
    }
    if (ln.length >= 3) {
        trackingData['lastname'] = ln;
    }

    if (ct.length >= 3) {
        trackingData['city'] = ct;
    }
    if (zp.length == 5) {
        trackingData['zipcode'] = zp;
    }
    
    if (ad1.length >= 6) {
        trackingData['address1'] = ad1
    }
    
    if (ad2.length >= 6) {
        trackingData['address2'] = ad2
    }
    
    trackingData['country'] = country
    
    mt('send', 'pageview', trackingData)
}

// on attends que jQuery et MauticJS soient chargés
deferMauticJQuery(function() {
    // on autorise les requêtes CORS
    MauticJS.CORSRequestsAllowed = true
    
    var checkExist = setInterval(function() {
        console.log('ABANDON MAUTIC: vérification de l\'existence du formulaire...')
        var amount = $('#billing_postcode')
        if (amount.length) {
            console.log('ABANDON MAUTIC: formulaire cartflows chargé')

            $("#billing_email").change(sendFormData)
            $("#billing_first_name").change(sendFormData)
            $("#billing_last_name").change(sendFormData)
            $("#billing_phone").change(sendFormData)
            $("#billing_city").change(sendFormData)
            $("#billing_postcode").change(sendFormData)
            $('#billing_address_1').change(sendFormData)
            $('#billing_address_2').change(sendFormData)
            $('#billing_country').change(sendFormData)

            clearInterval(checkExist);
        }
    }, 250); // check every 250ms
})
</script>

Actually the fields have the same names.. But they are only using the First Name (billing_first_name), Last Name, and Email.

I just know I need them to get identified in Mautic when the form submits.. Whether that's done through pushing the form data.. or the order data.. Whatever is faster.. Because as they land on the next step (thank you page) I'd like to be able to give them a tag.

Sorry, I completely ignored the third paragraph of your earlier comment.

They appear as a contact as soon as the informations are typed (no need for form submit). The data is submitted upon field change, if the data is correct (valid email, valid name, etc...). This is probably illegal if it matters to your business. At least it is according to the RGPD!

You can create a segment which matches visitors of your thank you page if this fulfills your requirements. I am not sure about tags since I am not a Mautic user anymore.

Be sure to remove unused lines of the script in order to avoid JavaScript errors and avoid the bandwidth usage imposed by libphonenumber-mex.