広告表示を消すアプリや拡張機能が有効になっているかの条件分岐を簡単に行う FuckAdBlock プラグイン

iOS 9 に標準搭載されることになったアドブロック機能を受け、これから徐々に周知され利用する人が増え広告が殆ど見られないようになるのではないかと危惧するWEB運営者は多いのではないでしょうか？

そもそも広告を非表示にする人に広告を表示させても、クリックしないし意味が無いという意見もあったり、確かにそういう傾向にはあると思いますが、クリックしなくても頭に残るものとか潜在的な意識に働きかけることもあるかと思います。

それに、広告運営で成り立っているWEBサイトでは広告収入ありきなので広告見てくれない人は排除してしまったほうが、わずかながらサーバーへの負荷も減ってコストの削減も出来るかも？と思ったりもしますので、今回紹介する FuckAdBlock というjavascriptプラグインが役に立つのではないかと思います。

また、FacebookやTwitterといったSNS系は人が人を呼ぶというのが強いのでそういったところはなかなかアドブロック返しとかは実装しにくいだろうなと思います。逆にほとんどGoogle検索とダイレクトです、と言う場合は思い切ってアドブロックを使っている人をブロックするというのを入れてみても良いかもしれないですね

FuckAdBlock

https://github.com/sitexw/FuckAdBlock

この FuckAdBlock は、簡単に条件分岐を出来るようにしてくれるプラグインです。あとはこの条件を元にコンテンツをCSSで非表示にしたり、もっと複雑には ajax を使ってコンテンツの読み込み自体をさせないなんて事もできるかと思います。

必要なファイルは fuckadblock.js のみです。

FuckAdBlockの使い方

fuckadblock.jsを読み込む

<script src="fuckadblock.js"></script>

fuckadblock で条件分岐をする

<script>
if(typeof fuckAdBlock === 'undefined') {
  //アドブロックが有効の時の処理
  $("h1").text("広告がブロックされています");
} else {
  //アドブロックが無効の時の処理
  $("h1").text("ようこそ");
}
</script>

基本的にこの2STEPで終わりです、jQueryと組み合わせて使うことも出来ます、上記のコードではjQueryを使って有効無効をh1タグに文字で表示させています

DEMO 表示

DEMOのコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
  <title>fuckadblock</title>
</head>
<body>
  <h1></h1>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="fuckadblock.js"></script>
<script>
if(typeof fuckAdBlock === 'undefined') {
  //アドブロックが有効の時の処理
  $("h1").text("広告がブロックされています");
} else {
  //アドブロックが無効の時の処理
  $("h1").text("ようこそ");
}
</script>
</body>
</html>