Googleアドセンスを1つのページに複数設置していると、一部の広告が表示されなかったり、表示されたりする現象が発生しました。
見ているページによっても、このページはサイドバーの広告が表示されるけど、別のページではサイドバーの広告が表示されない、などなど。
もういいや、ってことで諦めていたのですが、最近本格的にブログ収入を向上させようと思っていたこともあり、いろいろ実験したり調査をしてみたところ、解決できました！
というわけで、今回は、複数のGoogleアドセンス広告を設置している時に、表示されたり表示されなかったりする問題を解決する方法を紹介します。
目次
Googleアドセンスが表示されない原因
「Googleアドセンスが表示されない」という状況に遭遇したことがあるブロガーさんって結構いると思います。例えば、
「Googleアドセンスのサイトで広告コードを取得したばかりで、ブログに設置すると表示されない」
というケースです。
Googleアドセンスは広告コードを生成したばかりの状態では表示されません。
数十分から1時間くらいのタイムラグがあるのです。
しかし、今回私が遭遇したケースは、数か月前に生成した広告コードであり、さらに見ているページによって表示されたりしなかったりするケースです。
原因がよくわからなかったので、広告コードを挿入する場所、広告の種類、広告のサイズ、広告の数、などを調整しながら実験した結果、わかったことは、
「ページ内に表示できる広告の数に上限があるらしい」
ということでした。
しかし現在、Googleアドセンスは1ページに設置できる広告の数に制限はなくなったはずです。
うーん。どうしたもんかなぁと悩んでしまいました。
Googleアドセンスの広告コードを見直してみた
Googleアドセンスの広告コードは、Googleアドセンスの管理画面から取得できます。
いろいろなタイプがあるのですが、よくあるのが次のようなコードです。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="XXXXXXX"
data-ad-client="XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
data-ad-slot="5096411912"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>それでこのコードをじーーーっと見て気づいたのですが・・・
「adsbygoogle.js」が広告の数だけ読み込まれている
ということ。
Web制作をしている人ならピンとくるかもしれませんが、同じJavaScriptを1つのページ内で複数読み込んでいると、たまにエラーが発生することがあります。
ありがちな例が、バージョンの異なるjQueryの本体を複数個読み込んでいるケースです。
特にWordPressの場合、自前のjQuery本体とWordPressが提供しているjQueryと2重に読み込んでしまって、導入したjQueryプラグインが動作しなくなることもしばしば・・・
そんなわけで、「adsbygoogle.js」は1つだけ読み込むようにすれば良いだろうと思い修正しました。
ところが、これでも問題は解決しなかったのです。
「 (adsbygoogle = window.adsbygoogle || []).push({}); 」の読み込むタイミングが怪しい
それで次に疑ったのが、
(adsbygoogle = window.adsbygoogle || []).push({});
という箇所。これはどの広告コードにも必ずくっついてくるコードです。
どうやらこれも怪しそうだなぁ・・・ どうやらこのコードの読み込むタイミングの影響で、広告が表示されるページと表示されないページが発生するようだと思い当たりました。
【解決！】Googleアドセンスが複数個表示されるように修正
1つのページに複数Googleアドセンス広告を設定した時に、表示されない問題を修正することですが、ポイントは次の2つです。
- 【adsbygoogle.js】adsbygoogle.jsは1回だけ読み込む
- 【(adsbygoogle = window.adsbygoogle || []).push({});】は最後にまとめて読み込む。
ということで、「adsbygoogle.js」を読み込むためのscriptタグは、headタグの中に1つだけ記述することにします。例えば次のような感じ。
<html>
<head>
～～～～ ここにタイトルタグとか他のタグ
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
～～～～
</head>
<body>
～～～～ ここにbodyタグの中身を記述
</body>
</html>次は、「(adsbygoogle = window.adsbygoogle || []).push({});」のコード。これは</body>の直下に以下のように記述します。
<script>
$(window).load(function() {
$('ins.adsbygoogle').each(function() {
(adsbygoogle = window.adsbygoogle || []).push({});
});
});
</script>上のコードは、ソースコード中に
adsbygoogleのクラス名が付いたinsタグの数だけ、
(adsbygoogle = window.adsbygoogle || []).push({});
のコードを実行する
ということです。
上の例はjQueryを使ったものですが、純粋なJavaScriptのコードだと次のような感じです。
<script>
[].forEach.call(document.querySelectorAll('.adsbygoogle'), function(){
(adsbygoogle = window.adsbygoogle || []).push({});
});
</script>WebサイトでjQueryを読み込んでいない場合は、こちらのコードの方が良いでしょう。
さて、これで準備は完了です。ここまでの作業をしっかりしておけば、Googleアドセンスの広告コードは以下のようにシンプルに修正できます。
★修正前のGoogleアドセンス広告コード
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="XXXXXXX"
data-ad-client="XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
data-ad-slot="5096411912"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>★修正後のGoogleアドセンス広告コード
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="XXXXXXX"
data-ad-client="XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
data-ad-slot="5096411912"></ins>変更点がおわかりでしょうか？ コードの一番上に記述されていた、scriptタグが無くなり、コードの一番下に記述していた、「adsbygoogle～～」のscriptタグもなくなっています。
これまでの修正の結果、この2つは不要になったからです。
次からGoogleアドセンスを追加したい場合は、広告コードの中にあるinsタグの部分を記述するだけでGoogleアドセンス広告が表示されます。
