アフィリエイト

1つのページに複数のGoogleアドセンスを設置した時に、広告が表示されない問題を修正する方法

記事内に商品プロモーションを含む場合があります

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つです。

  1. 【adsbygoogle.js】adsbygoogle.jsは1回だけ読み込む
  2. 【(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アドセンス広告が表示されます。

===

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします!

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
らぐち
コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

COMMENT

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

CAPTCHA