勉強したことのメモ

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

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

   2023/08/09  JavaScript

普段何らかのサイトを見る際はAdBlock等の広告ブロッカー系プラグインを導入したブラウザで閲覧することが多い。その際稀に「広告ブロッカーを解除してください」みたいなアラートが表示されるサイトに出くわすことがある。どういった方法で検知しているか気になったので調査及び導入メモ。

 

BlockAdblock

BlockAdblockというJSプラグインがあり、こちらを利用することで簡単に導入できる模様。

尚、CDN版もあるので必要に応じて利用する。また、他のプラグインやツールを用いたい場合はこちらの記事が参考になりそう。

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
</head>
<body>

    <div class="adBlockAlert" style="display:none;">広告ブロッカーを解除してください。</div>
    <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blockadblock/3.2.1/blockadblock.min.js" integrity="sha512-EFY34xQ/AKRSb4EfjeRCO1TXnLuDQrYlo3BVId+DU8J4BiKUezCWK93bUlXTkEf4a8rMRroouaPXHnq/WTK4pA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        function adBlockDetected() {
            $(".adBlockAlert").show();
        }
        function adBlockNotDetected() {
            $(".adBlockAlert").hide();
        }
        if (typeof blockAdBlock === "undefined") {
            adBlockDetected();
        } else {
            blockAdBlock.onDetected(adBlockDetected);
            blockAdBlock.onNotDetected(adBlockNotDetected);
        }
    </script>

</body>
</html>

広告ブロッカーが検知された場合はclass="adBlockAlert"要素が表示されるので、該当部分をモーダルウィンドウで大きく表示する(他のコンテンツを見づらくする)等が使い道になりそう。

 

参考サイト

https://bicstone.me/block-adblock

 - JavaScript

  関連記事

JavaScriptにてHTML文字列をDOMノードに変換する方法

先日jQueryにて$.parseHTML()を用いてHTML文字列をDOMノー ...

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...

jquery.cookie.jsで「$.cookie is not a function」エラー

フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...

highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる

highcharts.jsで「棒グラフと折れ線グラフを入れる」「Y軸はそれぞれ違 ...

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...