Google Adsense(グーグルアドセンス)の広告について、パソコンでは問題なく表示されているのですが、スマートフォンなどのモバイル向けの表示では、広告が表示されない箇所があったりしたので、いろいろと調べていました。
Google Chromeの「検証モード」(デベロッパーツール)で確認すると、次のエラーが表示されます。「"adsbygoogle.push() error: No slot size for availableWidth=0"」
広告データの追加がうまくいかなかったり、「diplay:none」で広告を消していたりすると発生するらしいです。
このブログのモバイル向けの表示では、ダブルレクタングルの右側を「diplay:none」で非表示にしています。
CSSの「diplay:none」で広告を消すから、他の広告がうまく表示されないのでは?
それなら、CSSじゃなくJavaScript(jQuery)で削除するといいのではと考えました。
次のように、アドセンス広告のそれぞれにクラス名をつけておきます。
<div> <div class="ads-left">広告コード(レスポンシブ広告ユニット)</div> <div class="ads-right">広告コード(レスポンシブ広告ユニット)</div> </div>
それをJavaScriptで削除します(デザイン→カスタマイズ→フッタにコードを入力)。
<script> document.addEventListener('DOMContentLoaded', function() { var winWidth = $(window).width(); if (winWidth < 640) { /* 画面サイズが640px未満だったら */ $('.ads-right').remove(); } }); </script>
画面サイズによって、スマートフォンなどのモバイル端末かどうかを判定しています。
参考になるブログ・Webサイト
ハックノート - jQueryで読み込み時とリサイズ時の画面サイズによって処理を判定する
この結果、エラー表示が出なくなり、広告がきちんとすべて表示されるようになりました。
なお、このやり方が禁止されているコードの改変方法にあたるかどうかはわかりません。
- 追記 -
Googleアドセンスのアカウントが非承認(無効化)されたのでお知らせするとともに、この記事を参考にするとアカウントが無効にされる恐れがありますのでご注意ください!