Responsive Google Adsense Ads Tutorial
Responsive Google Adsense ads allow you to display different sized ads based on the width of your visitors screen. The technique has recently been officially approved by Google.
Creating responsive Google Adsense ads is pretty easy once you get the hang of it, not to mention fun when you magically see those ads change size!
Works with Click Missile and HeatMap AdAptive
Ideally you will use the following scripts in conjunction with Click Missile plugin and HeatMap Adaptive theme (which makes the job a whole lot easier). Just paste your ad code into a Click Missile ad or HeatMap Adaptive widget and you are good to go.
The ideas contained in this post are based upon Google’s acceptable modifications and Amit Argawal’s responsive Adsense article.
This post contains 3 variations designed to suit different scenarios:
- Non-Content Area (sidebars, leaderboards etc)
- Full Width Content Area (banner ads within page and post content)
- In-Content Area (square and rectangle ads within pages and post content)
Remember to REFRESH your browser window when testing to see ad sizes change.
‘Non-Content’ Area Script

This code snippet is best for use in areas such as the header, leaderboard, footer and sidebars (where it’s easy for Javascript to detect the space currently available for an ad):
In Heatmap Adaptive this refers to the following widget positions:
- Header
- Leaderboard
- Site Top
- Primary and Secondary Sidebars
- Site Bottom
The script works by detecting the size of the containing div placed around the script itself.
The containing div must always have a unique id.
This script example is switching between a 728px link unit and a 468px link unit.
<div id="change-this-to-a-unique-id"> <script type="text/javascript"> // replace with your publisher id google_ad_client = "ca-pub-your-id-here"; divId = document.getElementById("change-this-to-a-unique-id"); // get the width of the containing div divWidth = divId.offsetWidth; // your default ad google_ad_slot = "your-468x15-ad-slot-number-here"; google_ad_width = 468; google_ad_height = 15; // if there is enough space then this ad will show instead if (divWidth >= 728) { google_ad_slot = "your-728x15-ad-slot-number-here"; google_ad_width = 728; google_ad_height = 15; } // optional custom ad channel google_ad_channel = "your-custom-ad-channel-id-here"; </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>
Full Width Content Area Script

This code snippet is best for wide ads (such as banner ads) in areas that are within the main content area of the page or post.
In HeatMap AdAptive this refers to the following widget positions:
- Blog Top
- Post Below
- Blog Bottom
The script works by detecting the size of the theme content area container div around the script itself. In the case of HeatMap AdAptive this container div is called #heatmapthemead-the-content-container (you will need to change this if you are using a different theme).
This script example switches between banners ads 728px, 468px and 320px sizes.
<script type="text/javascript"> // replace with your publisher id google_ad_client = "ca-pub-your-id-here"; /* This example uses the content div for HeatMap AdAptive. Replace heatmapthemead-the-content-container with whatever the main content container div is for your theme. */ divId = document.getElementById("heatmapthemead-the-content-container"); /* If the containing div has any left or right padding then subtract it for more accurate width detection */ divPadding = 0; // get the width of the content containing div divWidth = divId.offsetWidth - divPadding; // your default ad google_ad_slot = "your-320x50-ad-slot-number-here"; google_ad_width = 320; google_ad_height = 50; // if there is enough space then this ad will show instead if (divWidth >= 468) { google_ad_slot = "your-468x60-ad-slot-number-here"; google_ad_width = 468; google_ad_height = 60; } if (divWidth >= 728) { google_ad_slot = "your-728x90-ad-slot-number-here"; google_ad_width = 728; google_ad_height = 90; } // optional custom ad channel google_ad_channel = "your-custom-ad-channel-id-here"; </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
VIEW DEMO SITE EXAMPLE
This code snippet is best for square and rectangular ads in areas that are within the main content area of the page or post. In HeatMap AdAptive this refers to the following widget positions: Again the script works by detecting the size of the theme content area container div around the script itself, but in this variation you will notice that each divWidth is wider than the dimensions of the ad its associated with. This is so that the square and rectangular ads still have space on the right hand side of the ad for text to wrap around as the ads get smaller. This script example swtiches between rectangle ads 336px, 300px and 250px.
In-Content Area Script
<script type="text/javascript">
// replace with your publisher id
google_ad_client = "ca-pub-your-id-here";
/*
This example uses the content div for HeatMap AdAptive.
Replace heatmapthemead-the-content-container with
whatever the main content container div is for your theme.
*/
divId = document.getElementById("heatmapthemead-the-content-container");
/* If the containing div has any left or right padding then subtract it
for more accurate width detection */
divPadding = 0;
// get the width of the content containing div
divWidth = divId.offsetWidth - divPadding;
// your default ad
google_ad_slot = "your-250x250-ad-slot-number-here";
google_ad_width = 250;
google_ad_height = 250;
// if there is enough space then this ad will show instead
if (divWidth >= 500) {
google_ad_slot = "your-300x250-ad-slot-number-here";
google_ad_width = 300;
google_ad_height = 250;
}
if (divWidth >= 650) {
google_ad_slot = "your-336x280-ad-slot-number-here";
google_ad_width = 336;
google_ad_height = 280;
}
// optional custom ad channel
google_ad_channel = "your-custom-ad-channel-id-here";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
I implemented this on my site. Came out great.