Menu
I'm looking to fit Google AdSense ads into a responsive design (specifically using Twitter Bootstrap).
The challenge is that with a responsive design the width of the container can change depending on the width of your browser window. While this is one of the major strengths for responsive design, it can be difficult to fit fixed-width content, like advertisements. For example, a given container may be 300px wide for users viewing the page with a browser at least 1200px wide. But in a 768px wide browser window, the same container might only be 180px wide.
I'm looking for JavaScript (jQuery?) solution to load the largest ad format that fits the width of the container.
Assume I have the following Ad Slots (ad formats):
name width x height slot_id
slot_180 180 x 160 1234567890
slot_250 250 x 250 2345678901
slot_300 300 x 250 3456789012
slot_336 336 x 280 4567890123
slot_728 728 x 90 5678901234
Here's the script that I need to include:
<script type="text/javascript"><!--
google_ad_client = "ca-ABCDEFGH";
google_ad_slot = "[###slot_id###]";
google_ad_width = [###width###];
google_ad_height = [###height###];
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>';
And here's some sample html:
<body>
<div class="row">
<div class="span3"><p>Lorem ipsum</p></div>
<div class="span3" id="adSlot1"><!-- [### INSERT AD 1 HERE ###] --></div>
<div class="span3"><p>Lorem ipsum</p></div>
<div class="span3"><p>Lorem ipsum</p></div>
</div>
<div class="row">
<div class="span4" id="adSlot2"><!-- [### INSERT AD 2 HERE ###] --></div>
<div class="span4"><p>Lorem ipsum</p></div>
<div class="span4" id="adSlot3"><!-- [### INSERT AD 3 HERE ###] --></div>
</div>
</body>
I'd like to show the largest ad slot that fits in the given container.
For example:
If #adSlot1 is 300px wide, let's show slot_300 (or rather the id: 3456789012 along with its width and height in the AdSense JavaScript).
Now let's say you view the page on another device and #adSlot1 is now 480px wide. Now let's use slot_336. 1000px wide element? Use slot_728. Get it?
Note that it's against Google's TOS to render all different slots and merely .show() / .hide() depending on the width. Instead if the ad JavaScript is called, it must be visible on the page. (Imagine how this would screw up everyone's reports if hidden ads were counted as impressions!)
I'm also not so concerned with folks stretching and shrinking their browser window during a page view. But bonus points if there's a savvy answer to this. Until then, this can load once per page load.
What do you suggest is the best, most elegant way to accomplish this?
777
AdSense does not support fluid widths (not that I know) but you can serve different sizes depending on actual container size using JavaScript.
Have a look at this:
http://james.cridland.net/code/dynamic_google_adsense.html
EDIT
It would be helpful if you explained how you have used the example in the above link.
Here is a more detailed example as a jQuery plugin that should work in theory.
var google_ad_slot, google_ad_width, google_ad_height;
(function( $ ){
$.fn.google_ads = function(slots) {
/* Sort slots by width descending */
slots.sort(function(a, b){
var a1 = a[0], b1 = b[0];
if(a1 == b1) return 0;
return a1 > b1? -1: 1;
});
return this.each(function(){
/* Get slot container width */
var width = $(this).width();
/* Find fitting slot */
var slot = null;
$.each(slots, function(){
slot = this;
if(width >= slot[0]){
return false;
}
});
if( slot !== null ){
/* Set global variables for external script */
google_ad_slot = slot[2];
google_ad_width = slot[0];
google_ad_height = slot[1];
/* Append script to slot container */
var script_el = $('<script>', {
'type': 'text/javascript',
'src': 'http://pagead2.googlesyndication.com/pagead/show_ads.js'
}).on('load', function() {
/* May need to wait with next slot until script is loaded */
console.log('loaded');
});
$(this).append(script_el);
}
});
};
})( jQuery );
Example usage [width, height, slot]
<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;"></div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;"></div>
<script type="text/javascript">
var google_ad_client = "ca-pub-527527527527527";
$('.slot').google_ads([
[180, 160, 1234567890],
[250, 250, 2345678901],
[300, 250, 3456789012],
[336, 280, 4567890123],
[728, 90, 5678901234]
]);
</script>
A more likely (and uglier) way to succeed would be:
<script type="text/javascript">
var get_google_ad_params = function(width, slots){
/* Sort slots by width descending */
slots.sort(function(a, b){
var a1 = a[0], b1 = b[0];
if(a1 == b1) return 0;
return a1 > b1? -1: 1;
});
/* Find fitting slot */
var slot = null;
$.each(slots, function(){
slot = this;
if(width >= slot[0]){
return false;
}
});
return slot;
};
var slots = [
[180, 160, 1234567890],
[250, 250, 2345678901],
[300, 250, 3456789012],
[336, 280, 4567890123],
[728, 90, 5678901234]
];
</script>
<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;">
<script type="text/javascript">
var params = get_google_ad_params($('#slot-1').width(), slots);
var google_ad_slot = params[2];
var google_ad_width = params[0];
var google_ad_height = params[1];
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;">
<script type="text/javascript">
var params = get_google_ad_params($('#slot-2').width(), slots);
var google_ad_slot = params[2];
var google_ad_width = params[0];
var google_ad_height = params[1];
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
This may seem a little rudimentary, especially compared to Sunn0's answer, but what about something as simple as this?
function findAd(){
$('.adSlot').each(function(){
var adSlotWidth = $(this).width();
if(adSlotWidth >= 728){
$(this).html(/* GOOGLE AD */);
} else if(adSlotWidth >= 336 && adSlotWidth <= 727){
$(this).html(/* GOOGLE AD */);
} else if(adSlotWidth >= 300 && adSlotWidth <= 335){
$(this).html(/* GOOGLE AD */);
} else if(adSlotWidth >= 250 && adSlotWidth <= 299){
$(this).html(/* GOOGLE AD */);
} else{
$(this).html(/* GOOGLE AD */);
}
});
}
$(document).ready(function(){
findAd();
$(window).resize(function(){
findAd();
});
});
Editing to include code
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
