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>

Hello @sheldoncoupeheure,
Merci pour ce dev. Comment fait-on pour utiliser ce code ?
Il faut mettre le fichier ou ?
Merci
Stéphane

Hello @sheldoncoupeheure,
Merci pour ce dev. Comment fait-on pour utiliser ce code ?
Il faut mettre le fichier ou ?
Merci
Stéphane

Yo Stéphane,
Je pensais pas que quelqu'un trouverait ce gist un jour!

Déjà, il faut que ayiez une instance de Mautic(!) avec code de suivi installé sur votre WordPress.
Ensuite, il faut intégrer le code directement dans le html. Il n'y a rien à modifier sauf le type de numéro de téléphone (ici, c'est "FR"; si vous visez une clientèle anglaise, mettez "EN"...)
Le processus dépendra de votre éditeur (Divi Builder/Elementor/Oxygen...). En général, il suffit de rajouter un bloc HTML personnalisé et de faire un copier-coller.

N'hésitez pas si vous avez un soucis...
Sheldon

Can I use this for the CartFlows Opt-In? I use it to deliver free digital products.

var form_name = 'formulairedabandon' I don't have any forms with a french name?

Also do I need to edit the form name or anything? How will they get passed to Mautic? As contacts? Is there a simple way we can add a part to add a tag to the contact as well?

Hello @thedude83,

You can use it for the cartflows opt-in. You have to rename the fields and meddle with sendFormData and checkExists.

I actually should have removed var form_name = 'formulairedabandon' since it is not used in the code 😃!

I am open to freelancing proposals, if you're interested.

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.