Table of Contents
Safariのコンテンツブロッカーやブラウザ拡張のAdBlockなどが使用されているかをチェックして、その有無に応じて処理を行う方法です。
WordPressにはコンテンツブロッカーを検知するためのプラグインがありますが、今回はそれを使用しない最も簡単に実装できる方法を紹介します。
設定方法
外観 > テーマの編集 を開き、フッターテーマ（footer.php）の編集画面を開きます。
footer.php の一番下には body と html の閉じタグがあるので、その間に以下のようなjavascriptを設定します。
...(省略)...
</body>
<script>
window.onload = function() {
// 広告表示部分のクラス名
var adName = "adsbygoogle";
// 広告表示要素
var targetAd = document.getElementsByClassName(adName);
if (!targetAd.length) {
// 広告表示要素がページ内に存在しないなら処理を中断
return;
}
if (!targetAd[0].getElementsByTagName('iframe').length) {
// アドブロック検出
// ここにコンテンツブロックされた時に行いたい処理を書く
console.log("ブロックされた");
}
};
</script>
</html>
今回は Google Adsense の広告を対象とするブロッカーのチェックを行っています。
別の広告がブロックされていることを検知したい場合は、変数 adName を変更します。
検知の原理
多くの広告はiframeをページに埋め込み、その中にバナーなどを挿入します。しかし、コンテンツブロッカーが働くと、このiframeがページ内から除去されます。
したがって、広告を表示する部分のタグのclass属性に値を設定しておき、その値を持つタグの中にiframeが存在しているかを確かめると、広告表示がブロックされたかどうかを調べられます。iframeが無くなっていればコンテンツブロッカーが働いていると判断できます。
しかし、通信状態の関係でページの一部読み込みが上手く行かないようなときも、iframeが無くなることがあります。そのため、状況によってはまれに誤動作を起こす可能性があります。
より完璧な動作を目指すのであれば、プラグインを導入することをお勧めします。