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

テクニック

2023.11.21

広告ブロッカー（アドブロック）を検知したらポップアップを表示
アドブロック対策とそもそもポップアップを表示するべきか
具体的な仕様
サンプルコード
1. Javascriptのみ
2. Bootstrap
まとめ
誰でも分かるアダルトアフィリエイト5ステップ

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

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

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

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

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

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

しかし、広告ブロッカーを使用してサイトを閲覧する側にとっては、ポップアップが都度表示されるため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>

デモページはこちら