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

July 9, 2013August 10, 2017

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

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

せっかくブログ自体の表示は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>

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

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

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

相違点である３ヵ所で広告が切り替わるわけなので、
これを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;」の１文を追加。
これで見ている人の環境の横幅を取得します。

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

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