WordPressでAdBlockなどコンテンツブロッカーを検知する

By | 2016年9月2日

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が無くなることがあります。そのため、状況によってはまれに誤動作を起こす可能性があります。

より完璧な動作を目指すのであれば、プラグインを導入することをお勧めします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*