Google Adsenseが読み込まれなかった時を検知して要素を削除する処理を書いた。
まだ気持ちがもやんもやんしてる。どうも僕は叱責されたりとかショッキングなことがあると、数日から数週間にかけてメンタルがダウンした状態に陥り、思考能力が極端に落ちる。僕的用語ではこの状態は「神経焼き付き状態」と呼んでいる。この状態の時に私事でブログを書いても、ろくなことを書けないはずであり、恥を晒すよりはプライベートな事とは関係しない事を書こうと思う。
最近僕は色々とこのブログのカスタマイズを行なってる。ちょっと前の記事でも書いたけど、ブログに組み込んであるAI機能の強化であるとか、広告の表示周りのカスタマイズをしてる。Cloudflareを組み込んでみてキャッシュを使ってサイトの表示を高速化しようなどと企んでみたが、どうもはてなブログの独自ドメインの仕様ではCloudflareのプロキシが使えないようである。残念。
このブログの熱心な読者諸氏ならお気づきかもしれないが、最近はブログのトップページを色々といじっている。ちょっと、記事リストの間にGoogleアドセンスのインフィード広告をJavaScriptで挿入しようとしており、そこんところをネットで調べたりChatGPTと壁打ちしながら色々と試している。
記事リストにインフィード広告を組み込むスクリプト自体は、ネットで色々と転がってるからその辺りを使えば簡単に実現できるのだけど、それで大きなDOMが画面ロード後から挿入されてCLSが発生してSEO的に悪影響を出したりとか、アドセンスから広告オブジェクトが送信されてこない時に記事リストに空の変な残骸だけが残るのが気に食わないのである。
それで、Googleアドセンスの仕様書を色々と調べてみたりとか、JavaScriptのドキュメントなんかを色々とひっくり返してみて、記事一覧にインフィード広告を遅延読み込みで画面ロード3秒後もしくはスクロールやタップの後に読み込んで、なおかつアドセンスから広告が配信されてこない時は空のDOMを削除する処理を書いてみた。
おんなじ事をやってる人がいないかなー？ とネットを探ったところ、Reactではあるけどこのような感じでGoogleアドセンスが読み込まれない時は削除する処理を書いてる人がいたので、そちらを参考にしながら作成してみた。
簡単に仕様を説明すると、Googleアドセンスは広告の配信状況を「data-ad-status」というパラメータで表示している。そちらが data-ad-status="unfilled" の時は広告が配信されていないのである。
JavaScriptで用意されているMutationObserverを使えば、動的にそのdata-ad-statusが変更されたかどうかを監視することができる。広告要素のロード後、data-ad-statusが一秒経ってもunfilledの時にはそのタグを削除するような処理を書いてみた。
MutationObserverというのは特定のDOMの状況が変化をできるオブサーバを作ることができる関数であり、これでGoogleアドセンスのins要素のdata-ad-statusを監視して、変更があった時にトリガーするような処理にしておけば、広告が読み込まれなかった時に後からその要素を削除する処理を書くのも可能である。
要するにまぁ、こんな感じで動的にDOMの変更を監視できる関数であり、DOMが変更されたタイミングでさまざまな処理をトリガーできるのである。
<!DOCTYPE html> <html> <head> <title>MutationObserver Example</title> </head> <body> <div id="example">Hello, world!</div> <button id="change-attribute">Change Attribute</button> <script> // 監視対象の要素 const targetNode = document.getElementById('example'); // コールバック関数 const callback = function(mutationsList, observer) { for (let mutation of mutationsList) { if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } }; // MutationObserverのインスタンスを作成 const observer = new MutationObserver(callback); // 監視する変更の種類を指定 const config = { attributes: true }; // 監視の開始 observer.observe(targetNode, config); // ボタンをクリックしたときに属性を変更 document.getElementById('change-attribute').addEventListener('click', function() { targetNode.setAttribute('data-example', 'value'); }); </script> </body> </html>
こういう関数を使ってみてAdsenseのdata-ad-statusを監視して広告が読み込まれない時はその要素を記事一覧から削除する処理を書いてみたのである。しばらくはこれで運用してみてバグがないか確認してみようと思う。
まー、アドセンスについてはどうせ収入はスズメの涙であるし、なきゃないでどうでもいいんだけど、僕自身がブログを見たときにレーシングカーにいろんなスポンサーのバナーがついてるような感じで広告が出てたりするのが楽しい。こんなブログカスタマイズが面白いからやっている。アドセンスに関しては定期的に汚い広告主は排除するようにしないと汚い広告が出まくったりとかするけど、ブログ遊びとしては面白いからこういう技術的な事を色々と試しちゃう。
