プログラム

広告ブロックしているユーザー対策

収益が損してませんか

広告ブロックしているユーザーには警告表示しよう！

WEBサイトの収益化にAdsenseなどの広告を利用されているサイトが多いと思います。またアフィリエイトも同様に広告バナーを掲載するケースが多いと思います。
こういった場合、サイト訪問したユーザーが広告ブロックのソフトやブラウザの拡張機能を利用していると収益を得ることができず機会損失となってしまいます。

そのため、広告ブロックしている場合はユーザーに警告などを表示し、広告ブロックをオフにしないとサイトのコンテンツを見れなくする、一部機能を利用できなくするといった方法が必要になります。これにより広告ブロックをオフにすることをユーザーに促します。

ここでは、JavaScriptを使用した比較的実装が容易な方法を説明します。
もし広告ブロックの対策をまだされていないサイト運営者の方がおられましたら、ぜひ参考にして導入してみてください。有料のサービスもありますが、下記のような方法でもある程度効果はありますのでお試しください。

広告ブロックの検出方法

広告ブロックを検出するために、JavaScriptを使って、特定の広告関連のスクリプトやHTML要素が読み込まれていないことをチェックします。以下のような手法があります。

(1)ダミーの広告要素を使う

広告ブロッカーは、特定のクラス名やID、URLなどで要素をブロックします。この特性を利用して、ダミーの広告要素を作成し、それがブロックされているかどうかをチェックする方法です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>広告ブロッカーの検出</title>
    <style>
        /* ダミー広告のスタイル */
        #ad-banner {
            width: 1px;
            height: 1px;
            position: absolute;
            left: -9999px; /* 画面に表示されないようにする */
        }
    </style>
</head>
<body>
    <!-- ダミーの広告バナー -->
    <div id="ad-banner" class="adsbygoogle">Dummy Ad</div>

    <!-- 警告表示用の要素 -->
    <div id="adblock-warning" style="display: none; color: red;">
        広告ブロックが検出されました。広告の表示を許可していただけると幸いです。
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // ダミー広告の要素を取得
            var adBanner = document.getElementById("ad-banner");

            // ダミー広告要素が表示されているかどうかをチェック
            if (adBanner && adBanner.offsetHeight === 0) {
                // 広告がブロックされていると判断し、警告を表示
                var warning = document.getElementById("adblock-warning");
                if (warning) {
                    warning.style.display = "block";
                }
            }
        });
    </script>
</body>
</html>

サンプルの流れです。

1.ダミー広告バナーの作成
<div id="ad-banner" class="adsbygoogle">Dummy Ad</div> のように、広告によく使われるクラス名（ここではadsbygoogle）やIDを付与して、広告に見せかけたダミーの要素を作成します。
この要素が広告ブロッカーによってブロックされていれば、JavaScriptで検出が可能です。

2.JavaScriptでの判定
DOMContentLoaded イベントでページが読み込まれた後に処理を行います。
document.getElementById("ad-banner") でダミーの広告要素を取得し、offsetHeightが0であるかをチェックします。広告ブロッカーが有効であれば、この要素が表示されなくなるので、その高さが0になります。

3.警告メッセージの表示
広告がブロックされていると判定された場合は、#adblock-warning のスタイルを変更して警告メッセージを表示します。

(2)外部スクリプトの読み込みをチェックする

広告ブロッカーは、特定のスクリプト（例えば、Google AdSenseのスクリプト）をブロックすることが多いです。この特徴を利用して、特定のスクリプトが読み込まれたかどうかをチェックすることで、広告ブロックの検出が可能です。


<script>
    document.addEventListener("DOMContentLoaded", function() {
        // 広告スクリプトの読み込みチェック用ダミー関数
        var adScriptLoaded = false;

        // Google AdSenseのスクリプトタグを作成
        var script = document.createElement("script");
        script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        script.async = true;
        script.onerror = function() {
            adScriptLoaded = false; // スクリプトが読み込まれなかった場合
            showAdBlockWarning();
        };
        script.onload = function() {
            adScriptLoaded = true; // スクリプトが正常に読み込まれた場合
        };
        document.head.appendChild(script);

        function showAdBlockWarning() {
            if (!adScriptLoaded) {
                var warning = document.createElement("div");
                warning.style.color = "red";
                warning.innerText = "広告ブロックが検出されました。広告の表示を許可してください。";
                document.body.appendChild(warning);
            }
        }
    });
</script>

サンプルの流れです。

1.Google AdSenseスクリプトの作成
<script> タグを作成し、Google AdSenseのスクリプトURLを指定しています。このスクリプトの読み込み状況を監視します。

2.スクリプトのエラー検出
script.onerror ハンドラを利用して、スクリプトの読み込みに失敗した場合（広告ブロッカーがスクリプトをブロックした場合）にフラグを設定し、広告ブロックが検出されたときの処理を行います。

3.警告メッセージの表示
スクリプトがブロックされたときには、警告メッセージを表示するための要素を動的に生成して、ページに追加しています。

まとめ

いかがでしょうか。
このようにJavaScriptで広告ブロックしているユーザーに警告を出すことができるようになります。
ただ注意が必要なのは、本当にブロックして困るのか、といった部分となります。
広告をブロックされても収益化のトリガーに影響がない場合は、広告ブロックをしない、頻度をさげるなどを行い、ユーザーが不快に感じることがないよう工夫が必要かもしれません。

とはいえJavaScriptで実装できますのでお試しください。

-プログラム
-