SPAページにおけるフォーム到達状況を確認する方法

背景
#

もしあなたのSPAページに複数ステップに分けたフォームがあり、各ステップに到達したユーザーがどれほどいるかを確認したい場合、以下内容をぜひお役立てください

例えばサイトにアクセスしてきたユーザーに診断アンケートに答えてもらい、その診断結果に応じて異なる商品を表示させる。それと同時に診断アンケートはよりよく改善するため、ユーザーがどのステップに到達したのかを調べたい場合。

このような場合は、各ステップ画面にある「go to next」ボタンにイベントを設置してコンバージョンファネルを利用することで到達状況を計測できます。

Tip：この場合はコーティングイベントを設置する必要があるため、コーディングに関わる知識が必要です。できればお客様の技術者より設定を行ってください。具体的なコーディングイベント設定方法はこちらの記事をご覧ください。

SPAページ計測の設定方法 #

Note：この方法で設定した各イベントの数値は、そのステップまで進んだユーザー数を意味します。

まずフォームのステップワンのページへの到達をイベントとして設定することで、アンケートを始めたユーザー数が分かります。

そして仮に次のステップに移動するボタンの名前が「go to next」の場合。このボタンにコーティングイベントを設定し、当ステップのタイトルをeventNameに付与します。これでPtengineで数値を確認すると、各ステップが見分けられます。

デモ：

document.querySelector('go to next').addEventListener('click',function(){
    var pt_step_title = document.querySelector('.title.-normal').innerHTML.trim();
    _pt_sp_2.push('setCustomEvent',{
        eventName:pt_step_title
    })
})

後はPtengineでコンバージョンを設定し、上記のイベントをファネルとして設定します。これでファネル画面で各ステップの到達状況を把握できます。

Tip：ファネルは最大10個を設定できるため、ステップが十歩以上ある場合、ファネルで確認することができません。