Home/ Questions/Q 8562969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T16:51:03+00:00

I’m looking to fit Google AdSense ads into a responsive design (specifically using Twitter

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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