🥓 🍘 🚧 Google AnalyticsでMagentoにフォーム入力エラーを簡単に送信できます（その他）。 👷 🤮 👍🏿

私はそのようなタスクを受け取りました。Magentoにサイトがあり、顧客はGoogleアナリティクス（GA）のサイトのフォームに記入する際のエラーを監視したいと考えています。いつものように、サイトにはPrototypeとjQueryの両方があり、さらに多くのJSヌードルがあります。一般に、すべてが通常どおりです。最初は面倒な決定を重ねましたが、良いアイデアが思いついたので、それをhabrasocietyと共有したいと思います。

JSヌードルとは、このサイトの構造が不十分なサードパーティのJSコードを意味します。簡潔にするため、この用語は引き続き使用します。不要な詳細については説明せず、すべてのコードを説明します。読者がGAでイベントがどのように機能するかを理解し、Magentoの基本を理解し、必要な場所にコードを貼り付けることができると仮定して、アプローチを簡単に説明します。

サイトを分析した後、私は非常に幸運であることに気付きました。サイト上の情報の表示スタイルは統一されたままでした。私のアイデアはシンプルです。js/ prototype / validation.jsライブラリ（サイトのルートからのパス）を使用して、Magentoフロントエンドのフォームフィールドを検証します。バリデーターがエラーを検出すると、CSSクラス「validation-failed」をフォームフィールドのDOM要素に追加します。また、このクラスはすべてのJSヌードルバリデーターによって追加されました。ビンゴ-この事実を追跡して、対応するイベントをGAに送信できます。ほとんどすべてのJSヌードルがPrototypeのElement.addClassNameメソッドまたはjQueryのaddClassのいずれかを使用し、ネイティブJSメソッドを使用するコードはほとんどなく、Element.addClassNameに置き換えたことを神に感謝します。

PrototypeおよびjQueryライブラリのこれら2つのメソッドをオーバーライドして、checkValidationFailed関数を呼び出してイベントをGAに送信するだけです。なぜなら Prototype 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タグマネージャーはサイトで使用されます。標準のdataLayerはGAにメッセージを送信するために使用されます。

イベントが発生したページのURLとGAレポートのラベル変数に基づいて、どのページでどのフォームフィールドでエラーが発生したかを簡単に確認できます-これは顧客にとっては十分でしたが、原則としてこの方法で多くの追加情報をGAに転送できます。

このアプローチは、Magentoだけでなく、他のプラットフォームのサイトにも適していると思います。

Google AnalyticsでMagentoにフォーム入力エラーを簡単に送信できます（その他）。

More articles: