ブラウザの広告ブロッカーを検知し、ブロックしている場合は何らかの処理を行う方法
2023/08/09
普段何らかのサイトを見る際は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"要素が表示されるので、該当部分をモーダルウィンドウで大きく表示する(他のコンテンツを見づらくする)等が使い道になりそう。
参考サイト
関連記事
-
-
jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法
ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...
-
-
JavaScriptでデバッグ時にconsole.log以外のメソッドを利用する方法
JavaScriptでデバッグ時は基本的にconsole.logを使って配列やオ ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法
サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
「display: block !important;」指定された要素をjQueryで非表示にする方法
jQueryで特定の要素を非表示にしたかったのでhide()を使用したところ非表 ...