当サイトはアフィリエイト広告を利用しています

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デモページはこちら

まとめ

「広告ブロックは現状違法ではない」との認識が世界的に広がっており、広告会社は広告ブロックを無効化する方法を開発するなど、イタチごっこの状況に陥っています。

今後、インターネット広告業界がどのように変化していくかは不明ですが、何らかの収益元がないとサイト運営は不可能なのはわかりきっていますので、閲覧者は何らかの形で料金を負担する必要があります。

ただし、その考え自体がおかしい可能性もあります。

今までは全ての閲覧者が広告を見てサイト運営費用を負担してきましたが、それが無くなりつつあります。

広告ブロックを使用している人は費用を負担せず、使用していない人だけが負担しています。

この現状は不公平であり、とても健全とはいえません。

しかし、検索結果の上位には「広告を見せるためだけの内容のないサイト」が数多くランキングしている現状もあり、この状況下では広告ブロックを使用することが当然であるとも言えます。

根本的な問題は、閲覧者側の利便性が損なわれていることかもしれません。

広告ブロックを解除する警告を表示する前に自分のサイトの利便性をもう一度見直してみましょう。

閲覧者、運営者共にWin-Winになるようなサイト運営ができるように心がけたいと思った次第です。

誰でも分かるアダルトアフィリエイト5ステップ

ドメインを取得しよう
アダルトサイト運営用のレンタルサーバーを借りよう
ASPに登録しよう
アダルトサイトのメインコンテンツを何にするか
初心者でも分かるアダルトサイト作成方法