Google Adsense で画面の解像度別に広告サイズを任意に変更する方法(レスポンシブ対応)
まぁちゃんと「ヘルプ」を読めば分かることなんですが、どうもとっつきにくいんで・・・
このブログはこの記事を書いている時点で、レスポンシブ対応WordPressテーマ(Gush)を使用しているので、PCかモバイルの条件で広告サイズを分岐させる方法も合わせてまとめてみました。以下、参考になれば幸いです。
参考:レスポンシブ広告ユニットについて – AdSense ヘルプ
参考:レスポンシブ広告ユニットを作成する – AdSense ヘルプ
広告ユニットの選択
まずはGoogle AdSenseから 広告の設定 → +新しい広告ユニット → 広告サイズ で「レスポンシブ広告ユニット(ベータ版)」を選択します。名前や広告タイプなど他の設定はお好みで。
コードの取得
最後の「保存してコードを取得」(作成済みの場合は「コードを取得」)をクリックします。次の画面で「モード」を2種類から選択できます。「スマートサイズ(推奨)」を選択した場合はこちら。
取得したコードは次のようになります(ヘルプより抜粋)。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- レスポンシブ ホームページ --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1234" data-ad-slot="5678" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
このコードを使用した場合、サイズは自動で判断されます。ただし自分の意図した通りになるとは限りません。レイアウトが乱れてしまう可能性もあります。
次に「アドバンス(コード変更が必要)」を選択した場合がこちら。
取得したコードは次のようになります(ヘルプより抜粋)。
<style type="text/css"> .adslot_1 { width: 320px; height: 50px; } @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>
コードの編集
コード取得時点で編集することはできないので、コードを貼り付けた後編集する必要があります。
上のコードの場合、広告サイズの分岐条件は次のようになります(単位はpx)。サイトを閲覧しているPC・タブレット・スマホの画面横幅で条件が分かれています。
- 指定がない場合 → 320×50
- 500px以上の場合 → 468×60
- 800px以上の場合 → 728×90
広告サイズを変更する画面横幅の条件を変更したい場合は「@media (min-width:500px)」で指定します。
その時表示される広告サイズを変更したい場合はその次の「{ .adslot_1 { width: 468px; height: 60px; }」を変更します。(※「.adslot_1」とありますが、僕が試した時は「.my_adslot」となっていました。)
このコードを一つ入れるだけで、設定されたサイズの広告が自動で表示されるようになります。
レスポンシブ対応のWordPressテーマで広告サイズを分岐する方法
なぜWordPressで条件分岐させるのか?
上記設定により、レスポンシブに対応した広告が表示されるようになりましたがAdsenseのパフォーマンスレポートを見る際に、PC・スマホ(タブレット)の比較をするためには「ディメンション」で「広告ユニット」と「プラットフォーム」を追加する必要があり、見た目がごちゃごちゃしてしまいます(下の画面)。
僕の場合PCかそれ以外かの比較がすぐ分かるように、表示させる広告をWordPress側で分けて、広告の名前を「スマホ 記事下左 300✕250 レスポンシブ」とか「PC サイドバー右上 336×280」にしてパッと見て判別できるようにしました。特にスマホでの視認性(Androidアプリ:Google AdSenseを使用)が良くなりましたね。
この場合広告ユニットを「レスポンシブ広告ユニット」にしなくても「モバイルバナー」など適したサイズを選べば良いのですが、後からいつでもサイズを変更できますし、改めて広告ユニットを作成する必要もありません。またパフォーマンスレポートもそのまま引き継げます。
Adsenseは基本1ページに3つまで表示させることができます。記述した広告コードは3つ以上ありますが、条件で分岐して実際に表示させる広告が3つまでなら大丈夫なようです。(※Googleに問い合わせたわけではありません!)
条件分岐の方法
レスポンシブ対応のWordPressテーマを使用している場合、PCかモバイルで別のコンテンツを表示するには条件分岐タグ wp_is_mobile() が使えます(WordPressのバージョンが3.4以降)。コードは次の通り。
<?php if (is_mobile()) : ?> <!-- ここにスマートフォン用コンテンツを記述 --> <?php else: ?> <!-- ここにPC・タブレット用コンテンツを記述 --> <?php endif; ?>
上の「スマートフォン用コンテンツ」部分にモバイル用の広告を、「PC・タブレット用コンテンツ」部分にPC用の広告を記述しました。
このブログのサイドバー上に表示させているコードは以下のようにしています。
<?php if (is_mobile()) : ?> <!-- スマートフォン用コンテンツ --> <style> .my_adslot { width: 300px; height: 250px; } @media(min-width: 500px) { .my_adslot { width: 336px; height: 280px; } } @media(min-width: 800px) { .my_adslot { width: 336px; height: 280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- サイドバー右上 レスポンシブ広告ユニット --> <ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="ca-pub-**************" data-ad-slot="***********"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <?php else: ?> <!-- PC・タブレット用コンテンツ --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- PC サイドバー右上 336×280 --> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-***************" data-ad-slot="***********"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <?php endif; ?>
今使用している「Gush」というテーマでは、PCで表示されているサイドバー部分は、スマホ(または横幅780px以下の端末)で見た時に記事本文の下に表示されます。スマホ用広告サイズは基本的には 300×250 の広告が表示されますが、スマホでもタブレットでも横画面で見た場合など、横幅が500px以上のときには 336×280 が表示されるようにしました。WordPress側でPCと判断した場合には「レスポンシブ広告ユニット」ではなく単に 336×280 の広告が表示されます。
あとがき
以上で画面解像度別にAdsenseの広告ユニットを変更する設定は終了です。お疲れ様でしたm(_ _)m
WordPressのテーマによって元からAdsenseや他の広告を表示させる便利な設定が標準で実装されているものもあるので、使いやすい方を選べば良いのかなと思います。その点Gushはテーマのカスタマイズもしやすいので良いですね♪
難しいのは広告サイズと位置、配置する数のバランスです。広告だらけでも読者が読みにくいでしょうし、記事が表示されるまでの時間も気になります。できるだけ読者目線でブログ設計をしたいものです。