AdSense(アドセンス)でレスポンシブ広告ユニットのカスタマイズ

スポンサーリンク
スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

レスポンシブデザインでのアドセンス活用について調べていたら、レスポンシブ広告ユニットというのを使って広告コードをカスタマイズすると、レスポンシブデザインなウェブサイトに柔軟に対応できることを知りました。

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

上記リンク先 Google の AdSense ヘルプのページに詳細が掲載されていますが、レスポンシブ広告ユニットを使うと限定的にコードの修正を行え、利用する広告の形状やサイズを指定できるそうです。

スポンサーリンク

まずはレスポンシブ広告ユニットを作成する

Google Adsense にログインして、まずはレスポンシブ広告ユニットを作成します。以下のような広告コードを取得できるはずです。

デフォルトのレスポンシブ広告ユニットのコード

このままでも動作しますが、デフォルトの状態だとレスポンシブデザインに合わせて色んなサイズの広告が表示されてしまう。コードを修正することによって、端末のサイズに合わせて、自分が使いたい広告ユニットの形状やサイズを指定することができます。

rectangle, vertical, horizontal など形状で指定

ヘルプの「横長の形状を指定する場合」に該当する指定方法です。ヘルプの例では横長の形状なので、horizontal が指定されていますが、ここでは rectangle(レクタングル:長方形)の広告が表示されるように変更してみます。上のデフォルトの広告コードを修正して、data-ad-format を “auto” から “rectangle” に変更することで実現できます。

rectangle なレスポンシブ広告ユニットのコード

data-ad-format の値は “rectangle”(レクタングル)、”vertical”(縦長)、”horizontal”(横長)のいずれか、またはこれらをカンマで区切った組み合わせ(”rectangle, horizontal” など)を指定できます。

CSS で広告ユニットのサイズを指定

次に、ヘルプの「CSS を使って正確なサイズを指定する場合」に相当する方法です。ヘルプの例の通り、以下のようにコードを修正してみますと…

CSS でサイズを指定したコード

広告コードを上記のように修正すると…

画面横幅のサイズが 〜500px : 320 x 100
500px〜800px : 468 x 60
800px〜 : 728 x 90

という風に画面サイズに合わせて、表示される広告ユニットのサイズが変わります。

実際に設定してみた広告コード

スマートフォン画面(横幅400px未満)では、レクタングル中(300 x 250)を表示させる。横幅 400px 以上のPC・タブレットなどの端末ではレクタングル大(336 x 280)を表示させるように設定してみました。

スマホでレクタングル中を表示させるコード

上記のコードで、スマホ(400px 未満)ではレクタングル中(300 x 250)、それ以上ならレクタングル大(336 x 280)と、表示される広告ユニットのサイズが自動で対応されます。コードを修正する際には、AdSense のポリシー違反にならないように注意する必要があります。

スポンサーリンク
開発したサービスを多くの人に使ってもらうには、マーケティングも勉強しないといけませんね。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!