Google Adsense のスクリプトによる自動的なスタイルの注入

Google Adsense は、Google が提供するコンテンツ連動型広告配信サービスである。
当サイトにおいてもこれを利用して収益化を図っているが、その過程で Google Adsense のスクリプトによって自動的に注入されるスタイルを発見したので、ここで報告したい。

Google Adsense による広告の配信を受けるには、広告の配信を受けるコンテンツページにおいてスクリプト https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js を読み込む必要がある。
このスクリプトは、コンテンツページに手動で配置された広告の表示場所に、要素 data-ad-format="auto" が設定されている場合、ページ内の広告を内包する div タグすべてに style="height: auto !important;" を設定する。
これは、コンテンツの作成者がページのスタイルを設定するにあたっての大きな障害となる場合があり、あまり行儀の良い挙動とは言えない。そこで、この効果を阻害するための JavaScript を開発した。

const observer = new MutationObserver((mutations, observer) => {
  mutations.forEach((value) => {
    const target = value.target
    if (target.style && target.style.height === "auto") {
      target.style.height = "";
    }
  })
});
observer.observe(document.documentElement || document.body, {
  attributes: true,
  attributeFilter: ["style"],
  childList: true,
  subtree: true
});

本スクリプトは、MutationObserver によって DOM ツリーに加えられた変更を検知し、Google Adsense が注入したであろうスタイルを打ち消すものである。このスクリプトにおいては、検知方法やスタイルの打ち消し方法にさらなる工夫の余地があることに留意したい。

コメントを残す

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