- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
I have a form in which there are multiple form fields. I want to track the form error which shows for each field and fire corresponding collect tags for Google Analytics. Is there any way on how to do this using javascript/jquery?
I'm not able to think of any solution to this.
06-06-2018 08:18 AM - edited 06-06-2018 08:19 AM
Hi @sujay_das
Can you post a sample of the html?
It is possible using javascript or jQuery, and there are a number of ways to do it. It depends on how/when the error messages are shown though. Are they shown on blur of the input element, or on click of the button? Is the validation server side (and therefore with a page refresh) or client side?
A few things to think about:
- can you add a click handler to the submit button that looks for the presence (or visibility) of error messages, collates the messages and then calls utag.view with the data?
- can you add a blur handler to the form elements to post a GA call if that element is at error?
- can you add a mutation observer to the form, or the form error message elements, to watch for changes (either sub-element changes if the error messages are added, or stlye changes if they are made visible)?
All of these approaches are possible in iQ using DOM Ready JavaScript extensions, which one you choose largely depends on the answer to the first question.
06-14-2018 01:35 AM - last edited on 06-22-2018 06:12 AM by adrian_browning
Hello sujay_das,
In addition to above cited points from @BenStephenson, please find below code which would really useful for you to capture the error messages when end-user fill the form and got error messages. Basically this code works out if your FORM built in iFrame other wise you can write the straight forward method to capture the anticipated values.
$('input[type=submit], a.button, #iframe input[type=submit]').bind('click', function (e) {
setTimeout(function () {
var errorMessages = [];
$('div.error-msg p').each(function () {
errorMessages.push($(this).text());
});
$('p.error').each(function () {
errorMessages.push($(this).text());
});
$("#iframe").contents().find("p.error").each(function () {
errorMessages.push($(this).text());
});
$("#iframe").contents().find("div.error-msg").each(function () {
errorMessages.push($(this).text());
});
$("div.error-msg").each(function () {
errorMessages.push($(this).text());
});
if (errorMessages.length > 0) {
console.log("Error Message Found ", errorMessages);
for (var i = 0, len = errorMessages.length; i < len; i++) {
if (errorMessages[i].length > 1) {
window.utag_data['cevent_id'] = "Error: " + errorMessages[i];
window.utag_data['event_parent'] = "Respective page title";
window.utag_data['event_type'] = "Respective Error msg";
utag.link(window.utag_data, null, [9]);
}
}
}
}, 4000);
});
Note: This is example code which you should change based on your requirement.
Hope it helps! Happy Learning!
Copyright All Rights Reserved © 2008-2023