フォームが正しく送信されません
2016年11月25日
新しいフォームを追加後、フォームレポートに送信不可のお知らせが表示されることがあります。これは、インタラクションが非常に低いフォームに起こる事例と見られますが、送信成功の結果が正しく検出されていない可能性もあります。
次のフォームを例に見てみましょう。
このフォームでは、2つのフィールド(名前とemail)にインタラクションが存在するにも関わらず、送信成功の結果は0です。その代り最後のフィールド欄では、ドロップ‐オフ数値が異常に高くなっています。
このことから、ご使用のフォームから送信成功の結果を検出する際、私共のレコーディングスクリプトに問題が生じていることがよく分かります。
なぜ送信データが拾われないのか?
私共の分析スイートは、慣例的なHTMLの意味合いにおける「送信」、それに続く別ページへのリダイレクトを含めた一連の送信行為を「成功」と見なします。どちらかの作業が行われない場合、マウスフローは送信を検出しません。
以下のどちらかに当てはまる場合、マウスフローは送信を検出しません。
- 送信がJavaScript経由で行われた場合
- 送信後、リダイレクトが行われない場合
この問題を解決する為に、送信が成功する際は情報が別のコードを経由している旨を、私共に伝えていただく必要があります。
送信についてMouseflowに知らせる
まず、_mfq のオブジェクトを作成します。
次に、(「送信」のクリックもしくはそれに準ずる行為で)送信を試みている旨を、マウスフロー側に伝えます。
最後に、結果に応じて、その送信行為を(有効性の観点から)失敗、もしくは成功とみなすかを、マウスフロー側にお知らせください。
–もしくは–
_mfq.push([‘formSubmitSuccess’, ‘#formID’]);
これら3つの例において、
(a)_mfqが可変的に存在することを確認する必要があります。そして、
(b)フォームのIDが正しく通過することを確かめます。上記のサンプルでは、”#formID”が該当します。
サンプル
前例のフォームをサンプルとして見ていきましょう。
2つの入力フィールドを持つシンプルなフォームです。
<form id="formID" method="post" name="test_form"> <input type="text" class="text" name="name"> <input type="text" class="text" name="email"> <a href="javascript:void(0);" class="submit" onclick="submit_signup();"> <span>Submit</span> </a> </form>
この場合、フォームでは、送信を行う際にJavaScriptを使用していることが容易に判断できます。
(‘<入力タイプ=”送信” 値=”送信”>”のように)慣例的なHTMLの代わりに、このフォームはonclickハンドラを伴うlikeを使用します。その際、我々はonclickハンドラを以下のように変更できます:
<a href="javascript:void(0);" class="submit" onclick="var _mfq = _mfq || []; _mfq.push(['formSubmitAttempt', '#formID']); submit
これにより、各クリックにおける「送信試行」のログが誘発されます。その後、’formSubmitSuccess ‘(送信成功フォーム)もしくは’formSubmitFailure’(送信失敗フォーム)を呼び出す際に正しい場所を特定するため、(‘submit_signup();’)というJavaScript機能を通過する必要があります。
function submit_signup(result) { // do some processing if (result == 'success') { _mfq.push(['formSubmitSuccess', '#formID']); } else { _mfq.push(['formSubmitFailure', '#formID']); } }