Load Google Ad code based on $(document).width()

Question

Implementing Google Ads but trying to serve one of two ad script depending on the $(document).width().

Read up and searched around as best I could, and what I've got thus far doesn't appear broken (no visible errors) other than it doesn't actually insert a Google Ad. (yup, misses the whole point there!)

First I'm setting the area to hold the ad:

<div id="google-ad"></div>

Followed by logic to determine the document width, and insert the necessary Google Ad script:

if ( $(document).width() < 728 ) {
    $("#google-ad").html('<script type="text/javascript"><!--google_ad_client = "ca-pub-GOOGLE-ID";/* AD NAME HERE */google_ad_slot = "GOOGLE-NUMBER"; google_ad_width = 320; google_ad_height = 50;//--><\/script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><\/script>');
} else {
$("#google-ad").html('<script type="text/javascript"><!--google_ad_client = "ca-pub-GOOGLE-ID";/* AD NAME HERE */google_ad_slot = "GOOGLE-NUMBER"; google_ad_width = 728; google_ad_height = 90;//--><\/script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><\/script>');
                });

In theory, I think this works but it's actually not working. So, I'm certainly doing something incorrectly. Would welcome any help or direction.

Thanks.

Does either of the `$("#google-ad").html('...')` lines work if you include it on its own? @VIDesignz - I think `<\/script>` in a string literal is to stop the browser seeing `` and ending the script block. — nnnnnn, Dec 08 '12 at 04:37
@nnnnnn I thought that might be the case...though my second comment is legit — VIDesignz, Dec 08 '12 at 04:40

score 0 · Answer 1 · answered Dec 08 '12 at 04:42

0

You said that the logic to determine the document width is followed after the div you want to insert into, that leads me to believe that the DOM is not ready yet and you're not getting a width back (probably undefined), in this case just call the logic after a ready event is fired or use .load if you want to wait for images, etc to load which may alter the doc width

$(document).ready(function () {
    //put your ad load logic here.
});

answered Dec 08 '12 at 04:42

shannonman

841
4
8

I've set the .html to .text to see if the width was being reported, and I can output two different bits of text but not scripts. @VIDesignz was correct, though. The ); was causing a problem but it still doesn't output the script. – Nathan Dec 08 '12 at 04:50
Dump $(document).width() to the console or even just toss it in an alert - what does it give you? I'm betting 'undefined' because you are calling it before the dom is ready. – shannonman Dec 08 '12 at 04:54
It just output the number 1407 (changes if I change the browser window and refresh). – Nathan Dec 08 '12 at 05:09
Well ya learn something new everyday - apparently jquery's insertion methods cause problems inserting script tags (http://stackoverflow.com/questions/610995/jquery-cant-append-script-element). I made a test page and confirmed it, when I insert using plain old Javascript (document.getElementById('google-ad').innerHTML = '...') it works flawlessly. My first comment still stands though you should wait for the dom to be ready before attempting to manipulate it :) – shannonman Dec 08 '12 at 05:43
Thanks @shannonman - ultimately, I went with a different approach. I'm using a mobile detection PHP script to determine the user agent and thus serve up the correct ad type. For those interested in the script, it's at http://code.google.com/p/php-mobile-detect/. – Nathan Dec 08 '12 at 16:26

Load Google Ad code based on $(document).width()

1 Answers1