Googleアドセンス広告サイズのPC・スマホ表示を切り替える簡単シンプルな方法。レスポンシブ広告ユニットの使い方

公開日: : ブログ , ,

00 2015 02 07mini1423304030

GoogleAdsenseの広告サイズをPCとスマホで表示を切り替えるには、「レスポンシブ」広告ユニットを使うととても簡単です。
PCやスマホ、タブレットなど、デバイスによって最適なサイズの広告が選択されるので、アドセンスの収益アップを見込めます。
テーマのphpなどを編集しなくても、簡単に導入できるので、「Google AdSenseの広告設定」だけでワードプレス初心者の方にでも手軽に導入できますよ。

 
 

 
 
 

たくろーど(@tkroad)です。こんにちわ。

ブログを書いている上で、やはり気になるアフェリエイトやアドセンス収益。
「お金のためにブログ書いてるわけじゃない!」というイケメンな方もいらっしゃると思うのですが、やはり収入が増えるっていうのはブログ更新の質や量へのモチベーションアップにつながるものです。

せっかく書いて読んでもらえる記事には、相応の有益な広告が表示されて欲しいもの。
アドセンス広告をPCやスマホの画面サイズに最適化されたベストなサイズで表示させると収益アップに繋がるわけなのですが、HTMLやCSSの知識が必要そうで敷居が高そうに見えます。

そこで、Googleアドセンスの「レスポンシブ広告ユニット」を使うと、とっても簡単にPCとスマホの広告サイズを切り替えられる設定ができるので非常におすすめ。
設定のための手順を紹介します。

Googleアドセンスの広告ユニットを取得する

Mini1423145905

GoogleAdSenseからコードを取得します。
①Google AdSenseを開いたら、
②「広告の設定」から
③「新しい広告ユニット」を選びます。

22 1423146333

①広告サイズから「レスポンシブ」を選び任意の名前をつけます。
②広告タイプを「テキスト広告のみ」「ディスプレイ広告のみ、「テキスト広告とディスプレイ広告」の中から選びます。
③保存してコードを取得すると、アドセンスコードが生成されます。

 
生成されたアドセンスコードはこんな具合です。


<script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>
<!-- レスポンシブルな広告のテスト -->
<ins class=\"adsbygoogle\"
     style=\"display:block\"
     data-ad-client=\"**-***-****************\"
     data-ad-slot=\"**********\"
     data-ad-format=\"auto\"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>	

 

これをWordPressなどのブログのアドセンスコードとして貼り付けると、PCやスマホに最適化されたレスポンシブルな広告ユニットを表示させられるのですが、もう少しだけ修正を加えていきます。

 

広告の種類を選ぶ

広告の種類を選ぶ際のポイントは2点です。
①「テキスト広告」と「ディスプレイ広告」のどちらを選ぶか、または両方にするのか
②「広告のサイズ」はどうすのるのか

①については、一般的には「テキストとディスプレイ」がサイト訪問者にとって種類の豊富な広告が表示されるため、クリック率が高いとされています。GoogleAdSenseでも「推奨」しています。

テキスト広告はこのように表示されます。

24 1423172591

ディスプレイ広告はこのような表示。

25 1423172814

「テキスト広告とディスプレイ広告」はサイト訪問者の検索履歴などからGoogleが判断して、両方が表示される可能性があるのですが、やはり表示される種類が多いほうが収益に結びつきやすいです。
見た目的には「ディスプレイ広告のみ」の方がクリックされやすそうな気はしますが、「テキスト広告」も合わせて表示させるのが収益化に結びつきます。

②の広告サイズについては、上記のコードの中では「auto」と表示されているところ、ここが実は変更可能です。

Mini1423232586

data-ad-formatの「auto」はPCやスマホの表示幅に合わせて、「横長サイズ広告」や「縦長サイズ広告」がランダムに表示されます。
その他に以下の広告サイズを指定することが出来ます。

rectangle(正方形に近い長方形)
horizontal(横長)
vertical(縦長)


“auto”の代わりに”ここに入力”
この「””」の中に入力する必要があります。(「”rectangle”」など)

