がとらぼ
INTAA.NET

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

認めん

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

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秒は普通にページが表示されてしまう。他のアンチ広告ブロックでもやっぱりページ読み込み時には普通に表示されるのが多いので大きな欠点ではないのかもしれない。なお、昨日の記事の方法だと、全ての方式の広告ブロックではないものの広告ブロック機能が有効なら最初から表示させたくない部分は表示されない。

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

関連記事:

某広告ブロックアプリを弄ぶ

adblock

何度か書いてるかもだけど個人的にはブラウザでウェブサイト閲覧の際に広告ブロック機能/アプリを使うこと自体は閲覧者の自由だと思っている。ただ気に喰わないのはその広告ブロックアプリで儲けようという奴ら。広告ブロックアプリを作って利用者に売りつけるだけならそれは正当だと思うけど、広告表示できるようにしてやるから金を出せ(金を出さなきゃ広告表示できなくしてやる)と広告出稿側を脅すのは誘拐犯のやり口。金を払った業者の広告は表示するというのでは結局はアプリ利用者も裏切っている。
あのアプリのことだけど。

今回はそういう話は置いといて、その某広告ブロックアプリを弄ぶ。

この「がとらぼ」は上に書いた某広告プロックアプリを有効にしていると一応表示できないことになっているので姉妹サイトの「悪いインターネット」の方にお遊びページを作ってみた。サンプルなので1ファイル完結。ソースは下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>悪いインターネット adblockで遊ぶ</title>
</head>
<body style="margin:5%;">
<h1>adblockで遊ぶ</h1>
<div id="contentA" style="margin-top:30px;">
<span class="ads-area">昨日、近所の吉野家行ったんです。吉野家。 
そしたらなんか人がめちゃくちゃいっぱいで座れないんです。 
で、よく見たらなんか垂れ幕下がってて、１５０円引き、とか書いてあるんです。 
もうね、アホかと。馬鹿かと。 
お前らな、１５０円引き如きで普段来てない吉野家に来てんじゃねーよ、ボケが。 
１５０円だよ、１５０円。 
なんか親子連れとかもいるし。一家４人で吉野家か。おめでてーな。 
よーしパパ特盛頼んじゃう</span>ぞー<span class="ads-area">、とか言ってるの。もう見てらんない。 
お前らな、１５０円やるからその席空けろと。 
吉野家ってのはな、もっと殺伐としてるべ</span>き<span class="ads-area">な</span>ん<span class="ads-area">だよ。 
Ｕの字テーブルの向かいに座った奴といつ喧嘩が始まってもおかしくない、 
刺すか刺されるか、そんな雰囲気がいいんじゃねーか。女子供は、すっこんでろ。 
で、やっと座れたかと思ったら、隣の奴が、</span>大盛つゆだく<span class="ads-area">で、とか言ってるんです。 
そこでまたぶち切れですよ。 </span></div>

<div id="contentB" class="ads-area" style="margin-bottom:30px;">
あのな、つゆだくなんてきょうび流行んねーんだよ。ボケが。 
得意げな顔して何が、つゆだくで、だ。 
お前は本当につゆだくを食いたいのかと問いたい。問い詰めたい。小１時間問い詰めたい。 
お前、つゆだくって言いたいだけちゃうんかと。 
吉野家通の俺から言わせてもらえば今、吉野家通の間での最新流行はやっぱり、ねぎだく、これだね。
大盛りねぎだくギョク。これが通の頼み方。 
ねぎだくってのはねぎが多めに入ってる。そん代わり肉が少なめ。これ。 
で、それに大盛りギョク（玉子）。これ最強。 
しかしこれを頼むと次から店員にマークされるという危険も伴う、諸刃の剣。 
素人にはお薦め出来ない。 
まあお前らド素人は、牛鮭定食でも食ってなさいってこった。</div>
<br /><br />
<script type="text/javascript">
<!--
  if (document.getElementById('contentB').style.display == 'none' ||
      document.getElementById('contentB').style.visibility == 'hidden' ||
      document.getElementById('contentB').clientWidth < 10 ||
      document.getElementById('contentB').clientHeight < 5
      )
  {
  document.write("<div style=\"margin-left:15%;\">まあお前らド素人は、雑巾でも食ってなさいってこった。</div>");
  }
// -->
</script>
<p>adblockをオン/オフしてブラウザの更新アイコンか[F5]を押してみましょう。</p>
<p><br /></p>
<p>このページはサンプルです。元の話は「がとらぼ」の「<a href="https://gato.intaa.net/archives/5931">某広告ブロックアプリを弄ぶ</a>」を参照のこと。</p>
</body>
</html>

コンテンツ自体は昔ネット界を一世風靡した吉野家コピペ。
某広告プロックアプリはadsとかads-areaといった文字列がclass名に指定されているのがお嫌いという有名な特性だけを利用した作りとなっている。

サンプルページのhttp://warui.intaa.net/contents/adblock/を開く。

adblock
某広告ブロックアプリが無効なら思わず牛丼屋に行きたくなるあの伝説のコピペが表示される。

adblock
某広告ブロックアプリを有効にする。
ページをリロードする。

adblock
コピペが消えて意味不明な文字列と、某広告ブロックアプリが無効な時には表示されていなかった「雑巾食え」という文が表示されている。

仕組み

コピペ前半部分はidがcontentAなdivタグが囲われていてこの中のspanタグで囲われている部分は広告ブロックオンだとclass名がads-areaなせいで広告部分だと判断されて表示されなくなる。囲われていない部分は消えずに残る。(なお、今回のcontentAというidは説明の為だけの無意味指定)
コピペ後半部分はidがcontentBなdivタグで囲われているがこのcontentBな部分は広告ブロックオンだとclassがads-areaなせいで全て消える。
最後のjavascript部分はidがcontentBなコピペ後半部分が非表示あるいは極端に小さく表示されていればメッセージを表示するというもの。

非常に簡単なものだけどページ表示に影響を与えない軽さ。簡易アンチ広告ブロックとしても使える。ちなみに現在「がとらぼ」ではこの方法を使っている。(以前使ってみたAntiblockは現在は使っていない)
もちろん、某広告ブロックアプリと同じ仕組みの広告ブロックにしか効かないので全然万能ではない。

真面目に「広告ブロックが有効になっているとコンテンツは閲覧できません。広告ブロックを無効にして下さい」みたいなメッセージを表示するというのでも良いが、広告ブロックを有効にしている人には一見普通に表示できるようでいながら全く内容や意味が違うコンテンツを表示するという遊びもできるのでどうぞ。

関連記事:
Up