Cocoon｜アドセンスのモバイル広告が画面いっぱいに表示されない理由

こんにちは。KYOです。

今回は、Google AdSenseのお話です。

当サイトでも使用しているテーマ「Cocoon」では簡単にアドセンスの広告を設置できるように設計されています。

ただ、モバイルで広告を表示させた時、広告のサイズが画面いっぱいのフルサイズではありませんでした。

Cocoon側ではモバイル広告を画面いっぱいに設定しているはずなのに、実際にスマホで確認すると、広告の両脇に隙間が出来てしまっていました。

今回は、モバイル広告が画面いっぱいに表示されない時の対処法を解説いたします。

Cocoonでアドセンスコードを貼り付ける場所

まず簡単に、Cocoonでアドセンス広告を表示させる手順を解説します。

ダッシュボードにアクセスして「Cocoon設定→Cocoon設定」をクリックした後、「広告」の項目を開きます。

上記の通り、「アドセンス設定」にある「広告コード」の空欄にアドセンスコードを貼り付けて下さい。

この時、アドセンスコードに「data-ad-format=”auto“」が含まれているかを確認して下さい。

data-ad-formatの部分がautoになっていないと、アドセンスの広告がレスポンシブで表示されなくなってしまいます。

続いて、「アドセンス表示方式」にある「モバイル広告の幅を広くする」の欄に☑を入れれば、一通りの設定は完了となります。

ただ、ここからが本題となりますが、「モバイル広告の幅を広くする」に☑を入れても、スマホ端末で見ると広告の両脇に小さい隙間が生じてしまっていたのです。

また、表示される広告によっては更に小さい広告が表示されてしまい、広告幅が画面いっぱいにはなっていませんでした。

あらゆる可能性を模索して格闘すること数時間の末、やっとこの原因を突き止めることが出来ました。

モバイル広告が画面いっぱいに表示されない場合の対処法

結論から言うと、私の場合、モバイル広告が画面いっぱいに表示されなかった原因は広告ユニットにありました。

Google AdSenseでは以下の広告ユニットが用意されています。

この内、私は普段から使い慣れた（３）の記事内広告のコードをCocoonの広告コードに張り付けていました。

Cocoonの広告コードにはレスポンシブの広告ユニットを貼り付ける必要がありますが、この記事内広告はユーザーが使用しているデバイスに応じて広告の幅を自動で調整してくれるレスポンシブ仕様なのです。

そのため、私は何の考えもなくいつものように記事内広告のコードを生成し、それをCocoonに張り付けていたところ、モバイル画面のみ広告の幅が画面いっぱいに表示されない事態となりました。

同様の症状が他でも報告されていないか調査しましたが、私と同じ症状に悩むユーザーは発見できず、すぐに解決策に辿り着くことは出来なかったのです。

自力救済を余儀なくされた私は試行錯誤を繰り返し、その結果、解決に至った”ある事実”に到達することになります。

実は、Cocoonの広告コードに張り付けていいのは（１）のディスプレイ広告だけだったのです。

ディスプレイ広告以外のコードを貼り付けてしまった場合、予期せぬ挙動が発生し、私のようにモバイル広告が画面いっぱいに表示されないという事態が生じてしまったというわけです。

この事実はCocoonの公式サイトでも解説されており、『必ず「ディスプレイ広告」を選択してください。』と注釈が入っていました。

Cocoonの公式サイトはCocoon設定から変遷できるようにリンクが貼られていて、「解説ページ」をクリックすると公式サイトに飛ぶことが出来ます。

ただ、「広告コードを貼り付ける際は、必ずディスプレイ広告を使用しなければならない」という事実は公式サイトにしか記載されておらず、Cocoon設定にある広告のページには一切説明がないのです。

私は他のブログで既にアドセンス広告を掲載しているため、広告コードの生成や貼り付ける場所などが経験則で分かっていました。

しかし、この経験則が最大の罠で、「他のブログでもこうやっていたから、Cocoonでも同じやり方が通じるだろう」という先入観を生んでしまったのです。

その結果、私はディスプレイ広告ではなく記事内広告を貼り付けてしまい、モバイル広告が画面いっぱいに表示されないという問題に直面してしまったというわけです。

恐らく、全くの初心者の方であれば解説ページ（公式サイト）を読みながら実践していると思われるので、私のような事態に陥ることはないかもしれません。

アドセンスの掲載方法を知っている方や既に自分流のやり方が確立されている方こそ、今回の問題に直面しやすいため、ご注意ください。