自動広告を表示させつつクリックさせない方法

本日のお得情報です。

一体何の話なのか？

まず前提として自己クリックの類いは広告主に利益をもたらさないと言う理由で、だいたいの広告配信プラットフォームではその手の行為を厳しく禁じています。

そのため分別のある Web 管理者は自身の Web サイトを管理する際に、広告を誤クリックしない様に細心の注意を払うワケですが、しかし誤クリックによる自己クリックを防ぎたいからと言って自分の管理する Web サイトから広告表示を消してしまうと、今度は Web サービスや Web サイトの表示確認をするときに広告部分の崩れを確認できないことになってしまいます。

また Web サイトなどで実際に配信されている広告を確認しようと思うと、広告をクリックしないようにしつつも現実には広告を表示させざるを得ない……と言う事になると思うのですが、今回の話はその辺りの面倒事をサクッと手軽に解決してみよう！と言う話になります。はい。

自動広告を表示させつつクリックさせない方法

これは各 Web サイトの DOM 構造にも依りますが CSS で、

.ads {
  pointer-events: none;
}

と言うプロパティを管理者が閲覧している時だけに設定すれば OK です。

そのためこの CSS を各々の Web サイトの DOM 構造に応じて適用してやれば、少なくともその要素のクリックイベントが起きなくなるので、マウスなどのポインターデバイスでは誤クリックは起こせなくなります。

なお私のこの Web サイトでは静的サイトジェネレーターである Hugo を使っていて、特定の条件を満すときに色々と処理して云々するのが面倒だったため、下記の様な UserScript を Violentmonkey にインストールして使っています：

// ==UserScript==
// @name Disable Adsense container for the.kalaclista.com
// @version 0.0.2
// @grant none
// @namespace https://the.kalaclista.com
// @match https://the.kalaclista.com/*
// @run-at document-end
// @inject-into page
// ==/UserScript==
(()=> {
    Array.from(document.querySelectorAll('.adsense')).forEach((e)=>{
        e.setAttribute('style', 'pointer-events: none');
    );
})();

以上

それでこの pinter-events と言う CSS プロパティ、MDN の

を見るに、どうも SVG 要素を扱う時に活躍するプロパティっぽいのですが、 HTML 要素に対しても pointer-events: none; は有効であるみたいなので、今回の様なケースでも使えるよねーと言うのが今回の話です。

ただしこのプロパティはどうも Context menu を出すための右クリックには効かないっぽいので、広告自身が右クリックに対して何かしらの挙動が設定されている場合には注意が必要なんじゃないかなーと私は思ってます。

あとこのプロパティだけで広告に対するすべてのユーザーインタラクションが無効にできるかどうか、については特に検証とかしていないので、本格的に使うとなるともう少し調査とかをした方が良いと思いますね。はい。

とは言え簡易的に自分の Web サイトで広告を誤クリックしない様にする、と言う対策にはもってこいな CSS プロパティなので、その辺りはまぁ知っておいても損はないんじゃないかなーと思います。