1

My app is built using a 2-column design, with the right 300-pixel column being used to show one Adsense ad unit.

Since some pages are taller, I am wondering if there's a way to have jQuery determine the height of my #main_wrapper and show an additional ad unit if it exceeds a certain size in pixels. Sort of like this:

    // ad unit #1 shown here by default in all pages

<script>

$(document).ready(function(){

            if ($('#main_wrapper').height() > 660) {

            //show add unit #2
        }

});

</script>

My issue is with how to deal with wrapping the ad unit code with the jQuery/JS condition above. A typical ad unit is:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-123123123123";
/* Sidebar 300 Middle */
google_ad_slot = "123123123";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

How would I insert that inside the jQuery above?

pepe
  • 9,799
  • 25
  • 110
  • 188
  • 1
    Could you not clone the existing script block(s) relevant to ads, and simply append them in the newly added ad-components? – David Thomas Jan 02 '12 at 22:32
  • @david, not sure I understand how to do that - sorry - could you post an example? – pepe Jan 02 '12 at 22:37
  • I'd love to, but I've not used Google's AdSense, so I don't know which of the two `script` blocks you'd need to add/duplicate/clone *or* to where you'd need to append them. My previous comment was a suggestion, of sorts, but without actual knowledge to back it up. – David Thomas Jan 02 '12 at 22:41
  • thx - actually both script blocks are needed for an ad to display - even if you're showing more than one - each has to have 2 script blocks – pepe Jan 02 '12 at 22:42

2 Answers2

0

Maybe you should include this strings in the needed block?

 if ($('#main_wrapper').height() > 660)
 {
  google_ad_client = "ca-pub-123123123123";
  google_ad_slot = "123123123";
  google_ad_width = 300;
  google_ad_height = 250;
 }
Feanor
  • 3,568
  • 5
  • 29
  • 49
0

Something like:

Edit: Code changed as previous was causing error parsing </script>

Edit: After reading this replaced jquery's .append() with pojs and script element is being added to DOM tree

$(document).ready(function(){

    function adUnit(client, slot, width, height) {
        var unit = '<!--\n';
            unit += 'google_ad_client = ' + client + ';\n';
            unit += 'google_ad_slot = ' + slot + ';\n';
            unit += 'google_ad_width = ' + width + ';\n';
            unit += 'google_ad_height = ' + height + ';\n';
            unit += '//-->';

        var script = document.createElement('script');
            script.type = 'text/javascript';
            script.text =  unit;

        document.head.appendChild(script);
        console.log('adUnit executed');
    }
    adUnit(1, 2, 3, 4);

});
Community
  • 1
  • 1
T I
  • 9,785
  • 4
  • 29
  • 51
  • tom i get unterminated string literal error on firebug - do you know if some chars need to be escaped? – pepe Jan 02 '12 at 23:04
  • seems like it didn't like `` have taken a slightly different approach though it doesn't seem to appear in the element inspector in chrome will investigate :-) – T I Jan 02 '12 at 23:43
  • thx tom - this seems trickier than i thought - the new code throws an error that i can't locate - it says "ca is not defined" – pepe Jan 03 '12 at 03:26
  • i also think that the second script block needs to be next to the first, cannot be added to – pepe Jan 03 '12 at 04:04