目から鱗のアンチ広告ブロック

認めん

昨日の記事を書いた後に他所様の広告ブロック検知方法を検索していたら、まさにタイトルとおりの目から鱗なコードを見つけた。

https://ctrlq.org/code/19818-detect-adblock-javascript ここの記事の3番。

広告ブロック検知部分はそのままで検知したときにやりたいことだけ改変してこんな感じにする。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<script type="text/javascript">
<!--
  window.onload = function() {
    setTimeout(function() {
      var ad = document.querySelector("ins.adsbygoogle");
      if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
        //したいことを書く ここから
        document.getElementById('primary').style.display = "none";
        document.getElementById('message').style.display = "block";
        //したいことを書く ここまで
      }
    }, 2000);
  };
// -->
</script>

上の例では広告ブロックの検知対象はGoogle AdSenseの広告だけど少し変えるだけで他の広告にも対応できる。
7行目から10行目の間に広告ブロックを検知した場合にやりたいことを書くが、このjavescriptはページを表示し終わってから実行するものなので更にdocument.writeなどで表示する文字列を追加しようとすると表示がおかしくなる(白紙に追加したつもりの文字列が表示される)ので注意。
たとえばページ内に <div id="primary" class="…">...コンテンツエリア...</div> というのがあるとして、 広告をブロックしていることを検知したらそのprimary IDが付いているタグ(で囲われている範囲)を非表示にするのが8行目。
反対に通常は非表示の <h2 id="message" style="display:none;">メッセージ</h2> があるとして、広告が表示されていなければそれを表示するというのが9行目。(このh2タグはページのフッタ辺りにでも埋め込んであるとする。)
もちろん元ネタサイトの例のようにinnerHTMLで書き換えるというのもあり。

この方式の凄いところはたった2行しかない検知部分。
「広告が正しく読み込めなかったら」という原理は私のような素人でも思いつくが、実際に機能するコードがどうしても自分では作れなかった。
しかも、ページ内のコードを見るような代表的な広告ブロックアプリはもちろん、普通のアンチ広告ブロックでは検知しにくいhostsファイルを使った広告ブロック？にも対応できる。
ただし、ページを読み込み終わってから動作する仕組みなので読み込み終わりまでの1,2秒は普通にページが表示されてしまう。他のアンチ広告ブロックでもやっぱりページ読み込み時には普通に表示されるのが多いので大きな欠点ではないのかもしれない。なお、昨日の記事の方法だと、全ての方式の広告ブロックではないものの広告ブロック機能が有効なら最初から表示させたくない部分は表示されない。

この記事に興味があった人にはこの記事の続編続・目から鱗のアンチ広告ブロックをオススメ。

関連記事: