勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

adblock(広告削除)設定している場合はページを表示させない

   2024/04/17  jQuery

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでページを表示できません」というメッセージを出すサイトがあった。それまで知らなかったんだけどSleipnirにはadblock的な広告排除機能があるみたい。

そこで、どのような方法でadblock対策をしているのかが気になった。見てみたところ割とシンプルに対策できるみたい。以下がサンプルとソース。

 

BlockAdblockを使う方法(2023/08/09追記)

BlockAdblockというライブラリを使う方法を以下に追記。

ブラウザの広告ブロッカーを検知し、ブロックしている場合は何らかの処理を行う方法

 

サンプル

https://taitan916.info/sample/adblock/

 

ソース

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>広告ブロック対策のテスト</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
    setTimeout(function() {
        if ($('.adsense').find('span,iframe').is(':visible')) {
            $('block_message').hide();
        } else {
            $('.block_message').show();
            $('.contents').hide();
        }
    }, 1000);
});
</script>
</head>
<body>
    <div class="contents">
        body<br>
        body<br>
        body<br>
        body<br>
        body<br>
        body<br>
        body<br>
        body<br>
        body<br>
    </div>

    <div class="adsense">
        <!-- ここにアドセンスコード入れる -->
    </div>

    <div class="block_message" style="display:none;">
        広告がブロックされている為、コンテンツを表示できません。
    </div>

</body>
</html>

 

その他

classがadsens内のiframeを探して非表示状態であればコンテンツを非表示にし、警告文を表示させるというもの。あとは以下のようなスクリプトもあった。

antiblock.org

http://antiblock.org/

Downloadのリンクからソースを取得できる。ただ、PCでは正常に動いたけどiPhoneでは動かなかった。

 - jQuery

  関連記事

jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法

jQueryで指定した要素のposition(leftやtop) / width ...

formでdisplay:none;にしてても送信される
formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法

jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...

jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法
jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法

メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo. ...

オリジナルのjQueryプラグインを作成する方法
オリジナルのjQueryプラグインを作成する方法

オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...