閲覧するブラウザの幅に合わせてアドセンス広告サイズを変える方法

2015/03/11 20 Shares

シェアしていただけると嬉しいです。
Twitter 8 Facebook はてブ 12 Pocket

Google AdSense のレスポンシブユニットは便利です。ブラウザの幅に合わせて広告サイズを変えてくれるので、小さいスマホで見たら広告が切れてるということも発生しません。

ただデフォルトの広告コードを配置するだけだと、「常に細長広告が表示される」状態に陥ることもあります。

しかし実は広告コードに少し手を加えることで、自分の望みどおりのサイズの広告をレスポンシブに表示させることができるんです。昨日まで知らんかったorz

広告の最適化がまったくできていなかった

そう、昨日までは当ブログの記事内広告は、最適化には程遠い状態でした。

デフォルトでの細長広告の表示率がストレスに

Google さんのことだからデフォルトが一番いいんでしょ、と以前はレスポンシブ広告のデフォルトのコードを掲載していました。すると PC で見ようがスマホで見ようが、こんな状態が多発。

PC だと 728px × 90px のビッグバナー広告ばかりになるし、スマホだと 320px × 10px のラージモバイルバナーだらけに。それが最適なんですということかもしれませんが、まー目立たない。

こちらの希望としては、PC や大型スマホなら 336px × 280px のレクタングル（大）が表示させ、小さい端末なら 300px × 250px のレクタングルを表示させたいんですが、表示率は微々たるもの。

これが結構ストレスでした。

見切れ上等！でレクタングル（大）を固定で使っていた

なのでここ数か月は、「どうせスマホも大画面シフトしてるし、みんなきっとそうだよね！」と自分を無理矢理納得させ、記事内で表示させる広告にはすべて 336px × 280px のレクタングル（大）を表示させていました。

iPhone 5 のような小さめ端末だと広告は見切れていたことでしょう。当然広告主さんに対してもよろしくありません。というかそもそもポリシー違反。

分かっています、分かっているんですが、でも細長広告だらけにもしたくない。ということで最適化には程遠いことは理解しつつも放っておいていました。いかんです。

・・・が、調べてみると解決法はあるもんですね。即修正しましたわ。

AdSense のコードに手を加えて表示内容を指定する

このサイズのブラウザならこのサイズの広告、と自分で指定できちゃうんです。

何はともあれ広告コード取得

こちらお馴染みの Google Adsense 広告コード取得画面。ここで迷わず「レスポンシブ」を選択し、保存してコードを取得します。

無事にレスポンシブ広告ユニットが作成され、広告コードができあがりました。あとはこれをサイトの好きな場所に貼りましょう。細長広告地獄が再び始まりますw

先入観はあかん。ヘルプページに公式な対処法があった。

・・・それだとダメですよね。目立たない部分ですが、ここをクリックしてみてください。

ここ。

ヘルプページへ遷移します。中段の「高度な機能」の2項目めにある「正確なサイズを指定する場合」という項目。これが今回の肝となります。

「CSS を使って正確なサイズを指定する場合」をクリックするとヘルプが展開されます。

まず一番上にこんなことが書いてあります。

レスポンシブ広告コードを修正して、正確な広告ユニットのサイズを CSS で指定することができます。修正方法は以下のとおりです。

おおぉぉー。

実は私、Google の提供するコードには手を加えてはいかん！という先入観を持っていました。でも良いんですね、（ガイドラインに添った上で）コードを修正しても。

具体的な AdSense 広告コード修正手順

では具体的に修正していきます。なお今回のコード修正にあたっては、こちらのサイトを参考にさせていただきました。

【AdSense】レスポンシブ広告を使ってPCとスマホで別サイズの広告を出す！

レスポンシブデザインのテンプレを使っている場合に調子に乗ってレクタングル大の広告サイズを使っているとポリシー違反になってしまう可能性が有ります。それを解決してくれるのが【レスポンシブ広告】です。ここではレスポンシブ広告の設定の仕方やレスポンシブ広告をお勧めする理由を書いています。

www.danna-salary.com

2つの広告コードをメモ帳にコピペ

やり方はいたって簡単です。

まずは先程取得した広告コードをメモ帳にでもコピペしてください。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- test -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-固有の番号①"
     data-ad-slot="固有の番号②"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-固有の番号①"

data-ad-slot="固有の番号②"

data-ad-format="auto"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

固有の番号①はアカウントに紐付いており、固有の番号②は広告ユニットごとに異なります。コピペしたらいったんステイ。このコードはいじりません。

次いでヘルプページにあるこの部分を同じくメモ帳にコピペしてください。

<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

.adslot_1 { width: 320px; height: 100px; }

@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }

</style>

<ins class="adsbygoogle adslot_1"

style="display:inline-block;"

data-ad-client="ca-pub-1234"

data-ad-slot="5678"></ins>

手を加えるのはこちらのコード。では本格的に修正作業開始。

ブラウザの幅に合わせた表示広告サイズを指定する

まずこの部分を修正します。

.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }

.adslot_1 { width: 320px; height: 100px; }

@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }

ここでは下記のようなことが指定されています。

ブラウザの幅が 500px 以上なら、468px × 60px サイズの広告を表示させる。
ブラウザの幅が 800px 以上なら、728px × 90px サイズの広告を表示させる。
それ以外の場合、デフォルトで 320px × 100px の広告を表示させる。

閲覧されるブラウザの幅に合わせた表示広告サイズをしています。つまりここを変更することで、自分の希望サイズの広告を表示させることができるようになります。

私の希望はこれ。

デフォルトで 336px × 280pxのレクタングル（大）を表示させる。

それが見切れるサイズのブラウザの場合は 300px × 250px のレクタングルを表示させる。

そのためにはコードをこう修正します。

.adslot_1 { width: 300px; height: 250px; }
@media (min-width:340px) { .adslot { width: 336px; height: 280px; } }

1 2	.adslot_1 { width: 300px; height: 250px; } @media (min-width:340px) { .adslot { width: 336px; height: 280px; } }

ブラウザの幅が 340px 以上なら、336px × 280px のレクタングル（大）を表示させる。
それ以外の場合は 300px × 250px のレクタングルを表示させる。

希望の表示方法と一緒ですね。ブラウザの幅に合わせた表示広告サイズの指定は、これだけで OK です。

固有の番号を自分のものに置き換えて終わり

次いで ID などを自分のものに置き換えましょう。

    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>

1 2	data-ad-client="ca-pub-1234" data-ad-slot="5678"></ins>

この部分を、固有の番号①、固有の番号②に置き換えてください。

これにて完了！完成型はこのようなコードになります。

<style type="text/css">
.adslot_1 { width: 300px; height: 250px; }
@media (min-width:340px) { .adslot_1 { width: 336px; height: 280px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-固有の番号①"
    data-ad-slot="固有の番号②"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>