Created
February 22, 2020 19:14
-
-
Save clouedoc/71a6cd990f570cb13ec4085e77dbb566 to your computer and use it in GitHub Desktop.
CartFlows automatic Mautic contact information population - can be used to send abandonment carts(not RGPD compliant !)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
.