AdBlock が有効であることを判定する方法

最近、いくつかのサイトで「AdBlock を無効にしてください」というようなワーニングが出ることがあって、どうやって判定しているんだろうな～と思って調べてみた。

AdBlock の仕組み

正式名称は AdBlock Plus だが、このプラグインがどうやって広告を判定しているかというと原理は簡単で、id や class 属性に ad とかそれっぽい文字列を含んでいる要素を非表示にしているようなのだ。

BlockAdBlock というツールもあって、そのソースコードを見てみると、以下のようなクラス名の要素が AdBlock で非表示になる対象のクラス名のようだ。

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

試しに CodePen で「pub_300x250」というクラス名を付与した要素を作り、AdBlock を有効にして CodePen を見てみると、要素が非表示になっていた。非表示にする方法は DOM 操作などではないようで、開発者ツールで見ても display:none などは付与されていない。ブラウザネイティブで非表示にしているようであった。

AdBlock が有効な場合に通知を出す方法

さて、この「広告判定」を行う対象は id や class 属性だけでなく、link 要素で外部読込する CSS ファイルのファイル名も対象になっている。つまり、

<link rel="stylesheet" type="text/css" href="adspace.css">

こんな adspace.css といった名前の外部 CSS ファイルがあると、AdBlock が読み込みをブロックするのである。

これを利用して、adspace.css を読み込まないとページが正しく表示されなくなるようにサイト全体をスタイリングすれば、「AdBlock が有効な場合はサイトが閲覧できない」といったことが可能になる。

より具体的なソースコード

ということで、サイト全体を以下のようにコーディングしてみると良いだろう。

<div id="a-alert">
  AdBlock をオフにしてください。
  <!-- AdBlock が有効な時のみこの要素が表示される -->
</div>

<div class="adspace">
  この中にサイト全体の HTML を入れる。
  AdBlock が有効だと、クラス名で判定され非表示になる。
</div>

以下のように link 要素を書く。

<link rel="stylesheet" type="text/css" href="adspace.css">
<!-- AdBlock が有効だと、「adspace」というファイル名で判定してこのファイルを読み込まなくなる -->

adspace.css 内には以下のように書いておく。

/* 
 * AdBlock が有効だとこの CSS ファイルは読み込まれない
 * → 警告を書いた要素が非表示にならない
 */
#a-alert {
  display: none;
}

キモは外部 CSS ファイルの名前を AdBlock に引っかかるファイル名にすることだ。

Google AdSense が無効にされたことを判定する方法

Google AdSense の貼り付けコードは script 要素で構成されているが、実際に読み込むと該当箇所に iframe 要素を生成する。だが AdBlock が有効になっていると、iframe 要素が生成される前にブロックするので、HTML 中に iframe 要素が存在しなくなる。この挙動を利用して、以下のようなスクリプトを body 要素最下部にでも仕込んでおけば、AdBlock によって Google AdSense がブロックされたことを確認できる。

setTimeout(function() {
  if(document.getElementsByTagName('iframe').item(0) === null) {
    alert('Google AdSense がブロックされました');
  }
}, 100);

なお、ページ中に純粋に iframe 要素を書いている場合はそれがヒットしてしまうので、少し処理方法を変える必要がある。

そもそも AdBlock を無効にさせるべきかは悩みどころで、「わざわざ AdBlock を無効にしないと見られないページ」を初見の人がどれだけ見ようとしてくれるか、逆にユーザ離れに繋がりそうで微妙かも。とりあえず今回は AdBlock の仕組みと、AdBlock 対策の仕組みを勉強するため、ということで。

参考