What is the best way to render the largest ad slot that fits into its container when using a responsive design?

Question

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?

sunn0 · Accepted Answer · 2012-11-28T23:05:15.757

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>

score 2 · Answer 2 · answered Nov 28 '12 at 23:35

2

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

answered Nov 28 '12 at 23:35

ntgCleaner

5,865
9
48
86

Yes, this is what did before I got any answers here. I still have it implemented right now. I was hoping for a more elegant solution. But this is functional, at least for now. Thanks. – Ryan Dec 06 '12 at 03:30
I definitely understand you want it to be more elegant. What else would you like to see? Just less lines of code? or more optimized? – ntgCleaner Dec 11 '12 at 23:53
I like this if it works - better extension of the original suggestion at http://james.cridland.net/code/dynamic_google_adsense.html. The only thing is that the include script needs the google_ad_slot, google_ad_width, google_ad_height variables differently each time it is called unless they can just be in a query string to the script but when I researched I could not find any mention of it (see http://stackoverflow.com/questions/1142861/jquery-append-google-adsense-to-div). I don't think any of the above solutions are allowed by the T&C of Google Ads though so I won't dig deeper. Good luck :) – sunn0 Dec 12 '12 at 09:18

score 0 · Answer 3 · answered Dec 07 '12 at 17:40

You should be able to call sunn0's plugin on window resize and have it work on responsive too. You should look into throttling the resize event though. This is a good post to read on that.

http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/

What is the best way to render the largest ad slot that fits into its container when using a responsive design?

3 Answers3