アドセンスコード改変が可能に!レスポンシブデザイン対応

この記事は3分で読めます

アドワーズコード改変 変更が可能に

 

ワードプレスではレスポンシブデザインが当たり前になってきました。

でもそこで、ちょいと問題が・・

せっかくブログ自体の表示はPC、スマホで最適化されるというのに、
そこに貼り付けているアドセンスなどはサイズがそのまま・・

結局、ブログはスマホでもキレイに表示されても
アドセンスが横長だったりすると画面からはみ出して表示されたりするハメになってました。

 

ワードプレスの方でもそれを知ってか知らずか、
wp_is_mobile() という関数が準備されましたが、
この場合テーマの中に直接アドセンスコードを書かないといけないです。

 

そもそも、googleアドセンスがコードの可変を一切認めていなかったから起きていた問題だったのですが、
レスポンシブデザインの流れは止められないと思ったのか、
とうとう、googleが折れました(笑)

アドセンス広告コードのガイドラインが変更され、
広告コードを柔軟に変更することが可能になりました!

⇒ Google AdSenseの広告コード改変が可能に – レスポンシブに対応も(Yahoo!ニュース)

今回はそのやり方を説明します。

 

まずはアドセンスコードを取得する

 

今回例として、PC用には 468×60 の広告を、
スマホ用として 300×250 の広告のコードを取得します。

 

PC用:468×60 の広告

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1234567891011121";
google_ad_slot = "7632115499";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

 

スマホ用:300×250 の広告

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1234567891011121";
google_ad_slot = "2885652423";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

 

で、よーく見て欲しいのですが、
この2つで何が違うかといったら
「google_ad_slot」「google_ad_width」「google_ad_height」の3行だけです。

だからここを表示デバイスによって切り替わるようにすればいいのです。

 

2つのアドセンスコードを合体させる

 

相違点である3ヵ所で広告が切り替わるわけなので、
これをPCで見ているのかスマホで見ているのかで判断させて切り替わるようにすれば ok 。

書き方の例としてはこんな感じ。

 

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1234567891011121";
width = document.documentElement.clientWidth;
google_ad_slot = "2885652423";
google_ad_width = 300;
google_ad_height = 250;
 if ( width >= 980) {
  google_ad_slot = "7632115499";
  google_ad_width = 468;
  google_ad_height = 60;
}
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

 

まず「width = document.documentElement.clientWidth;」の1文を追加。
これで見ている人の環境の横幅を取得します。

で、 if ( width >= 980) { とあるのが、
画面サイズがこれより大きかったら { }でくくった3行の方で表示してね、としている箇所です。

 

こんな感じで、PC表示用アドセンスコードと、スマホ表示用アドセンスコードを合体させたものをブログに貼り付ければ
表示環境に応じて広告サイズが切り替わるってわけです。

 

表示を確認してみよう

 

レスポンシブデザインで、実際にスマホでの表示確認等を行うには
こちらのサイトを利用すると便利です。

⇒ //mattkersley.com/responsive/

上部のフォームにURLを入力してリターンキーを押すと
ケータイサイズ(240)からPCサイズ(1024)までまとめて表示確認ができます。

環境に応じて広告サイズが変更されているかチェックしてみてくださいね!

 




  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事