広告ブロッカー（アドブロック）を検知したらポップアップを表示する

Javascriptで広告ブロッカーを検知するポップアップを表示

当サイトに実装している広告ブロッカーを検知した際に、広告ブロッカーを解除して頂くメッセージをポップアップ（モーダル）表示する方法になります。

ポップアップの実装方法は、いくつか有用なライブラリ（Bootstrap、jQuery UI、SweetAlert等）がありますが、今回はJavascriptのみで実装する方法になります。

具体的な仕様は下記です。

表示される広告幅の高さを判定し、”0”だった場合にポップアップを表示
ポップアップは”×”ボタン、またはポップアップ外をクリックしたら閉じる
ポップアップを閉じた15秒後に再度判定して広告ブロッカーが解除されていなければ、再度同様のポップアップを表示

サンプルコード

HTML、CSS、Javascriptのサンプルコードを記載します。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>広告ブロックを検出してポップアップを表示</title>
<link href="adblockpopup.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <div id="adbox">
    <!-- 広告タグ埋め込み部分 -->
  </div>

<!-- 広告ブロッカーが検出された場合に表示されるポップアップ -->
  <div id="adblock-modal" class="modal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5 class="modal-title">広告ブロッカーを検出しました</h5>
        </div>
        <div class="modal-body">
          <p>当サイトは広告収入によって運営されております。<br>サイトの維持・運営のためにも、広告ブロッカーを解除していただけるようお願い致します。</p>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="adblockpopup.js"></script>
</body>
</html>

CSS（adblockpopup.css）

#adblock-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

#adblock-modal .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#adblock-modal .modal-content {
  width: 600px;
  background-color: #fff;
  border: none;
  border-radius: 15px 15px 10px 10px;
}

#adblock-modal .modal-header {
  background-color: #007bff;
  color: #fff;
  border-radius: 10px 10px 0 0;
}

#adblock-modal .modal-title {
  padding: 0 20px 10px 20px;
  font-size: 1.5rem;
}

#adblock-modal .modal-body {
  padding: 0 20px 20px 20px;
  font-size: 1.2rem;
}

#adblock-modal .close {
  position: relative;
  top: 10px;
  left: 90%;
  color: #333;
  opacity: 1;
  font-size: 1.5rem;
}

Javascript（adblockpopup.js）

function detectAdBlocker() {
  // 広告ブロッカーを検出する
  const adspace = document.querySelector("#adbox");
  if (adspace.clientHeight === 0) {
    // ダイアログを表示
    document.getElementById("adblock-modal").style.display = "block";
    setTimeout(function () {
      // 15秒後に再び広告ブロッカーを検出する
      detectAdBlocker();
    }, 15000);
  }
}
window.onload = detectAdBlocker;

// ポップアップを閉じる
document.querySelector("#adblock-modal .close").addEventListener("click", function () {
document.getElementById("adblock-modal").style.display = "none";
});
document.querySelector("#adblock-modal").addEventListener("click", function () {
document.getElementById("adblock-modal").style.display = "none";
});

デモページはこちら

広告ブロッカーを検出してポップアップを表示させることにより、一部のユーザーがサイトを閲覧しなくなる、できなくなる可能性があります。

広告をブロックすることができない状況で、ユーザーが広告表示されるページを閲覧することを強制することは、広告ブロックに慣れてしまっているユーザーにとっては不快な体験となる可能性があります。
広告ブロックを防止することが長期的に見るとサイトへのアクセス現象に繋がる恐れもあるため注意して実装する必要があります。

世界中で行われている裁判の判例を見ている限り、広告をブロックすること自体の違法性はありません。（日本の法律で適用されるかどうかは不明）

広告を完全に排除するとサイト運営が成り立たないのは目に見えていますので、どのような形態にして運営していくか今も世界中で議論が続いており、サイト運営側とサイト閲覧者側の収益性と利便性の兼ね合いを探っているような状況です。

<< 「お役立ちテクニック /備忘メモ」に戻る

▲ページトップに戻る

アダルトサイト作成

アダルトサーバ

アダルトASP

よくある質問

お役立ちテクニック

相互リンク