はじめに

web広告は、無料でウェブサービスを運営するために不可欠な財源です。しかし近年、過剰な広告表示によるユーザ体験の悪化を背景に、多くのユーザが AdBlock拡張機能 や広告ブロック機能付きブラウザを利用するようになりました(参考)。

その結果、広告収益に依存するウェブサイトにとっては 収益減少のリスク が高まり、運営を持続させる上で AdBlockの検知と適切な対処 が重要になりつつあります。

本記事では、Reactプロジェクトで実際に試した AdBlock検知の手法と、検知後のUI実装 について整理します。

AdBlockの仕組みをざっくり整理

広告ブロッカーにはいくつかの方式があります(参考)。

DNSフィルタリング：広告配信ドメイン自体への通信を遮断
URLフィルタリング：特定のスクリプトやリソースのURLをブロック
コンテンツフィルタリング / CSSインジェクション：広告要素を検出し、削除または非表示にする
JSインジェクション：広告スクリプトの実行を阻止

そのため「検知」するには、要素の非表示状態やリクエストエラーを利用するのが一般的です。

Reactでの検知方法

1. リクエスト方式

既知の広告スクリプトを fetch() し、失敗すればAdBlock動作中と判断(参考)。

const [adBlockDetectedFromFetch, setAdBlockDetectedFromFetch] =
    useState(false);

useEffect(() => {
    fetch(
        "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
        {
            method: "HEAD",
            mode: "no-cors",
            cache: "no-store",
        },
    )
        .then()
        .catch((_) => {
            console.log(
                "Cannot load adsbygoogle.js. Adblock may be active. ",
            );
            setAdBlockDetectedFromFetch(true);
        });
}, []);

2. 要素の表示状態検知

広告要素のスタイルが上書きされていないかを確認する手法。

function useElementVisibility(selector: string) {
    const [isPresent, setIsPresent] = useState(false);
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        const checkElement = () => {
            //要素の存在を確認
            const el = document.querySelector(selector) as HTMLElement | null;
            setIsPresent(!!el);

            if (el) {
                //要素が存在するなら、そのスタイルを確認
                const style = window.getComputedStyle(el);
                const rect = el.getBoundingClientRect();

                const visible =
                    style.display !== "none" &&
                    style.visibility !== "hidden" &&
                    parseFloat(style.opacity) > 0 &&
                    rect.width > 0 &&
                    rect.height > 0;

                setIsVisible(visible);
            } else {
                setIsVisible(false);
            }
        };

        // 初回チェック
        checkElement();

        // MutationObserverでDOM改変を監視
        const observer = new MutationObserver(checkElement);
        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true, // style や class 変更も検知
        });

        // IntersectionObserverで実表示を監視
        let intersectionObserver: IntersectionObserver | null = null;
        const target = document.querySelector(selector);
        if (target) {
            intersectionObserver = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (entry.target === target) {
                        setIsVisible(entry.isIntersecting);
                    }
                });
            });
            intersectionObserver.observe(target);
        }

        // resize / scroll / visibilitychange でも再チェック
        window.addEventListener("resize", checkElement);
        window.addEventListener("scroll", checkElement);
        document.addEventListener("visibilitychange", checkElement);

        return () => {
            observer.disconnect();
            if (intersectionObserver) intersectionObserver.disconnect();
            window.removeEventListener("resize", checkElement);
            window.removeEventListener("scroll", checkElement);
            document.removeEventListener("visibilitychange", checkElement);
        };
    }, [selector]);

    return { isPresent, isVisible };
}

3. ライブラリ利用

adblock-detect-react のようなライブラリを利用する手もありますが、ブロッカー側に検知されやすいため、自作判定との併用 が安全です。

実際に検証した環境

主要なAdBlock環境での検知性能を検証しました。

AdBlock組み込み型ブラウザ
- Brave
- Vivaldi
Chrome拡張
- AdBlock
- uBlock Origin
- AdGuard
- Ghostery
- Privacy Badger
- AdBlock Plus
- AdBlocker Ultimate
Firefox拡張
- AdBlock for Firefox
- Adlock
Safari拡張
- AdGuard for Safari

紹介した3つの方法はそれぞれ検知できない環境がありましたが、組み合わせることで上記の環境全てで検知に成功しました(2025.08現在)

検知後のUI設計

AdBlockを検知した後の表示には以下のようなものがあります。

モーダル表示

全画面を覆うモーダルで「AdBlockを解除してください」と表示する方式。

確実に目に入りますが、ユーザ離脱のリスクも大きいため、利用は慎重に。

バナー表示

ページ上部や広告枠部分に「このサイトは広告収益で運営しています」と表示。

一度は目に入るが、ユーザ体験を阻害しにくいのがメリット。

{blocked && (
  <div className="fixed bottom-0 w-full bg-yellow-200 p-3 text-center shadow-md">
    🚫 AdBlockが有効です。このサイトをサポートするため広告解除をご検討ください。
  </div>
)}

公式機能の活用

Google Adsense には公式に「AdBlock検知・通知機能」が存在します。

可能であればまずは公式手段を活用するのが安全です。

検証環境の構築

多くのweb開発において、本番環境にデプロイする前にローカルで検証することが多いと思います。しかしながら、Google広告、たとえばGoogle Adsenseはそのままだと登録済みのURLにしか広告を配信してくれません。そこで、ローカル環境で広告を検証するには以下の準備が必要になります。ここではGoogle Adsenseでの方法を書きます.

/etc/hostsを編集し、localhostのaliasとしてdev.<本番環境ドメイン>.comを追加する。
Adsenseのタグにdata-adtest="on"を追加する。これによって収益に反映されないテスト用広告が配信されます。

<ins 
  className="adsbygoogle"
  data-ad-client={登録済みのクライアントID}
  data-ad-slot={登録済みのAD SLOT}
  data-ad-format="auto"
  data-adtest="on" // <- これ！
/>

参考

ユーザ体験を損なわない工夫

強制ブロックは避ける

YouTubeのような「広告ブロック解除 or Premium必須」方式は、巨大で多くのユーザが依存しているサービスでない限りユーザ離脱を招き逆効果になるかもしれません。
1度だけ訴求する

モーダルのような画面占有率の高いメッセージを何度も出すのは不快要因になりやすいため、CookieやLocalStorageで制御(参考)
透明性の確保

「広告収益で運営しているためご協力ください」と伝える方が、ユーザ理解を得やすい。

今後の展望

サーバーサイド広告挿入（SSAI）：動画配信で広がる技術。クライアントでのブロックは困難。
Acceptable Ads対応：AdBlock Plusなど一部は「許容可能な広告」枠を用意しており、規格準拠すれば表示される可能性もある。
課金・寄付モデルとの併用：The Guardian やニコニコ動画のように、広告以外の収益源を提示するのも重要。

まとめ

AdBlockはユーザにとって利便性がある一方、サイト運営にとっては死活問題。
Reactでは、要素の表示状態チェック方式・リクエスト方式・ライブラリ利用を組み合わせることで多くの環境で検知が可能。
検知後は、モーダルよりもバナー、強制よりも依頼 の方がユーザ体験を損なわない。
公式機能やサーバーサイド手法、寄付モデルなども検討できる。

Discussion