滞在時間を延ばすために離脱防止モーダルをJavaScriptで作成する

滞在時間を延ばすために離脱防止モーダルをJavaScriptで作成する ツール

サイトのユーザー滞在時間は長ければ長いほどいいです。
滞在時間が長ければその分だけ、PV増加やコンバージョン率向上の可能性がアップします。

根本的には、良いコンテンツを作ることがそのためには必要です。
そうすれば、おのずと滞在時間は伸びるでしょう。

でも、小手先のテクニックで滞在時間が伸びるとしたら、どうしますか?
是非とも、そのテクニックを使ってみたいと思いますよね。

ということで、今回はそのテクニックを紹介します。
そのテクニックは、離脱防止モーダルと言われています。
一部では、離脱防止ポップアップとも言いますね。

本記事の内容

  • 離脱防止モーダルとは?
  • 離脱防止モーダルの仕組み
  • 離脱防止モーダルのサンプルコード

それでは、上記に沿って解説していきましょう。

離脱防止モーダルとは?

ブラウザでページを閉じる際、以下を見たことがありませんか?

個人的には、このダイアログが嫌いです。
でも、使いようによっては、とても効果的なモノになります。

例えば、入力フォームで項目が多い場合があります。
苦労してそれらを入力したのに、誤ってそのページから離脱したことがありませんか?

ブラウザの「戻る」ボタン・タブの「×」をクリックしてしまったような場合です。
一旦そのページから離脱すると、入力した苦労はすべて無駄になります。

このような悲劇を防ぐため、上記ダイアログが役に立ちます。
このダイアログを離脱防止モーダルと呼ぶことがあります。

しかし、本記事では以下を離脱防止モーダルと言います。

もし実物を見たいなら、このページから離脱しようとしてみてください。
ブラウザの「戻る」ボタン・タブの「×」をクリックしようとすれば、出てきます。

こっちの離脱モーダルなら、ユーザーの邪魔をしません。
無視したければ、そのまま離脱可能です。

でも、冒頭のダイアログの場合は、「このページを離れる」ボタンを押す必要があります。
入力フォーム画面ではないのに、こんなことをされたらイラっとするだけです。

以上、離脱モーダルに関しての説明でした。
次は、離脱モーダルの仕組みを説明しましょう。

離脱防止モーダルの仕組み

技術的には、大きく分けると以下の2つです。

  • モーダルウィンドウ
  • マウスイベント

この二つの技術が、必要となります。
どちらかと言うと、基本中の基本です。

そのため、技術ついては説明しません。
あとでサンプルコードを載せますが、見ればわかるレベルです。

見ればわかるレベルとは言え、以下の3つの知識は必要です。

  • HTML
  • CSS
  • JavaScript(jQueryベース)

では、具体的な仕組みを説明していきます。
次の画面は、本サイトの記事画面です。

この画面の上部に色が付いている範囲(エリア)があります。
実際の画面上では、こんな色はついていません。

この色のエリアに、マウスカーソルが入ると離脱防止モーダルが表示されます。
具体的には、mouseoverイベントになります。

たった、これだけです。
そんな大層なことは、していません。

なお、先ほどからマウスカーソルというキーワードが出てきています。
察しの通り、スマホには対応していません。

本記事の離脱防止モーダルは、PC専用となります。
スマホに対応するなら、全く別の方法が必要でしょうね。

では、最後にサンプルコードを載せておきます。

離脱防止モーダルのサンプルコード

  • HTML
  • CSS
  • JavaScript(jQueryベース)

それぞれを確認していきましょう。

HTML

<div id="id_wdp_border"></div>
<div class="modal js-modal">
    <div class="modal__bg js-modal-close"></div>
    <div class="modal__content">
        <img src="画像パス" style="width:90%;">
        <p>
           あなたにもできます。<br />
        こんな感じの離脱防止モーダルが、すぐにできます。<br />
           サンプルコードだけでも持って帰ってください。
        </p>
        <a class="js-modal-close" href="">閉じる</a>
    </div><!--modal__inner-->
</div><!--modal-->

ここで説明が必要なのは、以下ですね。

<div id="id_wdp_border"></div>

これは、「離脱モーダルの仕組み」で触れた画面上部の色がついた部分です。

CSS

#id_wdp_border{
    width: 100vw;
    height: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: -28px;
    left:0;
    width: 100%;
    z-index: 99999;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
}

上記はあくまで本ブログに適したモノとなっています。
.modalの「top: -28px;」は、各環境によって異なります。

JavaScript(jQueryベース)

jQuery(function() {
    
    jQuery('#id_wdp_border').on('mouseover', function () {
        jQuery('.js-modal').fadeIn();
        return false;
    });
    
    jQuery('.js-modal-close').on('click',function(){
        jQuery('.js-modal').fadeOut();
        return false;
    });

});

JQueryの利用が、前提のコードです。
何も説明はいらないですね。

もちろん、これはあくまで基本に過ぎません。
ただ、離脱防止モーダルが毎回出るのはウザいです。
(※このページでは、ウザいけど出しています)

クッキーに情報を保存して、表示を制限するなども必要となってくるでしょう。
その辺りの制御に関しても、今後入れていきたいです。

また、その際には記事にして解説します。

タイトルとURLをコピーしました