【トラブル】フォームの送信が計測されない
問題
フォーム送信はあったのに、CROのフォーム分析機能で計測されません。
解決方法
CROのフォーム分析機能で、動的フォーム(JSで送信されるフォーム)やAJAXのフォームの送信を計測するには、下記のAPIを利用する必要がございます。
window.VWO = window.VWO || [];
window.VWO.push(['nls.formAnalysis.markSuccess', < フォームのインスタンスと差し替えてください > , < 送信結果値と差し替えてください > ])
フォームインスタンスとは:JavaScriptやjQueryで指定する計測したいフォーム
送信結果値とは:フォームが正常に送信出来たら「1」に指定してください。フォームの送信が失敗したら「0」に指定してください。
フォームインスタンスを取得する方法
下記HTMLを例とします。
<form id=“my-form-id” class=“my-form-class”>
………..
</form>
JavaScriptでフォームインスタンスを取得する
var formInstance = document.getElementById('my-form-id');
jQueryでフォームインスタンスを取得する
// フォームのID名で取得する場合
var formInstance = $('#my-form-id');
// もしくは、フォームのクラス名で取得する場合
var formInstance = $('.my-form-class');
フォーム送信の成功・失敗を計測する方法
送信結果によってVWOに渡す値が異なるため、サイトに合わせてカスタマイズする必要があります。下記の例を参照してください。
例:jQueryValidate(入力バリデーションツール)を利用しているフォーム
// Document.Ready
$(function () {
// フォームインスタンスを取得する
var vwoFormInstance = document.getElementById('myform');
// jQueryValidateのハンドラーに紐づく
$('#myform').validate({
// フォームバリエーションが成功した場合
submitHandler: function(form) {
// VWOフォーム計測APIで「1」をVWOに渡して、フォームを送信する
window.VWO = window.VWO || [];
window.VWO.push(['nls.formAnalysis.markSuccess', vwoFormInstance, 1]);
form.submit();
},
// フォームバリデーションが失敗した場合
invalidHandler: function(event, validator) {
// VWOフォーム計測APIで「0」をVWOに渡して、ストップ
window.VWO = window.VWO || [];
window.VWO.push(['nls.formAnalysis.markSuccess', vwoFormInstance, 0]);
}
});
} );