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

近年ウェブサイト利用者がブラウザに広告ブロック機能を入れて、広告を強制的に非表示にしてネットサーフィンをするのが当たり前になりつつあります。

ウェブサイト運営者にとって広告は収入源であり、それによるモチベーションの確保、サーバー維持費などなくてはならないものです。

アダルトサイトにおけるサーバー維持費は、一般サイトよりトラフィックが多いかつ、サーバー料金がそもそも少し高いため大きな負担となります。

そのため、強制的に非表示にされる点だけでいえば、サイト作成にかけた労力・負荷分の対価を払わずにただで閲覧されており、大きな負担になります。

広告ブロックへの対策をするかは、様々な背景、メリット・デメリットがありますので、導入する際には十分に注意しましょう。

広告ブロッカー（アドブロック）を検知したらポップアップを表示
アドブロック対策とそもそもポップアップを表示するべきか
具体的な仕様
サンプルコード
1. Javascriptのみ
2. Bootstrap
まとめ

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

今回はご紹介するのは、広告ブロッカー（アドブロック）を検知した際に、広告ブロッカーを解除して頂くメッセージをポップアップ（モーダル）表示する方法になります。

サイト運営者にとって広告が表示されないことは、収益が大きく減少することを意味します。

アダルトサイトでは視覚情報から広告をクリックする方が多く、特に影響を受けやすいです。

自サイトのページ表示数は変わっていないのに広告クリック数が減少している方は、恐らく広告ブロッカーの影響を受けています。

広告ブロッカーの閲覧者側の使用率は年々上昇しており、早急に何らかの対策をする必要があります。

しかし、広告ブロッカーを使用してサイトを閲覧する側にとっては、ポップアップが都度表示されるためUI、利便性を大きく損なうことになりますのでご注意ください。

アドブロック対策とそもそもポップアップを表示するべきか

管理人としては「広告ブロッカー（アドブロック）を使用している読者はそもそも広告を踏まない」という考えの元で、現状は「ポップアップは表示するべきではない」と思います。

それについては、別記事でまとめていますので気になった方はご覧ください。

具体的な仕様

広告表示領域（divタグid:adbox）の幅を判定し、’0’だった場合にポップアップ（モーダル）を表示
ポップアップは×ボタン、またはポップアップ外をクリックしたら閉じる
ポップアップを閉じた15秒後に再度判定して広告ブロッカーが解除されていなければ、再度同様のポップアップを表示

サンプルコード

ポップアップを実装する方法はいくつかありますが、今回紹介するのは「JavaScriptのみ」と「Bootstrap」ライブラリを使用した方法の2種類です。

Javascriptのみ

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

<head>
  <meta charset="UTF-8">
  <title>広告ブロックを検出してポップアップを表示</title>
  <style>
    #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;
    }
  </style>
</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">×</span>
          </button>
          <h5 class="modal-title">広告ブロッカーを検出しました</h5>
        </div>
        <div class="modal-body">
          <p>当サイトは広告収入によって運営されております。<br>サイトの維持・運営のためにも、広告ブロッカーを解除していただけるようお願い致します。</p>
        </div>
      </div>
    </div>
  </div>

  <script>
    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";
    });
  </script>

</body>
</html>

デモページはこちら

Bootstrap

「Bootstrap」ライブラリは既存のページに使用する場合、既存のCSSレイアウトに影響を及ぼす場合があるため注意が必要です。

Bootstrapのバージョンによって記載方法が少し異なります。（下記はv5.3.0）

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

<head>
  <meta charset="UTF-8">
  <title>Bootstrap - 広告ブロッカーを検出するポップアップ</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <style>
    #adblock-modal .modal-dialog {
      margin: 0 auto;
    }

    #adblock-modal .modal-content {
      background-color: #fff;
      border: none;
    }

    #adblock-modal .modal-header {
      background-color: #007bff;
      color: #fff;
      border-bottom: none;
    }

    #adblock-modal .modal-title {
      font-size: 1.5rem;
    }

    #adblock-modal .close {
      color: #333;
      opacity: 1;
      font-size: 1.5rem;
    }
  </style>
</head>

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

  <!-- 広告ブロッカーが検出された場合に表示されるポップアップ -->
  <div class="modal fade" id="adblock-modal" tabindex="-1" role="dialog" aria-labelledby="adblock-modal-label"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="adblock-modal-label">広告ブロッカーを検出しました</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="閉じる">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>当サイトは広告収入によって運営されております。<br>サイトの維持・運営のためにも、広告ブロッカーを解除していただけると幸いです。</p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous"></script>
  <script>
    function detectAdBlocker() {
      // 広告ブロッカーを検出する
      const adspace = document.querySelector("#adbox");
      if (adspace.clientHeight === 0) {
        // ダイアログを表示
        $('#adblock-modal').modal('show');
        setTimeout(function () {
          // 15秒後に再び広告ブロッカーを検出する
          detectAdBlocker();
        }, 15000);
      }
    }
    window.onload = detectAdBlocker;
  </script>
</body>

</html>

デモページはこちら