freefielder.jp

サイト制作者側が、ユーザがブラウザの広告ブロック機能を有効にしてアクセスしてきているのかどうか、こういう単純な方法でチェックしてはダメなのか。

AdBlock Plus 機能拡張や iOS のコンテンツブロック機能などは、広告を表示する外部 JavaScript コードがページに読み込まれるのをブロックする…という振る舞いをします。

ならば。

JavaScript を利用してコンテンツを表示するタイプの広告に対して「当該コードが正常に実行されたかどうか」を吟味してやれば、それだけで広告ブロック機能の検出について充分なのではないかな。

例えばページに Google AdSense コードを設置しているならば、

• Google AdSenseコードは、スクリプトが正常に実行された場合、通常 <ins class="adsbygoogle"> 〜 </ins> という空要素内に iframe 要素や ins 要素を付加する。
• なので、ページのロードが完了した時点で、
  1. class属性に "adsbygoogle" を持つ要素を取得して、
  2. その要素が、子要素に iframe 要素を持つかどうかを調べる。
• その結果を見て、
  • ifame要素が見つかった = 広告コードが正常に実行された = ユーザは広告ブロック機能を使っていない
  • 見つからなかった = 広告コードが実行されていない = ユーザは広告ブロック機能を使っている
  と判断する。

つまり、下記のような関数をつくっておいて、

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

で、これを window の onload イベント発火時（ページ読込完了時）に呼んでやれば、

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

…と、これだけで、広告 / コンテンツブロックが有効かどうかを検知して、ブロックを有効にしているユーザに対して何かする、という JavaScript コードの出来上がり。

どうにもシンプルすぎるけれど、なにか問題でも?

というわけで、AdBlocker 対策スクリプトをつくってみた。

• → anti-contentBlocker.js | freefielder.jp
  ※ 上記リンク先のページでは、このスクリプトをオフにしています。
  実動しているサンプルは こちらのページ でどうぞ。AdBlock機能を有効にしてアクセスしてみてください。

広告ブロックが有効になっていることを検知すると、ページ全面に以下のようなメッセージを表示して、記事を読みづらくします。

スクリプトに関する詳しい説明は、以下からどうぞ。

• anti-contentBlocker.js | 広告ブロックをブロック - freefielder.jp
• anti-contentBlocker.js | 設置方法 - freefielder.jp

とりあえず、うちのサイトの幾つかのページに設置して様子を見ています。スクリプトの動作確認と、「広告ブロックをブロックする」ことが、ウェブ制作者にとって本当に必要なものなのかを見極めるためです。

ということで、よろしくどうぞ。

関連記事

• VS Codeの "PHP" 拡張機能がお節介すぎるので設定変更。
• 【JavaScript】要素が可視領域に入ったらフェードイン。
• Canonのプリンタ・MG6230、遂に逝く。
• Motorola Edge 20にAndroid 13が来た。表示フォントを従来のものに戻す。
• 【Linux Mint】OSのダークモード設定がウェブページに反映されないのを直す。
• ウェブページをダークモード対応にする。
• カレンダーアプリが、もう存在しない .ics ファイルに延々とアクセスし続ける。サーバ側でなんとかしたい。
• Mastodonのタイムラインをウェブページに埋め込む。
• ウェブページにキーボード・ショートカットを追加するJavaScript、shortcut.js。
• Motorola Edge 20をAndroid 12にアップデート。ロック画面の巨大時計が気に障るが、SIMの切り替えは楽になる。