jQuery append Google Adsense to div
https://stackoverflow.com/questions/1142861
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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
Solution
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...
OTHER TIPS
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:
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.
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.
I had this exact same problem. I eventually solved it by using jQuery to load an with a src pointing to an html file that contains the Google AdSense javascript. This is rather inelegant, since the Google AdSense code creates an <iframe>. And, I happen to be working with a Facebook application, so in my case, I've got an <iframe> (the Google Ad) in an <iframe> (the one I used to get around the Firefox error) in an <iframe> (my Facebook app). But, it works.
Danny's answer explained the basic solution for this after I unsuccessfully experimented extensively on my own, so thanks! However, I needed a more elaborate solution as I had an unknown number of ads that I wanted to replace on a given page, so here's what I did:
The basic html (php) outline, ala Danny's format -- note my incrementing of the ad count, based on various factors of rows from a db query, i.e. such that it is impossible to know the count beforehand:
<html>
<body>
<? while ($r = mysql_fetch_assoc($rs)) { if (true) { ?>
<div class="adslide"><?=$ads++?></div>
<? } } ?>
</body>
</html>
I separated out the css for the adsense div I'll create in a moment as I have one for each adslide div created above:
<style> .adsense { display: none; } </style>
Here, placed in the bottom of the page, I get the actual ads from google into the html, the count being determined by how many slots I have for them from above:
<?php for ($i = 0; $i < $ads; $i++) { echo '<div class="adsense">'.$adscript.'</div>'; } ?>
And finally I cycle through all the adsense ads written into the html and fill them in, one by one, into the adslide slots that were created in the html, making sure each ad and slot are only used/filled once by removing them or their class after I'm done with them:
<script>
// http://stackoverflow.com/questions/1142861/jquery-append-google-adsense-to-div
$(function () { var b, a = $(".adsense").first();
for (; a.length > 0; a = $(".adsense").first())
{ b = $(".adslide").first(); b.append(a.find("iframe"));
a.remove(); b.removeClass("adslide"); } });
</script>
This is an extremely weird bug from google. I can only assume it's related to some protection google created to prevent people from hiding their ads (by positioning them offscreen or behind other html elements or something) to try and collect impression counts without actually displaying ads (i.e. so you could put a million of these in the html but the user would never see them, and you collect the cash until google finds out). However, the fact that this bug does not show up in IE and Safari but does in Firefox and Google's own Chrome... That's weird. They should definitely fix this on their side.
For those who are working with the same software: I ran into this problem myself when implementing a jQuery Carousel (http://sorgalla.com/projects/jcarousel/) that had ads mingled with user submitted photos in the carousel.
Only this code working
var i = 0;
obj = $(".materialContent p");
size = obj.size();
for (i=0; i<size; i++)
{
cur = obj[i];
if (i == 2)
{
$("#mainTopAdvDiv").appendTo(cur);
}
}
Do not remove, move full div.
I use this variant. All good!
$(document).ready(function() {
$("div.youtube_ad").html("<iframe src='/adsense.html' width='350' height='290' scrolling='no'></iframe>")
});
In adsense.html put you AdSense code 'AsIs'.
In the link to the page that was being loaded via ajax, I set data-ajax="false" and then on the page that was loaded I ask the user to use the back button.
This is how I would do it. Simple and short.
<script>
$(window).load(function(){
$('#adsense').fadeIn(0);
});
</script>
<div id="adsense" style="display:none;">
[YOUR ADSENSE SCRIPT HERE]
</div>
