レスポンシブ広告ユニットを新しくするポイント
- 新しくレスポンシブ広告ユニットを作成する！とヘルプにあるが、既存のレスポンシブ広告ユニットのコードを取得すればよい
- 広告の設定、コンテンツ > 広告ユニットですでに作っている既存のレスポンシブ広告ユニットの名前をクリック、移動した詳細ページ最下部の「コードを取得」をクリック
既存のレスポンシブ広告ユニットのコードと比較♪
今までとなにが違うのかしらと気になりましたので比較してみましょう。
まずは今までのコードです。よくよく調べてみますと「コードを取得」で表示されるコードウインドウで、モードを「アドバンス（コード変更が必要）」にした時と同じです。
<style>
.my_adslot { width: 320px; height: 100px; }
@media(min-width: 500px) { .my_adslot { width: 300px; height: 250px; } }
@media(min-width: 800px) { .my_adslot { width: 336px; height: 280px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ -->
<ins class="adsbygoogle my_adslot"
style="display:inline-block"
data-ad-client="ca-pub-2331792559943435"
data-ad-slot="8787784471"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
続いて、新しいコードです。こちらはコードで「スマートサイズ（推奨）」を選ぶと表示されます。今までこんなモードはなかった、、、と思いますがどうでしたかしら？？？
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2331792559943435"
data-ad-slot="8787784471"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
さて、違いですけれども、先頭に次のコードがあるか、ないかだけですの。簡単ですわね♪利用者にとっては有難いですの♪
<style>
.my_adslot { width: 320px; height: 100px; }
@media(min-width: 500px) { .my_adslot { width: 300px; height: 250px; } }
@media(min-width: 800px) { .my_adslot { width: 336px; height: 280px; } }
</style>
今までとの違い
PC で確認しますと、なんだか長細い広告に変わっておりましたの。。。正方形の広告からガラリと変わった印象です。
一方、スマートフォンで確認しますと、長細い広告から、正方形の広告に変わっていましたわ。。。スマートフォンは画面サイズが小さいですので、こちらこそ横に長細い広告にして誤タップを防ぐべき、と思うのですけれども。。。
ま、まあ、しばらくはこれを試してみますわ。
おわりに
PC が長細くなるのは、広告表示面積自体は減ってしまう印象を抱きますけれども、逆にコンテンツは読みやすくなると思いますのでグッジョブ！Google ！と感じましたの♪
ですけれども、スマートフォン、、、画面に対する広告サイズが 1/ 3 はあるように見えます。読み辛くならないかしら。
すこし疑問です。。。
それはとかく、参考のページです。ありがとう存じます♪
今回の投稿を試してみようと思いましたのは、上のページでいろいろと新しくなったよ！とあったのに興味を抱いたからでした。
-
利用可能なスペースに合わせてサイズを自動調整。
-
画面の向きに合わせて広告のサイズを変更。
-
広告サイズ別のレポート
以上です。