comments 2

Google AdSense レスポンシブユニットでもカタチを指定

アクセスの60%以上がスマホやタブレット経由なので、レスポンシブテーマで運営している当ブログ。
CocoaとフロップデザインフォントでWordPressをミニマルリニューアル! | ココロクロニクル
関連記事
デスクトップ用、スマホ用とアレコレ切り替えるスキルがないので、一発で完結するレスポンシブなものに頼っている。
貼り付けているAdSenseもレスポンシブ広告ユニットに変えてみることにした。
レスポンシブ広告ユニットは、デバイスに応じて最適なサイズの広告ユニットを表示してくれるのでラクチン。
なんだけど、そのままコードを貼り付けるとちょっとした問題が…

僕の場合は、記事前と記事後の2箇所に設置しているのだけど、問題になるのが記事前のもの。
そのまま、コードを貼り付けてしまうとレクタングルが表示されてしまったりする。

こんなレイアウトのもの。

デスクトップでは大きな問題にならないかもしれないが、iPhoneで表示すると画面が広告でいっぱいに!
感じも悪いけど、Googleのガイドラインにも抵触するようだ。

広告ユニットの形状は指定できる

困ってヘルプを確認すると、広告ユニットの形状は指定できるようだ。
広告コードの”auto”の部分を修正することにより、形状の指定ができる。

レスポンシブ広告コードを修正して広告ユニットに一般的な横長の形状を指定する方法については、次の例をご覧ください。

<ins class=”adsbygoogle”

style=”display:block;”

data-ad-client=”ca-pub-1234″

data-ad-slot=”5678″

data-ad-format=”horizontal”></ins>

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

デフォルトでは、レスポンシブ広告コードの data-ad-format タグには “auto” という値が設定され、これにより、レスポンシブ広告ユニットでサイズの自動調整が有効になります。ただし、data-ad-format の値を “rectangle”(レクタングル)、”vertical”(縦長)、”horizontal”(横長)、またはこれらをカンマで区切って組み合わせた値(”rectangle, horizontal” など)に変更すると、レスポンシブ広告ユニットで一般的な形状を設定できます。

引用元: レスポンシブ広告ユニットを作成する – AdSense ヘルプ.

というわけで、記事前のものは、”horizontal”(横長)を指定。
こうすると、モバイル ビッグバナー(320×50)が表示されて、iPhoneの画面一杯に広告が表示されるという事態を避けられる。

こんなレイアウトのもの。

 

記事後のものは、おなじみの”rectangle”(レクタングル)を指定。

コードをひとつ貼っておけば、後はデバイスの画面サイズに応じて自動で最適化されるのでラクチン。
是非お試しあれ。

Filed under: WordPress

About the Author

Posted by

「タフでクールで そしてヒューマンタッチ」Reblogger in Tokyo