広告ブロッカーを検知するJavascriptコード (Braveにも対応)

世の中では広告ブロッカーの利用が広がりつつあります。サイト運営者としては訪問者が広告ブロッカーを利用しているかどうかを検知したいという場面もあるのではないでしょうか。本記事は広告ブロッカーを利用しているかどうかをクライアント側で検知する方法を紹介します。ちょっと厄介者のBraveブラウザにも対応しています。

広告ブロッカーの検知

世の中には広告ブロッカーをの利用を検知するための専用のライブラリも存在するようですが、あまり凝ったものや実装の悪いものは広告ブロッカーの仕様変更の影響を受ける可能性があったり誤検知時の対応が難しかったりするという側面もあります。

私のおすすめは以下のように通信をできるかどうかの確認を自前で実装する方法です。

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

zenn.dev

つまりブロックされるであろう広告配信用のURLをfetchしエラーが返ったら広告ブロッカーを使っていると判断するということです。本記事の最終更新日時点で少なくともChromeのいくつかの広告ブロッカーで正常に検知できていることを確認済みです。またSafariやFirefoxなどプライバシー機能が強めのブラウザでも誤検知は起きていません。

しかし実はこの方法ではBraveブラウザによる広告ブロックは検知できません。おそらくfetch関数をカスタマイズするなどして、通信エラーが起きないようになっているのではないかと思われます。そこでBraveだけ別の方法を取ります。

Braveブラウザを検知する

まず、そもそもBraveブラウザを使っているかどうか自体を検知します。これは後述する処理によって他のブラウザの正常系動作に悪影響を与えないようにするための保険的措置です。Braveの検知はBrave自身がAPIを提供しておりそれで確実に検知できます。

const isBrave = navigator.brave && navigator.brave.isBrave();
if (typeof isBrave !== "undefined") {
  // TODO
}

ただし以下にある通りBrave自体をブロックするようなサイトはブラックリストに入れられてこのAPIが使えなくなるようです。

Detecting Brave (for Websites) · brave/brave-browser Wiki · GitHub

github.com

本記事で紹介している用途は他ブラウザへの悪影響を抑えるためですし、Brave自体をブロックするのではなくBraveによる広告ブロックを検知するという目的ですので、このAPIのブラックリストに入れられることはないと信じています。逆にこの使い方でもダメとなると、Braveとしては他ブラウザへの被害は知ったことではないし、本来対価を受け取るべきクリエイターからタダでコンテンツを窃取することを推奨する立場ということになってしまいます。さすがにそのような過激な立場ではないことを祈ります。

表示の確認による広告ブロッカーの検知

さてようやく本題です。ここではブラウザで最終的に広告のエリアが表示されたかどうか自体を確認し、されていない場合に広告ブロッカーを導入していると判断します。上記のBrave自体の検知を合わせて以下のようなコードにします。

// 指定したセレクタで取得した要素の高さを取得する
function getElementHeight(selector) {
  return new Promise((resolve) => {
    window.addEventListener("load", () => {
      const element = document.querySelector(selector);
      resolve(element.offsetHeight);
    });
  });
}

const isBrave = navigator.brave && navigator.brave.isBrave();
if (typeof isBrave !== "undefined") {
  const adsBlocked = await isBrave.then(async result => {
    if(result){
      // それぞれの環境に合わせて引数に渡すセレクタを書き換える必要あり
      const height = await getElementHeight("#sample-ad-element-id");
      if(height === 0){
        // 広告の表示領域の高さが0である
        return true;
      }
    }
    return false;
  });
}

広告の表示領域を囲むように専用のdiv要素などを入れることをお勧めします。Braveで広告ブロックされると本来の広告部分が display:none になるので、それを囲う領域のheightも0になります。少なくともGoogle Adsenseで確認済みですが、もしかしたら他では不具合があるかもしれません。何かあれば以下のコメントか問い合わせより教えていただけると助かります。

検知してどうするか

本記事の主題ではありませんが、広告ブロッカーの利用を検知した上でどうするかということも重要です。

ユーザーが広告ブロッカーを使うことは今のところ違法ではないですし、使う理由も人それぞれであり尊重されるべきものだと思います。なので、例えば広告ブロッカーを使っていることを検知した上で無理やり広告を見せるということは絶対にしないようにしましょう。

本サイトでは広告ブロッカーを検知したらページ自体を見せないようにするという処理を入れています。具体的にはDOMからコンテンツを削除した上でブロックの除外設定をするように依頼する文章を表示しています。後からクライアント側で削除するだけなのでJavascriptを止めるなどの方法で簡単に見えてしまうのですが、手間やバグのリスクを考えてそのようにしています。本格的にやるなら広告ブロッカーが無いとわかった後に改めてサーバーからコンテンツを取得するのがよいでしょう。

私は広告によって収益を得るサイトは「広告ブロッカーを使っているユーザーにはコンテンツを見せない」という取り組みをすることが、今のインターネットを守る上で必要だと考えています。なぜそう考えるのかについては以下に記事を書いているので、ご興味のある方はぜひこちらもお読みいただければと思います。

人類はWebを破壊する広告ブロッカーとどう共存するべきか｜らくだ

sizu.me

さいごに

本記事ではサイト訪問者が広告ブロッカーを使っているかどうかをクライアント側コードで検知する方法をご紹介しました。さらにBraveブラウザ専用の処理によって幅広い環境に対応できるようになっています。もし本記事のコードでうまく動作しない環境があればぜひコメントや問い合わせからご一報ください。