Simple transmission to Google Analytics of form filling error events in Magento (and not only)

I received such a task, there is a site on Magento and the customer wants to monitor form filling errors on the site in Google Analytics (GA). As always, the site has both Prototype and jQuery and a bunch of JS noodles as well, in general, everything is as usual. At first, I made a bulky decision, but then a good idea came to my mind, which I want to share with the community.

By JS noodle, I mean loosely structured third-party JS code on this site. I will continue to use this term for brevity. I will not describe the extra details and give all the code, I will summarize my approach, assuming that the reader understands how events work in GA, has basic ideas about Magento and can insert the code where it should be.

After analyzing the site, I realized that I was very lucky, because The style of displaying information on the site remained the same. My idea is simple: to validate the form fields on the Magento frontend, use the js / prototype / validation.js library (the path from the site root). If the validator detects an error, it adds the CSS class 'validation-failed' to the DOM element of the form field. Also this class was added by all validator handlers from JS noodles. Bingo - this fact can be tracked to send the corresponding event to GA. Thank God that practically all JS noodles used either the Element.addClassName method from Prototype or the addClass from jQuery and there was very little code using the native JS methods, which I replaced with Element.addClassName.

Now it remains only to override these two methods of the Prototype and jQuery libraries to call its checkValidationFailed function to send an event to GA. Since The Element.addClassName code in Prototype is very simple, you can simply replace this method, with jQuery it’s not so easy to work - I had to use ts "Intermediate" object.
')
Here is my code (it is certainly not perfect, but it works):

document.observe('dom:loaded', function () { Element.addMethods({ addClassName: function(element, className) { if (!(element = $(element))) { return; } if (!Element.hasClassName(element, className)) { element.className += (element.className ? ' ' : '') + className; } checkValidationFailed(className, element); return element; } }); var oAddClass = jQuery.fn.addClass; jQuery.fn.addClass = function() { checkValidationFailed(arguments[0], this[0]); return oAddClass.apply(this, arguments); }; function checkValidationFailed(className, element) { if (className != 'validation-failed') { return; } var label = 'undefined'; if (typeof element.name != 'undefined') { label = element.name; } if (typeof element.labels != 'undefined' && typeof element.labels[0] != 'undefined' && typeof element.labels[0].innerText != 'undefined' ) { label = label + ' : ' + element.labels[0].innerText; } dataLayer.push({ 'event': 'form_error_jsvalidator', 'error_message' : label }); } }); 

Since The site uses Google Tag Manager - a standard dataLayer is used to send messages to GA.
Based on the URL of the page from which the event came and the label variable in the GA report, it is easy to understand on which page and in which field the error occurred - this was enough for my customer, but in principle you can send a bunch of additional information to GA.

I think that this approach is suitable not only for Magento, but also for sites on other platforms.