jQueryとJavaScriptで広告ブロック中の閲覧者へ簡単に非表示にできる警告を表示する方法|WordPress対応

jQueryとJavaScriptで広告ブロック中の閲覧者へ簡単に非表示にできる警告を表示する方法|WordPress対応
jQueryとJavaScriptで広告ブロック中の閲覧者へ簡単に非表示にできる警告を表示する方法|WordPress対応

 

 
読了目安:75

Are you want to translate this page to English? Please click this link to translate via ‘©Google Translate'!

ganohr.net favicon

みなさんこんにちは、ガノー(Twitter:Ganohr)です。

当サイトは有料のレンタルサーバーを用いて運営しているため、広告収入により運営費が捻出できるか否かは、サイト運営において重要です。

 

いわゆる広告ブロッカーは、しかし、必要な局面も非常に多いといえます。なぜなら、世の中の多くのウェブサイトが、何らかのスパムを配信しているからです。

例えばGoogle傘下のブログサービスである「Blogspot」(Blogger)は、実に全体の75%がスパムサイト(スプログといいます)であると指摘されているのです。

サムネイル日本の #Minecraft ブロガーへ警告! blogspot.com経由のコンテンツ不正利用が横行中!最近マインクラフトの情報を発信するブログから、海外(特に中国・東南アジア)の運営者が、画像や本文・タイトルなどを不正にコピーしスパムを配信する行為(スプログ配信)が横行している。今回はその告発と対策方法を公開する ... 続きを読むganohr.net2019-12-06 サムネイルGoogleはブログスポットのスパムを即刻排除すべき。またはSpammerへ改名せよBloggerは無料でありながら簡単に収益化できるため、一般利用者よりもスパマーに愛用される。BlogSpotの75%のブログはスパムであると言われるが、Googleはその現状を改善しようとしない。この記事は実際に当サイトの被害状況を告発する ... 続きを読むganohr.net2019-12-17

 

こうしたスプログなどの悪質なウェブサイトから、閲覧者を守るという観点に立つと、広告ブロッカーを利用することは推奨されるべきといえます。

しかし、実際に広告ブロッカーの利用者は「特に知識などはなく、ただ広告と聞くと嫌悪感があるから、何も考えずにブロックしてる」というのが大多数です。

 

当サイトはある程度ネットリテラシーがある方や、道理の通った説明をすれば納得できる方に向けて情報を発信しています。

したがって、「ただ広告と聞くと嫌悪感があるから、何も考えずにブロックする」ような方々に対して、警告を表示することとしました。

 

その際に「WordPress」の最新版に対応しているプラグインが少なく、またPHP8で正しく動作するプラグインが少なかったため、以下の条件を満たす機能を、独自実装することとしました。

今回実装する広告ブロッカー・ディテクターの機能

  • WordPress最新版の6.1.1で動作すること
  • PHP8系で正しく動作すること
  • 閲覧者が簡単にダイアログを非表示にできること
更新履歴
2023/01/15 広告ブロッカーの現行の仕様に合わせて更新
2022/11/26 Amazon画像広告のブロックをより高精度に検出できるよう更新
2022/11/26 Amazon画像広告がブロックされたとことを検出するコードがバグってたので更新
2022/11/24 実際に広告を検出するコードを掲示。残りのすべての内容を公開
2022/11/23 jQuery遅延ロード時の待ち処理とモーダルダイアログのコードを公開
2022/11/22 広告ブロック検出時の留意点を執筆
2022/11/21 公開開始
目次

技術仕様:広告ブロッカーを利用していることをどうやって検出するのか?

無数のステッカーが足の踏み場もないほどに重なり散らばっている写真
広告ブロッカーの利用を検出するには、ウェブサイトで想定している広告の量に対して実際に呼び出せている広告の件数を把握することで実現できる

広告ブロッカーの利用を検出することは、技術的には簡単です。

なぜなら、広告ブロッカーの動作は概ね以下に示す挙動を行うためです。

広告ブロッカーが広告をブロックする手段

  1. 広告を配信するためのタグを削除する
  2. 広告を配信しているドメインへの接続をブロックする
  3. 広告タグの高さや横幅を0や小さい値にする

広告ブロッカーの広告ブロック方法1:広告を配信するためのタグを削除する

広告ブロッカーの多くは、閲覧するウェブサイトから「広告を表示するために設置されているHTMLタグを削除する」ことで広告のブロックを実現します。

したがって「設定している広告タグが除去されているか?」を確認することで、広告ブロッカーの存在を検出できます。

 

広告ブロッカーの広告ブロック方法2:広告を配信しているドメインへの接続をブロックする

または、「広告タグが接続するドメインを予めリストアップしておき、そのドメインへの接続をブロックする」ことで広告をブロックします。

これら「広告ブロック方法1・2」が、広告ブロッカーの主な手段です。

 

したがって、この検出には「広告タグのimgタグやiframeにてエラーが発生したか否か」を確認することで、広告ブロッカーの存在を検出できます。

広告タグの高さや横幅を0や小さい値にする

あまり例は多くありませんが、自動的に独自のCSSやJavaScriptを追加して、広告タグの高さや横幅(または両方)を、「サイズ0」(または小さな値)にすることで非表示することがあります。

最近のブラウザは「高さや横幅が0の要素は読み込まない」という仕様になっているため、たったこれだけで広告をブロックできます。

特殊な広告ブロッカーでは、内部の広告タグは除去するが、高さは0ではなく小さな値にするものもあります。

 

したがって、この検出には「広告タグの横幅や縦幅が特定値以下になっていないか?」を確認することで、広告ブロッカーの存在を検出できます。

この記事では、高さ40未満の要素は広告ブロッカーにより高さが制限されたものとして認識します。

WordPressの不具合対応/カスタマイズ¥15,000~

PC歴25年超、SE歴10年超、WordPress運営歴7年超、WordPressエンジニア歴5年超のスキルとノウハウを提供します

当サイト管理人の「ガノー」(Ganohr)は、日本最大手且つ東証一部上場企業が運営するクラウドソーシングサイト『Lancers』にて、認定ランサーとして活動しています。


※ 認定ランサーとはLancersにより様々な能力 ( 高い仕事遂行率・高い顧客満足度・多くの実績、など ) を評価したプロフェッショナルを認定する制度です。

 

JavaScriptカテゴリの最新記事