勉強したことのメモ

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 UI Datepickerで日本の祝祭日を表示
jQuery UI Datepickerで日本の祝祭日を表示

やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...

jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法
jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

簡単にtable内をソート
簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...

jQueryでimgタグのsrcを変える
jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...