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

問題

フォーム送信はあったのに、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]);

        }

    });

} );