“responsive” ads with adsense

Read Time:6 Minute, 9 Second

UPDATE

Google recently implemented a responsive ad block that essentially performs some media queries and returns the appropriate ad unit depending on screen size. My sample code block looks like:

<style>
.responsive { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive { width: 728px; height: 90px; } }
</style>
<script async src=“https://web.archive.org/web/20140331190344/http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– responsive –>
<ins class=“adsbygoogle responsive”
style=“display:inline-block”
data-ad-client=“ca-pub-3658299045266116”
data-ad-slot=“1962955043”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

I recently switched to a “responsive” web design and couldn’t find a good way to dynamically show the proper adwords ad format depending on the viewport of the visitor’s device. This snippet uses jquery to determine viewport width and then sets the appropriate ad channel variables for show_ads.js:

<script type=“text/javascript“><!–
	google_ad_client = “ca-pub-3658299045266116“;
	/* top */
	if ($(window).width()<728 ){
	google_ad_slot = “4414183254“;
	google_ad_width = 320;
	google_ad_height = 50;
	}else{
	google_ad_slot = “1020377061“;
	google_ad_width = 728;
	google_ad_height = 90;
	}
	//–>
	</script>
	<script type=“text/javascript“
	src=“http://pagead2.googlesyndication.com/pagead/show_ads.js“>

UPDATE: Today (May 23 2013) Google announced its now ok to modify the adsense code like I mentioned above (Woops! didn’t know I was breaking TOS)

You can read their post announcing the changes here. The relevant code snippets they provide for sites using responsive web designs looks pretty much identical to mine (minus the pointless reliance on jquery):

<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://web.archive.org/web/20140401135048/http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
 

More details can be found on the help pages for adsense advertisers located here.

 <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://web.archive.org/web/201404 01135048/http://pagead2.googlesyndicatio n.com/pagead/show_ads.js”>
</script>
 

More details can be found on the help pages for adsense advertisers located here.

Author: Ryan Underdown

My name is Ryan Underdown, I’m the director of search engine marketing for Web-Op where I get to work on lots of interesting projects. Please follow me on twitter.