ブラウザの広告ブロックを検出してサイトのコンテンツをブロックするJavaScriptプログラム

今年の二月からアドセンスの収益化の方式がサイト広告のクリック課金からインプレッション課金に変更された。これにより、広告ブロックのブラウザが多くのサイトで、直接、減益を齎すようになっている。つまりサイト広告を表示しないことはアドセンスを始めとしたインプレッション課金の収益化を妨害していることに他ならない。理想的にいえば社会はベーシックインカムへ移行するべきだし、そうやって皆の生活費が保障されればサイト広告も本当に必要ではなくなるけれども政治が非常に遅れている。日本は不労生活の実験すらもせず、一体、何をやっているのだろう。いつかサイト広告を付けたい人と消したい人がどちらも何の不利益もなく、共存できるビーバーの湿地帯のような素晴らしい社会が実現されるまではサイトの収益化に纏わる問題を面倒でも避けることはできない。昨今、僕のブログの減収は酷いもので、最大の原因はGoogleの個人サイト潰しによるアクセス減少以外の何物でもないけど、しかしアドセンスの仕様変更で広告ブロックのブラウザの影響も多少は出て来るに違いないから何とかしなくては行けないと思う。調べてみたらJavaScriptで広告ブロックを検出する方法が見付かったので、それを使ってコンテンツをブロックする方法も併せて紹介する。fetch()メソッドでブラウザの広告ブロックを検出することができる多くのブラウザの画面が集まっていてその中の幾つかに広告が表示されている

ブラウザの広告ブロックはどのようなものか。色んな方法があるかも知れないけれどもサイト広告のURLを読み込まないことによって消していることが多い。アドセンスもそうだけれどもscriptタグのsrc属性の値を無効化されるとサイト広告は出ない。なのでブラウザがサイト広告のURLを読み込んでいるかどうかをチェックすることによって広告ブロックが行われているかとうかを知ることができる。JavaScriptではURLに対してfetch()メソッドを使うと読み込みの成否を判別できる。URLの読み込みで広告ブロックを検出するソースコードJavaScript

(async function() {
await fetch("サイト広告のURL", {
method: "HEAD"}).catch(err => {
広告ブロックへの対応プログラム}); })();

帯文字のところにサイト広告のURLを入れる。普通、サイト広告のURLはサイト広告のソースコードのsrc属性の値になっている。アドセンスの場合

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-十六桁の数字" crossorigin="anonymous"></script>

太字の部分がアドセンスのサイト広告のURLになる。昔は「https」から「.js」までしかなかった。その後のパラメーターは利用者によって異なる。ブラウザの広告ブロックを検出するだけならばパラメーターは必要なく、ドメインだけで事足りるので、パラメーターは省略しても構わない。サイトで広告ブロックの検出のソースコードを使うときはHTML編集でscriptタグに入れて記載する。HTML

<script>
広告ブロックの検出のソースコード
</script>

記載する場所はサイトの表示速度などのパフォーマンスを考えれば一番最後のbodyの閉じタグの直前で良いかも知れないし、広告ブロックへの対応プログラムでサイト内容を変更する場合はその後に記載しないと動かない可能性がある。コンテンツのブロックの遅れが気がかりな場合はサイトのソースコードの上の方に記載すればそれだけ速く動作することになるから調節して良いと思う。全ての広告ブロックを検出できるかどうかは不明だけど、しかし幾つか試すと抜けるものは一つもない。たった数行の軽めのプログラムで、巷の広告ブロックの大半へ対処できるのは有り難いかぎりだ。広告のソースコードがサイト内にしかない場合、広告ブロックはそのidやclassのコンテンツを消すらしいけど、様々な方法が可能だし、一般的に検出するにはやはりfetch()メソッドの同じ方法を使うのが良いと思う。つまり自分でサイト広告を表示するためのjsファイルなどを外部サイトに用意してサイト内でそのURLに対してブラウザが読み込んだかどうかをチェックすると検出し易い。サイト内のサイト広告へのブラウザの広告ブロックをサイト内だけで一般的に検出する方法は見当たらない。fetch()メソッドでなければライブラリやWebサービスを使う方が確実性が高いだろう。

参考サイト

広告ブロックのブラウザにコンテンツをブロックするにはどうするか広告ブロックの検出プログラムでサイト広告を表示しないブラウザが分かった場合、コンテンツをブロックして警告文か何かの代わりのものに目立たせる必要が出て来る。コンテンツをぼかして警告文を表示するサンプルぼけたコンテンツに広告ブロックへの警告のポップアップが出ている

JavaScript

document.head.insertAdjacentHTML("beforeend", `<style>#alertb {background-color:#fff;colore:#000;padding:1em}#alertb::backdrop{backdrop-filter:blur(10px)}a, button, input {pointer-events:none}</style>`); document.body.insertAdjacentHTML("beforeend", `<div id="alertb" popover="manual"><p>ブラウザの広告ブロックを解除してから再読み込みして下さい\u3002</p></div>`); alertb.showPopover();

画面の中央に警告文を出して通常のコンテンツを全てぼかしている。二つのinsertAdjacentHTML()メソッドがあって警告文のデザインと表示に対応している。

警告文のデザイン

document.head.insertAdjacentHTML("beforeend", `<style>警告文のCSSのソースコード</style>`)

警告文の表示

document.body.insertAdjacentHTML("beforeend", `警告文のHTMLのソースコード`)

警告文のCSSとHTMLのソースコードを編集してカスタマイズすることができる。サンプルでは画面の中央に警告文を出すためにHTMLよpopover属性を使ってそれを自動的に開くために三行目にalertb.showPopover()を入れているので、その他の方法を使うならば削除して構わない。コンテンツの一部を消してその他を出すサンプル些細な日常のメインコンテンツが消されてヘッダーと下段のプロフィールが繋がって表示されている

些細な日常のメインコンテンツが消されてヘッダーと下段のプロフィールが繋がって表示されている

JavaScript

const blockct = document.querySelector("消したいコンテンツのセレクター");
blockct.style.display = "none";

CCSで{display:none}などの非表示を記載したclassがあれば；

const blockct = document.querySelector("消したいコンテンツのセレクター");
blockct.classList.add("CSSで非表示を記載したclass");

入力項目の消したいコンテンツのセレクターはCSSの指定先になる。そしてCSSで非表示を記載したclassは名前だけで、セレクターのように名前の前に半角ドットを付ける必要はない。残りの部分はstyle.displayで非表示のstyleかclassList.add()で非表示のclassを追加する。僕はブロクのメインコンテンツを消すだけにしてその周りのヘッダーやフッターやサイドバーを出すようにしている。どんなサイトなのかを少しても分かるようにすることでコンテンツをブロックしつつも好印象を幾らかは残せることを期待したい。広告ブロックへのコンテンツブロックの留意点広告ブロックに対してコンテンツをブロックすると二度と来ないという人も現れるだろうし、それによってアクセスダウンを強いられる恐れがあって嫌われるほどに酷い。どんな訪問者でもサイトを誰かに教えたり、他のサイトにリンクを貼るかも知れないわけで、広告ブロックで訪問自体が収益にならなくても間接的に好影響を与える機会を失うことは減益に繋がる。何もしない方が良いという可能性も十分にあるので、広告ブロックへのコンテンツブロックはアクセスダウンに必要以上に向かわないことを調べながらやるのが良いと思う。