Adding Adsense Code in Responsive Design

We needed to be able to display different sized adsense ad’s based on the end user’s display size. What was happening is the large banner advertisements would ‘break’ the design on smaller resolution screens like iphone’s and android phones. In order to accomplish this, we had to adjust the adsense javascript, in accordance with Google Adsense TOS for responsive design.

This is what the modified adsense code for responsive design looks like:

<script type=”text/javascript”>
google_ad_client = “ca-publisher-id”;
width = document.documentElement.clientWidth;
google_ad_slot = “1234567890”;
google_ad_width = 320;
google_ad_height = 50;
if (width > 500) {
google_ad_slot = “3456789012”;
google_ad_width = 468;
google_ad_height = 60;
}
if (width > 800) {
google_ad_slot = “2345678901”;
google_ad_width = 728;
google_ad_height = 90;
}
</script>

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

This javascript will display the appropriate advertisement based on the users device settings. If they are greater than 800px wide, they will get the large banner, between 500px and 800px the medium banner, and under 500px wide resolution it will display only mobile adsense banner.

This post is somewhat redundant now with adsense addition of their own responsive ads.