Google Adsenseで勝手にCSSスタイルに注入されてしまう「height: auto !important」をMutationObserverで抑える


2023/01/14
【SEO対応~ウェブサイト運用】ウェブサイトでTwitterのOGP対応を行う
蛸壺の技術ブログ|Google Adsenseで勝手にCSSスタイルに注入されてしまう「height: auto !important」をMutationObserverで抑える

AngularのようなJSフレームワークを使ったフロントエンド開発でとあるウェブサイトを作成しているときに、Google Adsenseのスクリプトが読み込まれるたびに、ページのデザインレイアウトが若干崩れることに気が付きました。

これまで変化がわずかであったため、とりあえず見過ごしてきたわけですが、Adsenseのスクリプトは広告ユニットが貼り付けてあるDOM要素なら、
問答無用で「height: auto !important;」を大量注入してくれます

合同会社タコスキングダム|蛸壺の技術ブログ

ほとんどの場合にはcssスタイルで
height: autoされても大きく問題なるようなことはないのです。

ただしSPAでHTML要素を厳密に高さ調整したいときに、いきなり
height: autoされると困るケースもあります。

そんな外部から呼び出してつかうJavascriptスクリプトによってcssスタイルに影響が出てしまう場合に、ブラウザ標準で使えるようになったDOM APIの一つである
「MutationObserver」を使って解決してみようと思います。

参考|MutationObserver


MutationObserverを使ったDOMの監視

「MutationObserver API」を使うことで、指定したDOM要素へ変更が加えられたことを監視することができます。

例えばAdsenseのように外部から提供されたスクリプトは
index.html<body>...</body>タグのどこかに以下のようなスニペットを貼り付けることでウェブページのCSSスタイルに直接変更を加えてきます。

            
            ...
<body>
    ...
    <script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async></script> 
    ...
</body>
        
これが読み込まれた時点で、せっかくのページレイアウトが崩れてしまう可能性があります。

ということで、スクリプトにはスクリプトをぶつけることで勝手に挿入されてしまう
height: autoに対抗してみます。

具体的には以下のようなスクリプトを
index.htmlに挿入します。

            
            ...
<script>
    document.querySelectorAll('.mut-height-guard').forEach((target) => {
        const heightChangeObserver = new MutationObserver(() => {
            target.style.height = "";
        });
        heightChangeObserver.observe(target, {
            attriblutes: true,
            attributeFilter: ['style']
        });
    });
</script>
...
        
後は、勝手にheight: auto !important;を入れられて、レイアウトが崩れてしまいそうな要素に、class="mut-height-guard"を付与していきましょう。

例えば、Adsenseを呼び出すことで、サイドバーの要素のレイアウトが乱される場合があったとしましょう。

すると、以下のように要素の
classを修正します。

            
            ...
    <article>
        <div class="mainWrap">
            ...ページのメインの内容(height: autoで問題ない要素)
        </div>
        <div class="sideMenu mut-height-guard">
            ...☝サイドバー(height: autoになってほしくない要素)に指定する
        </div>
    </article>
...
        
特にheight: auto !important;を入れられても問題のない要素であればclass="mut-height-guard"を指定する必要はないでしょう。

とりあえずこれで、ウェブページのレイアウトが崩れなくなれば処置の完了です。


まとめ

今回は、DOMの変化を監視して処理できる「MutationObserver」を使った応用例を紹介してみました。

MutationObserverを使えば、今回のように外部スクリプトを呼び出してCSSスタイルが変化してしまうのを防ぐことも出来ますし、iframeでの外部リソース呼び出しでも柔軟に表示サイズを変えられるなど、結構使いどころは多いです。

困ったときには、MutationObserverが使えないか一度検討してみてはどうでしょうか。

参考サイト

Fixing Adsense Injecting 'height: auto !important' into scrolled Containers

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。