Google Analytics (और अधिक) में Magento में आसानी से फ़ॉर्म भरें त्रुटियों को सबमिट करें

मुझे इस तरह का कार्य मिला, मैगेंटो पर एक साइट है और ग्राहक Google Analytics (GA) में साइट पर फ़ॉर्म भरने में त्रुटियों की निगरानी करना चाहता है। हमेशा की तरह, साइट में प्रोटोटाइप और jQuery और जेएस नूडल्स का एक गुच्छा है, इसके अलावा, सामान्य तौर पर, सब कुछ हमेशा की तरह है। सबसे पहले मैंने एक बोझिल निर्णय लिया, लेकिन फिर मेरे दिमाग में एक अच्छा विचार आया, जिसे मैं हब्रसोशियेंस के साथ साझा करना चाहता हूं।

जेएस नूडल्स द्वारा, मेरा मतलब है कि इस साइट पर खराब रूप से संरचित तृतीय-पक्ष जेएस कोड। मैं इस शब्द का उपयोग संक्षिप्तता के लिए करता रहूंगा। मैं अनावश्यक विवरणों का वर्णन नहीं करूंगा और सभी कोड दे दूंगा, मैं अपने दृष्टिकोण को संक्षिप्त रूप से रेखांकित करूंगा, यह मानते हुए कि पाठक समझता है कि जीए में कैसे काम करते हैं, मैगेंटो की एक बुनियादी समझ है और वह कोड पेस्ट करने में सक्षम होगा जहां यह होना चाहिए।

साइट का विश्लेषण करने के बाद, मुझे एहसास हुआ कि मैं बहुत भाग्यशाली था, क्योंकि साइट पर सूचना प्रदर्शित करने की शैली एकीकृत रही। मेरा विचार सरल है: js / prototype / validation.js लाइब्रेरी (साइट की जड़ से पथ) का उपयोग Magento के दृश्यपटल पर प्रपत्र फ़ील्ड को मान्य करने के लिए किया जाता है। यदि सत्यापनकर्ता एक त्रुटि का पता लगाता है, तो यह सीएसएस वर्ग को फॉर्म फ़ील्ड के DOM तत्व में 'सत्यापन-विफल' जोड़ता है। साथ ही इस वर्ग को सभी जेएस नूडल वैलिडेटर द्वारा जोड़ा गया था। बिंगो - इस तथ्य को जीए के अनुरूप घटना भेजने के लिए ट्रैक किया जा सकता है। भगवान का शुक्र है कि लगभग सभी जेएस नूडल्स ने या तो Prot.addClassName पद्धति का उपयोग प्रोटोटाइप से या इसके लिए jQuery से addClass से किया था और देशी JS विधियों का उपयोग करते हुए बहुत कम कोड था, जिसे मैंने Element.addClassName से बदल दिया।

अब यह केवल प्रोटोटाइप और jQuery पुस्तकालयों के इन दो तरीकों को ओवरराइड करने के लिए बना रहता है ताकि वे अपने चेकवैलिडेशन को कॉल कर सकें। इवेंट को GA में भेजने के लिए फ़ंक्शन। क्योंकि प्रोटोटाइप Element.addClassName कोड बहुत सरल है, आप बस इस विधि को बदल सकते हैं, यह सिर्फ jQuery के साथ काम नहीं करेगा - मुझे t.s का उपयोग करना था "मध्यवर्ती" वस्तु।

यहाँ मेरा कोड है (यह निश्चित रूप से सही नहीं है, लेकिन यह काम करता है):

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 }); } }); 

क्योंकि Google टैग प्रबंधक का उपयोग साइट पर किया जाता है - जीए को संदेश भेजने के लिए एक मानक डेटालेयर का उपयोग किया जाता है।
उस पृष्ठ के URL के आधार पर जहां से ईवेंट आया था और GA रिपोर्ट में लेबल चर, यह देखना आसान है कि किस पेज पर और किस फ़ील्ड में त्रुटि हुई - यह मेरे ग्राहक के लिए पर्याप्त था, लेकिन सिद्धांत रूप में आप इस तरह से जीए को अतिरिक्त जानकारी स्थानांतरित कर सकते हैं।

मुझे लगता है कि यह दृष्टिकोण न केवल मैगेंटो के लिए, बल्कि अन्य प्लेटफार्मों पर साइटों के लिए भी उपयुक्त है।