21

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

1
  • Ok, so I tried another angle, and I'm still getting that same error. I created a component in Joomla which just displays the google ad code - sportsneo.com/google-ads And I thought I'd call it in using Ajaxify - which works well for other sites I've done with ajax content, but for some reason this google adsense code hates me.. sportsneo.com/fantasy-killed-my-hsc <- the page where the google adsense code is supposed to load (right hand side) in FF it goes to a blank page with the error and IE doesn't display anything in the box where it's supposed to go.. :(
    – SoulieBaby
    Jul 17, 2009 at 14:07

9 Answers 9

24

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...

6
  • 13
    What is Google's policy on doing this? Are you violating the AdSense terms of service? Feb 14, 2011 at 17:46
  • 2
    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. Nov 15, 2011 at 9:54
  • 1
    Have any1 asked in Adsense forum whether this is violation of Google Adsense Policy
    – suraj jain
    Feb 23, 2012 at 10:50
  • 1
    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. Nov 9, 2012 at 16:06
  • 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. Nov 9, 2012 at 18:23
3

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

1
  • 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.. :)
    – SoulieBaby
    Jul 17, 2009 at 12:21
1

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.

1

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.

1
  • 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?
    – Ana DEV
    Sep 4, 2015 at 7:19
0

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.

1
  • 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 :)
    – jaywon
    May 19, 2010 at 1:41
0

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.

0

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.

0

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.

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.