フォーム改善のためにイベントトラッキングを始めたこと

Posted on

管理しているサイトのフォームのコンバージョン率があまりよくない。　
よくあるお問い合わせフォームなのだが、なかなかお問い合わせがないのが悩みなのだ。

サイト全体のアクセスから考えると、それなりにお問い合わせページのPV数はあると感じている。(総量自体が大きくはないが)
その上でコンバージョン率が1.5％程度。これをもう少し改善したい。
原因を推測するといろいろ考えてしまう。

原因の推測

1.お問い合わせの内容がユーザーの中で漠然としている

サイト内でユーザーニーズに答え切れておらず、ユーザーの中で課題を具体化させることができていない。
かなり根本的な問題。

2.フォーム項目が煩雑

現在のフォームの項目

  • 名前
  • 電話番号
  • メールアドレス
  • メールアドレス確認
  • お問い合わせ内容

項目数は多くないので煩雑というほどでもないと思う。
ただ個人的にメールアドレスの確認は必要ないと感じいている。
参考サイトに上げた意見に同意。

3.導線の問題

サイト構成は静的な部分と、ブログという動的な部分をもったサイトとなっている。
ブログをメインに見に来るユーザー(主に検索流入)は、知りたいことを調べてサイトを訪問しにくるので、訪問した記事に答えが見つかればそのまま直帰するだろう。そこから新たな欲求を引き出してお問い合わせまで結びつけるのは、また別な問題として考えることになる。

4.デザイン的な問題

お問い合わせページに辿りついてから、入力フォームまでに距離がある。
どのようなことを問い合わせてほしいかなどの、前置き的な文章が入っているが、そのことでフォームが押し下げられ画面サイズによってはファーストビューにフォームが表示されない。
フォームを入力するつもりで来たのにフォームが見えなかったらページから離れる原因になるだろう。

5.誤操作による訪問

そもそも間違って訪問するつもりがなかったのにお問い合わせページに来てしまった場合。

  • お問い合わせへのリンクバナーのエリアが大きくて間違えて押してしまう。
  • スマホ時の下部固定のお問い合わせボタンを間違えて押してしまう。

もちろんわざと間違えて押させようというリンクは設置していないけど、実は間違えやすい箇所がないかの検証が必要。

イベントトラッキングの設置

ぱっと思いつくだけので上の5つくらいは問題が思いつく。
それぞれに対しての対応方法も考えられるけど、まずは原因をはっきりさせたい。
ということでフォームでのイベントを測定することにした。
このサイトではGoogle Analyticsを導入しているので、そこでイベントを計測する。

計測するイベントは大きく分けて2つ。
一つ目はフォーム項目の入力イベントの測定。もう一つはお問い合わせページでのスクロールイベントの測定だ。

そのためのコードがこれ。
なお、該当サイトではWordPressとjQueryを利用している。

(function ($) {
    if ($('body').hasClass('page-contact')) {
        var contact_form = $('form');

        // Contact Form FocusEvent
        $(contact_form).find('input[type="text"],input[type="email"],textarea').on(
            'focus',
            function () {
                var focusevent_label = 'ContactForm_Focus_' + $(this).attr('name');
                ga('send', 'event', 'ContactForm', 'ContactForm_Focus', focusevent_label);
            }
        );

        // Contact Form ScrollEvent
        $(window).one('scroll', function () {
            ga('send', 'event', 'ContactForm', 'ContactFormScroll', 'ContactFormScroll');
        });
    }
})(jQuery);

お問い合わせページでのみ必要なコードなので、はじめのif分でお問い合わせページの<body>にあるクラス.page-contactを探して判定している。

フォームの入力イベントの測定

// Contact Form FocusEvent
$(contact_form).find('input[type="text"],input[type="email"],textarea').on(
    'focus',
    function () {
var focusevent_label = 'ContactForm_Focus_' + $(this).attr('name');
ga('send', 'event', 'ContactForm', 'ContactForm_Focus', focusevent_label);
    }
);

これはよくある形式のフォームでのイベントチェック。
フォーム要素がフォーカス(カーソルがアクティブ)された時のイベントを計測する。
フォームの要素は縦に並んでいるので、フォーム全体の中でどこまで入力されたかを調べ、どの要素の手前での離脱が多いかを予想する。

これで大まかに問題1と問題2をあぶり出したい。

お問い合わせページのスクロールイベント

// Contact Form ScrollEvent
$(window).one('scroll', function () {
    ga('send', 'event', 'ContactForm', 'ContactFormScroll', 'ContactFormScroll');
});

ページが表示されて、スクロールが発生するとGoogle Analyticsへ送信される。
1度のページセッションにつき1度だけ発生するように.on()ではなく.one()にしている。

スクロールイベントを計測する目的は問題4、問題5の予想になる。
お問い合わせフォームを入力するつもりで来たらフォームがなかったからそのままいなくなってしまうパターン。
それから問題5に関しては、何らかの手違いで訪問したユーザーは何もせずにページを離れるだろう、という予測に基づく。

お問い合わせページは他のページよりも役割がはっきりしている(ユーザーはお問い合わせフォームがあることを予測しやすい)ので、用もないのに訪れる人は少ないだろうという仮定がある。
なので、簡単に引き算して「ページのセッション数 – スクロール数」で何もアクションを起こさなかったユーザー数を求められるとして考えた。

早く改善に手をつけたいので、あまり長い期間の集計はできないがまずは2～4週間データをとってみることにした。

計測して3週間の経過報告
そうしてみんないなくなった。フォームでのイベントトラッキングの経過

参考サイト