Google Adsense 広告のレスポンシブ・ウェブデザイン

WEBサイトにレスポンシブ・ウェブデザインを採用する際に、GoogleのAdsense広告をどうしたら良いかが悩みどころです。

海外のサイトで簡単な方法を公開している人がいます。

How to use Google AdSense Ads on Responsive Websites

なるほどAdsenseの埋め込みコードを少しいじる方法のようです。

Javascriptのwindow.innerWidthでブラウザの幅を検知して、幅に合わせて、

google_ad_slot = “<広告ユニットのID>”;
google_ad_width = <広告ユニットの幅>;
google_ad_height = <広告ユニットの高さ>;

を切り替えるように変更する方法です。

<!--
    google_ad_client = "ca-<サイト運営者ID>";
    if (window.innerWidth >= 800) {
        google_ad_slot = "広告ユニットAのID";
        google_ad_width = 728;
        google_ad_height = 60;
    } else if (window.innerWidth < 400) {
        google_ad_slot = "広告ユニットBのID";
        google_ad_width = 300;
        google_ad_height = 250;
    } else {
        google_ad_slot = "広告ユニットCのID";
        google_ad_width = 468;
        google_ad_height = 60;
    }
// -->
<script type="text/javascript" 
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

しかしこの方法、危うく実装しかけたのですが、コードを変更することが許されておらずGoogle Adsenseの規約違反になってしまうようなので止めた方が良さそうです。

替わりにとった方法は、PHPでHTTP_USER_AGENTの文字列から、iPhoneかAndroidの文字が含まれる場合は小さめの広告ユニットのコードを、そうでなければ通常の広告ユニットのコードを貼るように対応しました。

	$outSmall=<<<__AD1END__A
<script type="text/javascript"><!--
google_ad_client = "ca-<サイト運営者ID>";
/* 234x60 text/image */
google_ad_slot = "<iPhoe,Android用の小さい広告ユニットID>";
google_ad_width = 234;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
__AD1END__A;
	$outMid=<<<__AD1END__B
<script type="text/javascript"><!--
google_ad_client = "ca-<サイト運営者ID>";
/* 468x60, 作成済み 09/03/31 */
google_ad_slot = "<通常用に作成した広告ユニットID>";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
__AD1END__B;
	$out="";
	$dev="pc";
	if(
		strstr($_SERVER['HTTP_USER_AGENT'],"iPhone")
		||strstr($_SERVER['HTTP_USER_AGENT'],"iPod")
		||strstr($_SERVER['HTTP_USER_AGENT'],"Android")
	){
		$env ='iPhone_Android';
	}else{
  		$env = 'pc';
	}
	if(strstr($env,'pc')){
		$out=$outMid;
	} else {
		$out=$outSmall;
	}
	echo  $out;

一部のタブレットデバイスのブラウザで表示される広告が小さかったりしますが、小さい広告が出てしまう分には問題ないと考えます。

（本当は、Javascriptでブラウザの幅に合わせた広告サイズになるようにしたいのですが、Googleのポリシー違反を冒してまでやることではないと判断しました。）