Googleアドセンスのワイドスクリーン用アンカー広告の表示状態に応じてトップへスクロールするボタンの位置を調整する

Are you want to translate this page to English? Please click this link to translate via ‘©Google Translate'!

この記事内のコンテンツはCC BY-SA 4.0（表示・継承・商用利用可）にて提供されています。ソースコード等の利用やブログへの掲載はライセンスに同意の上お願いします。

みなさんこんにちは、ガノー（Twitter:Ganohr）です。

Googleアドセンスではアンカー広告が表示されることがありますが、アンカー広告がもともと表示していた「画面の上部へスクロールするためのボタン」や「SNSシェア用のボタン」などの、ユーザビリティを向上するための要素の上に重なって表示されてしまうことがあります。

この記事では、

を共有します。

Google AdSenseのアンカー広告はどのように実装されているのか?

コードの理解を進めるために、アンカー広告がどのように実装されているのか確認しておきます。

まずアンカー広告は以下のようなコードで表示されます。

<ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" data-anchor-status="displayed" style="display: block; width: 100% !important; height: 129px !important; bottom: 0px; clear: none !important; float: none !important; left: 0px; margin: 0px !important; max-height: none !important; max-width: none !important; opacity: 1; overflow: visible !important; padding: 0px !important; position: fixed; right: auto !important; top: auto !important; vertical-align: baseline !important; visibility: visible !important; z-index: 2147483647; background: rgb(250, 250, 250) !important;" data-ad-status="filled" data-anchor-shown="true">
<div class="grippy-host">
</div>
<div id="aswift_9_host" tabindex="0" title="Advertisement" aria-label="Advertisement" style="border: none !important; height: 124px !important; width: 100% !important; margin: 0px !important; padding: 0px !important; position: relative !important; visibility: visible !important; background-color: transparent !important; display: inline-block !important; inset: auto !important; clear: none !important; float: none !important; max-height: none !important; max-width: none !important; opacity: 1 !important; overflow: visible !important; vertical-align: baseline !important; z-index: auto !important;">
<iframe id="aswift_9" name="aswift_9" style="width: 1005px !important; height: 124px !important; display: block; margin: 0px auto;" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="1005" height="124" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" src="..." data-ssxxxxxxxx="1" data-google-container-id="a!a" data-google-query-id="XXXXXXXXXXXXXXXXXXXXXXXXXXXX" data-load-complete="true">
</iframe>
</div>
</ins>

このコードで注目すべきはCSSがstyleタグにベタ書きされている点です。

特に!important指定されているため、単純なCSSの追加では表示の調整ができません。

例えばCSSで要素の重なりを制御するz-indexが2147483647という最大値を指定されており、且つ、遅延してロードされるためほぼ確実にブラウザ内の最前面に表示されてしまいます。

こうなるとCSS定義を用いた場合では、残念ながらアンカー広告より上に表示することができません。

そもそも、アンカー広告より上にUIを表示することができたとしても、誤クリック・誤タップでアンカー広告がクリックされることは好ましくないため、アンカー広告の重なりを制御することは避けたほうが良いでしょう。

そうなると必然的に、「アンカー広告が読み込まれているかどうか」、「アンカー広告が表示されているかどうか」といった状態を識別し、JavaScript等でUIの位置を制御する方が確実です。

Google AdSenseのアンカー広告が読み込まれているかどうか判別する

さて、ではGoogleアドセンスのアンカー広告が読み込まれているかどうか判別する方法を模索しましょう。

<ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" data-anchor-status="displayed" style="display: block; width: 100% !important; height: 129px !important; bottom: 0px; clear: none !important; float: none !important; left: 0px; margin: 0px !important; max-height: none !important; max-width: none !important; opacity: 1; overflow: visible !important; padding: 0px !important; position: fixed; right: auto !important; top: auto !important; vertical-align: baseline !important; visibility: visible !important; z-index: 2147483647; background: rgb(250, 250, 250) !important;" data-ad-status="filled" data-anchor-shown="true">

この中で実際に識別に使えそうなものはclass属性のadsbygoogleやdata-anchor-status、data-ad-statusにdata-anchor-shownなどが使えそうです。

特にdata-anchor-statusとdata-anchor-shownは、他のAdSenseの広告タグには含まれていないため、これを識別に使うことができそうです。

念のため広告タグの属性変化を検証すると、やはりdata-anchor-statusがあればアンカー広告であると確定します。

Googleアドセンスのアンカー広告の開閉状態を判別する

またこの属性（data-anchor-status）はアンカー広告を開いているか開いていないかの状態に追随して変化していることが判明しました。

さらには、開閉状態を切り替えると、style属性の値が随時変化していることもわかりました。

したがって、これらの情報より、

ということがわかりました。

JavaScriptで特定要素の変化を監視する：MutationObserver

JavaScriptで要素の監視といえばMutationObserverです。これは属性の変化や含まれるテキストデータの変化、サブツリー（子要素）の変化などを監視し、変更があった場合に予め登録しておいた関数を実行させられます。

MutationObserver - Web API | MDNMutationObserver インターフェイスは、 DOM ツリーへ変更が加えられたことを監視することができる機能を提供します。これは DOM3 Events の仕様で定義されていた Mutation Events (en-US) 機能の置き換えとして設計されたものです。 ... 外部サイトへアクセスdeveloper.mozilla.org

ちなみに今回の用途ならResizeObserverを用いて広告タグのリサイズに連動させることも可能です。

ResizeObserver - Web API | MDNResizeObserver インターフェイスは、要素 (Element) のコンテンツまたは境界ボックス、または SVGElement のバウンディングボックスの大きさが変化したことを報告します。 ... 外部サイトへアクセスdeveloper.mozilla.org

この他にもIntersectionObserverなどの種類がありますが、今回の用途では利用できなさそうです。

交差オブザーバー API - Web API | MDN交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。 ... 外部サイトへアクセスdeveloper.mozilla.org

MutationObserverとResizeObserverですが、今回はMutationObserverを用います。

両者の違いは監視できる種類の他に、MutationObserverの方がより古いブラウザに対応できる（Chrome26/Edge12）ため、こちらを採用します。

※ ちなみにResizeObserverもChrome64/Edge79と比較的古いバージョンに対応しますので、好みで使い分けてください

それでは次ページにて、アンカー広告の状態に応じて位置を調整するコードを実装し、そのコードを共有します。