アフィリエイト

【アフィリエイト】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>

 

「data-ad-layout-key」と「data-ad-client」は環境によって異なりますが、だいたいこんなコードです。

それでこのコードをじーーーっと見て気づいたのですが・・・

「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アドセンスを追加したい場合は、広告コードの中にあるintタグの部分を記述するだけでGoogleアドセンス広告が表示されます。

参考にしたWebサイト

この問題の解決にあたり、以下の2つのサイトを参考にしました。ありがとうございました!

Google Adsenseが表示されない問題を解決してみた
https://heyg.jp/google-adsense-best-example/

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。フリーライターとWeb制作のお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

POSTED COMMENT

  1. アバター kawarun より:

    はじめまして!こちらの記事を参考にトラブル解決できました。
    ありがとうございます!!

COMMENT

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

CAPTCHA