AdSense Responsive Design Mod by Google

One of the most requested features for Google AdSense is to support responsive websites.

UPDATE 2013/11/05: Asynchronous and Responsive AdSense


If you are trying to follow Google’s guidelines on building websites for various screen sizes, you certainly read that Google recommends responsive design. Even Google AdSense team recommended responsive design in “Mobile Websites vs Responsive Design” article, they just “forgot” to mention how to use AdSense ads on such website.

Now the good news: Google is allowing you now to modify your AdSense code to support responsive design web sites. Google has modified their official acceptable modifications for Google AdSense code which includes responsive design.

What this means is there is still no native support for responsive website i.e. they will not do this automatically but rather you need to create several ad slots with different sizes, and change your code a bit so it uses several ad units.

Example of responsive AdSense code

<script type="text/javascript">
// default ad
google_ad_client = "ca-publisher-id";
google_ad_slot = "112345678901";
google_ad_width = 300;
google_ad_height = 250;

// responsive design mod
if (document.documentElement && document.documentElement.clientWidth) {
	var width = document.documentElement.clientWidth;
	if (width > 800) {
		google_ad_slot = "212345678902";
		google_ad_width = 728;
		google_ad_height = 90;
	} else if (width > 500) {
		google_ad_slot = "312345678903";
		google_ad_width = 468;
		google_ad_height = 60;
	}
}

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

NOTE: This code chooses ad unit on page load, it doesn’t reflect changing screen orientation on tablets for example.

Leave a Reply

Your email address will not be published. Required fields are marked *