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>

VIEW DEMO SITE EXAMPLE

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

In-Content Area Script

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:

• Post In-line
• Post In-Content
• All Click Missile 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.

<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>

VIEW DEMO SITE EXAMPLE