こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでスクロールで表示されるポップアップ広告の実装方法をご紹介しています。

スクロールで表示されるポップアップ広告を実装したいんだけど、どうすればいいんだろう?

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事では下記のデモの作り方をご紹介しています。ページをスクロールすると、ページの真中辺りでポップアップ広告が表示されます。

See the Pen Scroll PopUp Banner|JavaScriptpt by ryohei (@intotheprogram) on CodePen.31883

満たしている要件は下記の通りです。

  • ページの真中辺りでポップアップ広告を表示する
  • ポップアップ広告はセッション中に一度だけ表示する
  • ポップアップ広告はコンテンツをオーバーレイする形で表示する

セッション中に一度だけの表示となりますので、ページ遷移やリロードで再度表示されないようになっています。セッションですので、別タブやウィンドウで開いたり、履歴を削除すると再度表示されます。

では、作り方をご紹介していきます。

ポップアップ広告を作成する

まずはHTMLとCSSでポップアップ広告を作成します。

下記ではデモで使用しているものをそのまま記載しています。バナーにはダミー画像を使用していますので、実際に使用する際はバナー画像に置き換え、サイズを変更してご使用ください。

HTML

<div class="popup">
    <div class="popup-banner">
        <span class="popup-close">×</span>
        <a href="">
            <!-- バナー -->
            <img src="https://picsum.photos/300/300?grayscale" width="300" height="300" alt="">
        </a>
    </div>
</div>

<main>
    <!-- メインコンテンツ -->
</main>

SCSS(CSS)

@keyframes fadeIn {
    from { opacity: 0; }    
    to { opacity: 1; }
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .75);
    
    &-banner {
        position: relative;
    }
    
    &-close {
        position: absolute;
        top: -15px;
        right: -15px;
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 1.5rem;
        border-radius: 50%;
        text-align: center;
        color: white;
        background-color: black;
        cursor: pointer;
    }

    //popup表示時に付加されるclass
    &.open {
        display: flex;
        animation: fadeIn .7s;
    }
}

スクロールでポップアップ広告を表示する

デモで使用しているスクリプトをご紹介します。処理内容はコメントに記載の通りです。処理自体は冒頭で要件に上げた内容となっています。

//ポップアップ広告を取得
const popup = document.querySelector('.popup')
//ポップアップ広告の閉じるボタンを取得
const popupClose = document.querySelector('.popup-close')
//body要素を取得
const body = document.body
//表示位置を指定(下記はbody要素の真中辺り)
const position = body.clientHeight / 2

//スクロールされた場合の処理
window.addEventListener('scroll', ()=>{
    //スクロール位置を取得
    let scrollY = window.scrollY
    //ポップアップ広告の表示フラグを取得
    let popupFlag = sessionStorage.getItem('open')
    
    //スクロール量が表示位置以上であれば
    if(!popupFlag && position < scrollY){
        //ポップアップ広告表示
        popup.classList.add('open')
        //ポップアップ広告の表示フラグを表示済みに設定
        sessionStorage.setItem('open', true)
    }
    
    //popupがopenのclassを持っていれば
    if(popup.classList.contains('open')){
        //bodyのスクロールバーを非表示
        body.style.overflowY = 'hidden'
    } else {
        //bodyのスクロールバーを表示
        body.style.overflowY = 'auto'
    }
});

//ポップアップ広告の閉じるボタンがクリックされた場合の処理
popupClose.addEventListener('click', ()=>{
    //openのclassを削除
    popup.classList.remove('open')
    //bodyのスクロールバーを表示
    body.style.overflowY = 'auto'
})

上記ではsessionStorageを使用していますが、localStorageを使用するとセッションが切れた後も表示済みのフラグを保存することができます。使用方法については下記でご紹介していますので、ご参考にしていただければ幸いです。

最後に

ポップアップ広告は、Web担当者の意図したタイミングで情報を表示することができるため、コンバージョンの向上に期待できます。その反面、広告が苦手な方にとってはデメリットとなり、ポップアップ広告が表示されたタイミングでサイトの閲覧をやめる方もいます。

メリット・デメリットを照らし合わせて、適切に運用していただければと思います。

以上、JavaScriptでスクロールで表示されるポップアップ広告を実装する方法のご紹介でした!

JavaScriptを体系的に学びたい方

下記の参考書がおすすめです。私も勉強を始めた際に購入しました。入門書として必要な基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。