【トラブル】フォームの送信が計測されない


問題

フォーム送信はあったのに、CROのフォーム分析機能で計測されません。 


解決方法

CROのフォーム分析機能で、動的フォーム(JSで送信されるフォーム)やAJAXのフォームの送信を計測するには、下記のAPIを利用する必要がございます。


window.VWO = window.VWO || [];

window.VWO.push(['nls.formAnalysis.markSuccess', < フォームのインスタンスと差し替えてください > , < 送信結果値と差し替えてください > ]) 



フォームインスタンスを取得する方法


下記HTMLを例とします。


<form id=“my-form-id” class=“my-form-class”>

    ………..

</form>


var formInstance = document.getElementById('my-form-id');


// フォームの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]);

        }

    });

} );