jQuery append Google Adsense to div

jquery append adsense

34,258

Solution 1

The way I do this is by having a placeholder on the spot I want the ad to appear.

<html>
   <body>
      <div id="googleadgoeshere"></div>
   </body>
</html>

Then place the google-code in a container at the end of the page.

<div id="adsense" style="display:none;">all the google javascript goes here</div>

I then use jQuery to move the iframe the adsense code creates once the page is done loading.

$(window).load(function(){
    $("#adsense").find("iframe").appendTo("#googleadgoeshere"); 
    $("#adsense").remove();
});

If you just try to move the #adsense div you will end up with a blank page. If you try to do this most any other way, you will end up with a blank page. Google had built in active ways to check that the code is not moved. If it is, your page will be blank. Why google has done this is beyond me, but I have found this workaround to work for me...

Solution 2

You can't include external scripts that way.

To include javascript after the page has loaded, you should use jQuery's jQuery.getScript() function, but I don't know if that would work for Google Adsense.

A little more info can be found here:

http://geek.littleredstring.com/17-load-adsense-last-jquery

Solution 3

After trying and failing with the codes on here, I ended up taking the jQuery object that I was using and putting it in a new html page. Once I did that, I just used an iframe to place it on the page with the adsense.

Now, adsense and jQuery run at the same time with no problems.

Solution 4

Add a hidden DIV with adsense code in your page somewhere:

<div id='adsense' style="display:none">
    <script type="text/javascript"><!--
        google_ad_client = "ca-pub-xxxxxxxxxxxxxx";
        google_ad_slot = "xxxxxxxxxx";
        google_ad_width = 300;
        google_ad_height = 250;
        //-->
    </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

Using javascript create dynamic DIV for your ad to load:

$("body").append("<div id='adslot' ></div>");

Jquery code to insert the Ad:

var ad = $("#adsense").html();
$("#adslot").html(ad);

This works for me.

View more solutions

34,258

Author by

SoulieBaby

Hmmm what do you want to know? :)

Updated on July 09, 2022

Comments

SoulieBaby almost 2 years
I'm having issues with google adsense and it loading before my jQuery and killing my codes, so I thought I'd try to append the Google Adsense javascript to the appropriate div using the document ready function, here's the code I'm trying to write:
```
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $(".googleBanners").html("<script language='javascript' type='text/javascript'>\n" + "google_ad_client = 'pub-8487967187298044';\n" + "google_ad_slot = '1088799521';\n" + "google_ad_width = 250;\n" + "google_ad_height = 250;\n" + "</" + "script>\n" + "<script language='javascript' src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>" + "</" + "script>");
});
</script>
```
But I'm not so good writing javascript/jQuery so if someone could help me implement this that would be fantastic.

The error in FF I'm currently getting is "Error: google_protectAndRun is not defined". I'm not sure what that means, but I'm guessing I've written the jQuery code wrong.. lol
SoulieBaby almost 15 years

Thanks for the link, I tried that before coming here, for some reason the adsense code kills my other jquery scripts in IE.. :/ Will check out the getScript thing.. :)
jaywon almost 14 years

just a recommendation, learn how to use the post editing tools to highlight your HTML tags as code(as well as any code). then you're post will make sense :)
Scott Whitlock about 13 years

What is Google's policy on doing this? Are you violating the AdSense terms of service?
Sangram Nandkhile over 12 years

I agree with what Scott Says..Some one needs to clerify if this is violation of ad sense tos as we shall not make any changes in adsense code.
suraj jain about 12 years

Have any1 asked in Adsense forum whether this is violation of Google Adsense Policy
Tom Kincaid over 11 years

This almost works for me. Somehow the ad ends up on the top left of the page after the appendTo. It does move it to the googleadgoeshere, but it doesn't display where that div is.
Tom Kincaid over 11 years

Another issue with this is that the ad script only executes on the first page loaded. It doesn't execute or display on subsequent pages.
Zack Brady about 11 years

Tom, to fix your first issue make sure the div you are placing the ad into is has a position attribute value other than inherit.
Ana DEV over 8 years

How I can generate a random place for google advert?For example I have 10 post items and wanted 2 of them replace with google advert but randomly.How I can do it @krisrak?