AdBlockなどの広告ブロッカーを判定して他の広告を表示する

AdBlockなどの広告ブロッカーを判定して他の広告を表示する方法です。

このシステムを導入することで、サイトに対する印象が悪くなる可能性があります。しかし、私が運用しているサイトでは、広告ブロッカーを使用しているユーザーが20%を超えていました。収益化を目的としたサイトの場合、無視できない割合だと思います。

追記: 2017年1月5日に書き直しました。

広告 (下に続く)

広告ブロッカーを検知する仕組み

広告ブロッカーは指定のアドレス(例えばGoogle AdSenseのJavaScriptファイル)のアクセスを遮断する他、余計な空白を無くす目的で、例えば"adsbygoogle"というclass名がついたdivをまるごと消すといったこともしています。この仕組みを使用し、JavaScriptで"adsbygoogle"等のclass名がついたdivボックスを小さく作成し、広告ブロッカーによって消されたことを検知することによって広告ブロッカーを検知します。

広告 (下に続く)

広告ブロッカーを検知するライブラリを導入

広告ブロッカーを検出するライブラリはたくさんありますが、シンプルな仕組みの「BlockAdBlock」をおすすめします。

しかし、このままでは使用できません。当然広告ブロッカーサイドにもこのライブラリが知られており、このライブラリを検出してブロックするというイタチごっこが起きています。そこでblockadblock.jsを一部書き換えます。

15行目の

baitClass: 'pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links',

は、前述した小さいdivにつけられるclass名です。このclass名をさらに追加します。

例えば、次のようにします。思いつけば色々追加してみてください。増やせば増やすほど広告ブロッカーに引っかかりやすくなります。非表示にするのは広告ブロッカーだけなので「誤検出」は発生しませんのでご安心ください。

baitClass: 'pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links ad- ad_ _ad_ ads- -ads- ads_ _ads_ -ads- _ads_ ad ads koukoku blog_ad blog-ad ad-blog ad_blog blogroll adsbygoogle',

ライブラリを動作させる

次のコードを挿入します。広告ブロッカー検知時に表示するclass名をxxxとしていますが、この名称は任意です。ただし、広告ブロッカーがブロックしそうな名称または前章に定義した名称にすると非表示になってしまいます。

<script type="text/javascript" src="blockadblock.js"></script>
<script type="text/javascript" "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="xxx" style="display:none;">
(広告ブロッカー検知時広告)
</div>
<script>
function adBlockDetected() {
 /*広告ブロッカー検知時の動作*/
 jQuery('.xxx').show();
}
function adBlockNotDetected() {
 /*広告ブロッカー未検知時の動作*/
 jQuery('.xxx').hide();
}
if(typeof blockAdBlock === 'undefined') {
 /*blockadblock.jsが読み込めない場合は広告ブロッカー検知扱い*/
 adBlockDetected();
} else {
 /*広告ブロッカー検知*/
 blockAdBlock.onDetected(adBlockDetected);
 /*広告ブロッカー未検知*/
 blockAdBlock.onNotDetected(adBlockNotDetected);
}
</script>

広告ブロッカーが始動していればclass名xxxのdivが表示されます。広告ブロッカーが発動していなければxxxのdivは非表示になります。

class名xxxをつけたdiv内に広告ブロッカーに引っかからないような広告を設置することで広告ブロッカーを回避した広告掲載が可能です。

尚、念のためJavaScript無効ユーザーに向けてclass名xxxのdivはstyle="display:none;"を追加してデフォルトでは非表示にしています。

広告 (下に続く)

広告ブロッカーを回避した広告

最後に広告ブロッカーを回避できる広告について紹介します。Google AdSenseのようなJavaScriptを読み込む動的なものはブロックされてしまう可能性が高いので不可能です。自分のサイトに設置した画像と自分のサイトへのリンク(リダイレクトを使用するのもあり)広告がベストです。つまり、他の記事への誘導やおすすめアプリの紹介といったものが適していると考えられます。

シェアする