アドセンスのレスポンシブ広告でPCとスマホで大きさを変える方法

GoogleAdsense（アドセンス）を利用する場合、「レスポンシブ広告ユニット」を利用すれば自動でPC用とスマホ・タブレット用で広告の大きさを最適化することができます。

このレスポンシブ広告ユニットを利用することで広告コードが1つですべてのデバイスの対応することができて非常に便利になります。これまでレスポンシブ広告ユニットはベータ版として稼働していましたが、既にベータ版の文字はなくなっているようなので本格的に利用して問題なさそうです。

ここではその導入の仕方を詳しく解説していきます。

0.はじめに。「何がどう簡単にできるの？」

出典：support.google.com

簡単に言うとこれまではphpファイルにif文でPC用とスマホ・タブレット用とで条件分岐をさせる記述などをしないとPCとスマホで広告の大きさを変えることができませんでした。

それがレスポンシブ広告ユニットを利用することで、まず自動でページレイアウトにあった広告ユニットサイズで表示がされるということ。

また、サイズを指定したい場合もCSSだけをいじれば指定することができます。つまり、これまでのようにphpファイルでif文などを書いてモニョモニョしてなくても広告コードは1つでどんなデバイスでもウィンドウの横幅が変わっても対応できるようになったということです。

参照：「レスポンシブ広告ユニットについて – AdSense ヘルプ」

1.レスポンシブ広告ユニットのコードを取得する

まずは「Google Adsense」にアクセスし、「広告の設定」→「新しい広告ユニット」と進んでください。そうすると、

• 名前
• 広告サイズ
• 広告タイプ

と入力と選択する画面になります。ここで「名前」は自分が管理しやすいように名前を付けた後、「広告サイズ」の「表示サイズ」というところをクリックしてみてください。最初は「推奨」が選択されているので、これを「レスポンシブ」に選択し直します。

広告タイプは運営者さんにお任せしますが、基本は「テキスト広告とディスプレイ広告」を選択します。そしたら「保存してコードを取得」をクリックで、コード取得画面に切り替わります。

2.「スマートサイズ」と「アドバンス」ってどう違うの？

「保存してコードを取得」をクリックすると、モードで「スマートサイズ」と「アドバンス」の選択が出てきます。

この違は簡単に言えば、「スマートサイズ」はコードをいじったりする必要がない。「アドバンス」は選択画面で書いているようにコード変更が必要になります。コード変更をすることで細かい設定を決めることができます（CSSによるメディア クエリによる指定）。

スマートサイズ特徴

スマートサイズの場合はコードをは貼り付けるだけでいいのが特徴す。

＜スマートサイズの広告コードの例＞

「data-ad-format」の属性が広告の形になります。ここに「auto」「horizontal」「rectangle」「vertical」の値を入れることによって形は指定をすることができるのです。

アドバンスの特徴

アドバンスの場合は広告のサイズが細かく指定できるのが特徴です。

CSS を使った正確なサイズか、広告ユニットに一致する一般的な形状（横長、縦長、レクタングル）のいずれかを指定する場合にのみ、このモードを使用します。
[レスポンシブ広告ユニットを作成する – AdSense ヘルプ]

上記のようにCSSを使って細かいサイズを指定する時に「アドバンス」を利用します。

＜スマートサイズの広告コードの例＞

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

は初期の指定。

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

は、最小幅が500pxを超えたら468ｘ60の広告サイズに変わり、

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

は、最小幅が800pxを超えたら728ｘ90の広告サイズに変わるということです。

3.「スマートサイズ」で実際に設置してみる

では、「スマートサイズ」で設置します。今回はWordPressの記事の「続きを読む」のところに広告の形をレクタングル（rectangle）で指定します。

まずは、コードを取得します。

＜「function.php」に広告コードを下記のように記述＞

上記のように「data-ad-format=”rectangle”」として四角形の形のみを指定します。

4.PCでAdsenseの広告の表示を確認

「続きを読む」の位置にAdsenseを入れている状態になり、PCで確認すると「336×280(レクタングル・大)」が表示されたことが確認できました。次に同じページをスマホで見てみます。

5.スマホででAdsenseの広告表示を確認

スマートフォン（上図はiPhone）で確認したとこと「続きを読む」のところに表示されるAdsenseの広告は300×250の大きさで表示されました。

6.デバイスごとにクリック数やCTR（クリック率）を確認する方法

今回のレスポンシブ広告ユニットはどのデバイスでも1つの広告コードで対応できるのが多きなメリットですが、デバイス（ユーザーエージェント）ごとには振り分けていないので、端末ごとの「ページビュー」「クリック数」「CTR」「CPC」などを確認する場合はAdsenseのパフォーマンスレポートの「プラットフォーム」というメニューから確認します。

Adsenseにアクセスしたら、「パフォーマンスレポート」→「プラットフォーム」の手順で進んでください。

とこのメニューからデバイスごとに確認します。

参考：[プラットフォーム] レポートについて – AdSense ヘルプ

更に広告ユニットごとにレポートを見る

更にグラフの下にある「ディメンションを追加」とメニューから「広告ユニット」を選択すると、広告ユニット別に数字を確認することができます。

まとめ

PCだけとかスマホだけとかの対応のWebサイトはユーザーを逃すことになります。またレスポンシブデザインのサイトも年々増加してきていますし、WordPressテーマなども新しく出てきているものはほぼレスポンシブデザインです。

どんなデバイスにも対応するようなWebページが必要になるために、それに応じて広告も最適化した方が結果的にはクリック数やCTRの上昇によりAdsenseの報酬額の増加が見込めます。

ユーザーエージェントごとに切り替える方法もあるのですが、そういうのが面倒くさいしわからないという場合はこのレスポンシブ広告ユニットを使っていきましょう。