anti-contentBlocker.js

last updated : Apr 13 2016

anti-contentBlocker.js は、AdBlock Plus などの広告ブロック機能拡張や iOS のコンテンツブロック機能が有効になっているかどうかを検知し、ユーザにそれらの機能をオフにすることを促す JavaScript です。

ページに Google AdSense など、JavaScriptで広告を表示するタイプの広告コードを記述している場合に適切に動作します。

コンテンツブロッカーを検知するしくみ

ページに Google AdSenseコードが設置されているならば、これを検知するのは非常に簡単です。

通常 AdSenseコードが正常に実行されると、いくつかの iframe 要素を、コードの <ins class="adsbygoogle"> 〜 </ins> 内に追加します。なので、

ページのロードが完了した時点で、AdSenseコードの場所にiframe要素が存在するかどうか

これをチェックしてやれば、ユーザが広告ブロック機能を使用しているかどうか、簡単に判別できそうですね。

すなわち、

class属性に 'adsbygoogle' が指定されている要素を監視してやって、

そこに iframe 要素が存在する = 広告コードが正常に実行された = 広告ブロックは機能していない
そこに iframe 要素が存在しない = 広告コードが実行されなかった = 広告ブロックが機能している

というわけです。

Google以外の広告プロバイダが配信する広告についても、JavaScriptで動的に広告コンテンツを流し込むような動作をするものであれば、ターゲットとして利用できると思います。

その場合は、監視する要素の class名を 'adsbygoogle' から別のものに変更する必要があるでしょう。

具体的には…

以下の HTMLコードは、Google AdSenseコードの例です。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adsense sample -->
<ins class="adsbygoogle"
		 style="display:inline-block;width:336px;height:280px"
		 data-ad-client="ca-pub-xxxxxxxxxxxx"
		 data-ad-slot="xxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

次に、こんな関数を用意します。

function detectBlocker( ){
	var ad = document.getElementsByClassName( 'adsbygoogle' );
	
	if( ad.length == 0 )return;  /* AdSenseコードがページ内に存在しない */
	
	if( !ad[0].getElementsByTagName('IFRAME').length ){
		/* AdSenseコードが実行されなかった */
		/* すなわち、アドブロックを検出したので何かする */
		doSomething();
	}	
}

class属性に 'adsbygoogle' が設定されている要素内に iframe 要素が存在するかどうかを調べるだけの関数です。

で、これを window.onload イベントが発火するタイミングで呼び出すだけ。

window.addEventListener('load', detectBlocker, false);

AdSenseコードが実行されていなければ（広告がブロックされていれば）、関数 doSomething() でお好みの処理（警告メッセージを表示したり、別のページに飛ばしたり、など）を実行します。

以上の点を踏まえて、実際に動作するスクリプトを作成してみました。

ダウンロード

anti-contentBlocker ver (最終更新：）

設置方法は anti-contentBlocker.jsの設置を参照してください。リンク先のページには anti-contentBlocker を仕込んであります。ブロッキング機能を有効にしてアクセスすれば、その動作を確認することができます。

動作について

広告がブロックされていることを検知すると、「ブロック機能を無効にしてください」という旨のメッセージを表示します。

メッセージは、閲覧者が何らかのアクション（マウス操作、キー操作、スクロール操作、画面タッチ）を行うと表示されます。いちおう「サーチエンジンのインデックスを汚さないように（= ページロード時に表示してしまうと、このメッセージの内容ごとインデックスされてしまうかも…）」という配慮なのですが、これが意味のあることなのかどうかは充分に検証していません。

メッセージダイアログ右上には、現在の（スクリプト呼び出し元の）ページの URL が表示されます。

「広告ブロック/コンテンツブロック機能をオフにするには」をクリックすると、各プラットフォーム（ PC / iOS / Android ）に対応した Howto を表示します。

「anti-contentBlocker について」は、今ご覧のこのページヘのリンクです。

ブラウザの言語設定が日本語（ja または ja-JP）の場合には日本語で、それ以外の場合には英語でメッセージが表示されます。ブロック機能を無効にしてページを再読み込みすれば、メッセージが表示されなくなります。

ウェブページへの設置については anti-contentBlocker.jsの設置も参照してください。