広告ブロックを高精度で検出する手法

広告ブロックを検出うする方法として「ニセの広告要素をHTMLに挿入する」ことが挙げられますが、イタチごっこ状態だったりユーザースクリプトで回避される手段が用意されていたりと不十分。

そこで、海外コミュニティ等でより有効とされている手法が以下です。

1. Adsenseスクリプトをfetch
2. アドブロッカーがadsbygoogle.jsを検知し読み込みを阻止
3. fetchのエラーハンドリングでnet::ERR_BLOCKED_BY_CLIENTでブロック行為を検知

コードにすると以下の通り。実際はイベントリスナーで読み込み時などに適宜実行します。

function detectAdBlock() {
    fetch("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", {
        method: "HEAD",
        mode: "no-cors",
        cache: "no-store"
    })
    .then()
    .catch(err => {
        // TO DO
	}
    )
}

ここで重要なのがfetchの引数オプションにmethod: "HEAD"を付与すること。アドブロッカーはリクエスト内容をチェックするのでレスポンスボディを要求しないようにします。（広告スクリプトもかなり重いので）

ロード時間も1msほどなので、ニセ要素の手法と比較してもスマートじゃないでしょうか。通信を丸ごとチェックするのでDNSフィルタリングも検知できます。

まあ使徒は限られますし程々に。