BlockAdBlock を用いて広告ブロックを検知する

1. はじめに#

Adblock Plus に代表される広告ブロックによって，ユーザーは広告を非表示にすることができるようになりました。しかし，広告ブロックをよく思わない人たちによって広告ブロックを検知する手法が提案されています。本記事では，JavaScript 製の広告ブロック検知ライブラリである BlockAdBlock を用いて広告ブロックを検知する手順について記述します。

2. 環境構築#

環境構築は非常にシンプルです。blockadblock.js と以下の index.html を同一ディレクトリ上に配置します。

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>BlockAdBlock</title>
7
  </head>
8

9
  <body>
10
    <script src="./blockadblock.js"></script>
11
    <script>
12
      function adBlockNotDetected() {
13
        alert('AdBlock is not enabled')
14
      }
15
      function adBlockDetected() {
16
        alert('AdBlock is enabled')
17
      }
18
      if (typeof blockAdBlock === 'undefined') {
19
        adBlockDetected()
20
      } else {
21
        blockAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected)
22
      }
23
    </script>
24
  </body>
25
</html>

1
$ tree
2
.
3
├── blockadblock.js
4
└── index.html
5

6
0 directories, 2 files

3. 動作確認#

ローカルの index.html をブラウザで開くだけでは正常に動作しません。そこで，Netlify などのホスティングサービスにアップロードして動作確認する必要があります。本記事では，Python 3 の http.server を用いて動作確認します。

1
0 directories, 2 files
2
$ python3 -m http.server 8000
3
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Python 3 が出力したアドレスに任意のブラウザでアクセスします。広告ブロックの有無によってアラートの内容が変化すれば正常に動作しています。

4. カスタマイズ#

BlockAdBlockでは，setOption メソッドを用いることでオプションを変更することができ，様々なオプションが提供されています。オプションの詳細は README.md の Default options を参照してください。また，setOption メソッドや onDetected メソッド，onNotDetected メソッドの他にも，様々なメソッドが提供されています。メソッドの詳細は README.md の Method available を参照してください。

1
// (1)
2
blockAdBlock.setOption('checkOnLoad', false)
3
// (2)
4
blockAdBlock.setOption({
5
  debug: true,
6
  checkOnLoad: false,
7
  resetOnEnd: false,
8
})
9
// (1) と (2) のどちらでも記述可能

5. おわりに#

ここまで，JavaScript 製の広告ブロック検知ライブラリ BlockAdBlock の使い方について記述してきました。広告ブロックと広告ブロック検知はイタチごっこ状態なので，本記事で紹介した手法も対策される可能性はあります。そのため，BlockAdBlock の使用は自己責任でお願いします。