それぞれの見た目はこちらのブログが参考になります。
<参考記事>
アドセンスのレスポンシブ広告が思った通りのサイズに表示されなかった時の対処法

スマホでもPCでも、あまりにも縦長だったり横長だったりする広告は「見た目がイマイチ」なので、ぼくは「rectangle(正方形に近い長方形)」を全てのアドセンスに設定しています。

見た目はどうかわるの?

ぼくが設定している「”rectangle”」サイズの広告表示は、このように表示されています。

サイドバーアドセンス広告(ディスプレイのみ)

<PC版>
60 2015 02 06mini1423234242

<スマホ版>
74 2015 02 07mini1423236428

more下アドセンス広告(ディスプレイ)

<PC版>
61 2015 02 06ini1423234364

<スマホ版>
72 2015 02 07mini1423236320

記事下アドセンス広告(ディスプレイ&テキスト)

<PC版>
62 2015 02 06mini1423234444

<スマホ版>
73 2015 02 07mini1423236386

このようにPCでもスマホでも、画面サイズに最適化された広告が、なるべく大きなサイズで、正方形に近い長方形の形で表示されます。
phpやcssの知識がなくても、Google AdSenseの広告ユニットのコード取得だけでレスポンシブな広告表示ができるのでお手軽ですね。

おわりに

ユーザーに最適化された広告は必然的にクリック率も広告単価も高くなるので、収益化に直に結びつきます。
ぼくはこのレスポンシブ広告に変更してまだ数日なので効果ははっきりと実感していませんが、2週間から1ヶ月位様子を見て、収益の変化をまたご紹介します。

グイッとあがるといいな\(^o^)/
 
 
たくろーど(@tkroad)でした。(・ω<)
 
 
<関連記事>
ブログのアフィリ収益アップ!AmazonJSプラグインを導入するためのFTPの設定方法
今年このブログのAmazonアフェリエイトでたくさん売れたモノ5つと何でこれ売れたの?ってモノ【2014年】
【一周年】ブログ書いてて良かったと思うこと4つ。酒の肴としての書く技術。


スポンサードリンク

ad_rspnsbl

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

MarsEditのプレビューをブラウザのブログ画面と同じ表示にすると使いやすくなる!

Macでブログ書くならMarsEditはほんとうに便利です。 デフォルトの設定でもすごく使いやす

記事を読む

WordPressのパーマリンクは悪いコト言わないから英数字にしておこうっていう話

photo credit: teamstickergiant via photopin cc

記事を読む

WordPressに固定の広告2つを横並びに表示するテーマ編集の設定方法

photo credit: angermann via photopin cc ブログを運営す

記事を読む

JETPACKからちょっと早い年賀状。2015年のブログを振り返ってみる

2015年も残すところあと1日というところで、WordPressプラグインのひとつJet

記事を読む

無料でオリジナルロゴが作れるsquarespace logoがすごい!!TwitterやFacebook用にピッタリ!

ブログやSNSのアイコンをちょっとかっこよさげに見直したいたくろーど(@tkroad)です。こん

記事を読む

iPhoneでブログ書くときテーブルをCCSで簡単に書くツールMobTabGen【moyashi氏】が便利だよ

iPhoneでブログを書くとき、HTMLやCSVを書くのはなかなか大変です。 Hタグ【<h

記事を読む

【一周年】ブログ書いてて良かったと思うこと4つ。酒の肴としての書く技術。

photo credit: Rosino via photopin cc このブログを

記事を読む

【Macアプリ】MarsEditでもうひとつのブログを追加登録する方法。複数のWordPressサイトの管理運営に便利!

ブログを書くためのエディタアプリはたくさんありますが、MacのブログエディタアプリならMar

記事を読む

【エイプリルフール!】ちょww Google AdSenseの今日の収益が他の惑星から上がってるんだがw

photo credit: bangdoll@flickr via photopin cc

記事を読む

フリーソフト2つで簡単!WindowsでMacのショートカットキーを使うための設定方法

photo credit: amanky via photopin cc Macのショート

記事を読む

ad_rspnsbl

  • iPhoneとかガジェットとかラーメンが好物な、たくろーど(@tkroad)が書くライフログブログです。もっと詳しく



    follow us in feedly

PAGE TOP ↑