アフィリエイト

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

Googleアドセンスを1つのページに複数設置していると、一部の広告が表示されなかったり、表示されたりする現象が発生しました。見ているページによっても、このページはサイドバーの広告が表示されるけど、別のページではサイドバーの広告が表示されない、などなど。

もういいや、ってことで諦めていたのですが、最近本格的にブログ収入を向上させようと思っていたこともあり、いろいろ実験したり調査をしてみたところ、解決できました!

というわけで、今回は、複数のGoogleアドセンス広告を設置している時に、表示されたり表示されなかったりする問題を解決する方法を紹介します。

Googleアドセンスが表示されない原因

Googleアドセンスが表示されない」という状況に遭遇したことがあるブロガーさんって結構いると思います。例えば、

「Googleアドセンスのサイトで広告コードを取得したばかりで、ブログに設置すると表示されない」

というケースです。

Googleアドセンスは広告コードを生成したばかりの状態では表示されません。数十分から1時間くらいのタイムラグがあるのです。

しかし、今回私が遭遇したケースは、数か月前に生成した広告コードであり、さらに見ているページによって表示されたりしなかったりするケースです。

原因がよくわからなかったので、広告コードを挿入する場所、広告の種類、広告のサイズ、広告の数、などを調整しながら実験した結果、わかったことは、

ページ内に表示できる広告の数に上限があるらしい

ということでした。

しかし現在、Googleアドセンスは1ページに設置できる広告の数に制限はなくなったはずです。

うーん。どうしたもんかなぁと悩んでしまいました。

Googleアドセンスの広告コードを見直してみた

Googleアドセンスの広告コードは、Googleアドセンスの管理画面から取得できます。いろいろなタイプがあるのですが、よくあるのが次のようなコードです。

「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つだけ記述することにします。例えば次のような感じ。

次は、「(adsbygoogle = window.adsbygoogle || []).push({});」のコード。これは</body>の直下に以下のように記述します。

上のコードは、ソースコード中に

adsbygoogleのクラス名が付いたinsタグの数だけ、
(adsbygoogle = window.adsbygoogle || []).push({});
のコードを実行する

ということです。

上の例はjQueryを使ったものですが、純粋なJavaScriptのコードだと次のような感じです。

WebサイトでjQueryを読み込んでいない場合は、こちらのコードの方が良いでしょう。

さて、これで準備は完了です。ここまでの作業をしっかりしておけば、Googleアドセンスの広告コードは以下のようにシンプルに修正できます。

★修正前のGoogleアドセンス広告コード

★修正後のGoogleアドセンス広告コード

変更点がおわかりでしょうか? コードの一番上に記述されていた、scriptタグが無くなりコードの一番下に記述していた、「adsbygoogle~~」のscriptタグもなくなっています。これまでの修正の結果、この2つは不要になったからです。

次からGoogleアドセンスを追加したい場合は、広告コードの中にあるintタグの部分を記述するだけでGoogleアドセンス広告が表示されます。

参考にしたWebサイト

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

Google Adsenseが表示されない問題を解決してみた
https://heyg.jp/google-adsense-best-example/
1ページに複数のAdSenseユニットをどのように使用しますか?
https://codeday.me/jp/qa/20190204/237925.html

===

よろしければ、ポチっとお願いしますm(__)m
にほんブログ村 IT技術ブログ HTML5/CSS3へ 
にほんブログ村 IT技術ブログ Webサイト構築へ 
にほんブログ村 IT技術ブログ WordPressへ 

このブログの更新情報をTwitterで配信しています。よろしければフォローお願いします!
@jugedred

facebookページも運営中です。
よろしければこちらもフォローお願いします!
Jugedred Project

ABOUT ME
ドレッド
フリーライター&Webクリエイター。1999年から趣味のホームページ制作を開始。Movable TypeやWordPressのカスタマイズでWeb制作を覚えました。地元の制作会社で5年間勤務して独立。現在は個人事業主としてWeb制作に関することを何でもやってます。
お仕事のご依頼お待ちしております。

このブログの運営者にお仕事を依頼しませんか?

コレカラウェブ

現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。まずは事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。

コレカラウェブ公式サイトへ

COMMENT

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