当サイトでもスマートフォンからのアクセスが半分近くを締めるようになってきたのでAdsenseをスマートフォンに対応させることにしました。

今現在Adsenseでは同期と非同期のコードが取得可能になっており、それぞれのパターンを調べたので載せておきます。今回、僕の場合は同期コードをつかいました。

同期コードの場合はJaveScriptで画面幅を取得してコード自体を切り分ける感じで、非同期コードの場合はmedia queryを使って挿入したコードを切り替えるっぽい（試してません）
ただし、どちらの場合も画面の回転に追随するようではないのですが、それくらいはよしとしておきます。

同期コードパターン

<script type="text/javascript">
<!--google_ad_client = "ca-pub-5703789862033700";
width = document.documentElement.clientWidth;
google_ad_slot = "2833442408";
google_ad_width = 234;
google_ad_height = 60;
 if ( width >= 580) {
  google_ad_slot = "1356709207";
  google_ad_width = 468;
  google_ad_height = 60;
}
//-->
</script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

リンク先をご覧いただくとわかりやすいですが、javascriptによって画面幅に対応する方を設定するようにしています。

アドセンスコード改変が可能に！レスポンシブデザイン対応 | みやこ的アフィリ道

非同期コードのパターン

こちらは試していませんがコードを見る限りは挿入するINSタグに対してCSSのmedia queryでサイズを切り替える感じです。

AdSense 広告コードの修正 – AdSense ヘルプ

同期VS非同期

いやそもそも非同期ってなんだろう。意味通りのものかと調べてみると確かにそうです。メリットは非同期のほうがページの読み込みに影響を与えないということ。ということはモバイルとかだと結構影響がありそう。ということで近いうちにやり直してみようと思う。

実は今までCSSのmedia queryを使ってdisplay:noneでPC向け広告を消していたのですがこれは禁止だったらしい。今回、記事上に広告を配置したのでサイドバーのものは排除したのでそれに伴って取りやめました。垢バンとかググ八とかこわいもんね。