Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adsense with AJAX

I read this, this and this, but I think my situation is different. I don't need to refresh Ads everytime I make an AJAX call.

I have a page call it "mypage.php". I load Adsense advertisement into first div, when page is opened. My second div is empty.

After DOM is fully loaded, i make an AJAX post. And put the result into "lower_content" div. Does this break Adsense TOS?

<body>
  <div id="adSense_content>
    <script> adsense script </script>
  </div>

  <div id="lower_content">
    empty in start
  </div>
</body>

My js file:

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: "/getit",
    success: function(data) {
            $("#lower_content").html(data);
        }
  });
}

Note: Why I don't load second content when page is opening? Because AJAX call replies in 6-7 seconds. When server load is high, response comes even in 10-15 seconds. To not to make visitor wait with empty page, or even bounce from the page. I show layout to visitor in start, and load content when the response of AJAX call came.

edit: Putting an ad to an empty page is againts Adsense TOS. But the page that I mentioned is empty while loading the table data. After loading the full table with AJAX the page is loaded with content. But ad is put while loading the html page.

like image 442
trante Avatar asked May 31 '12 13:05

trante


2 Answers

The default google adsense code is something like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- banner-name -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-12345678901234950"
     data-ad-slot="987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Spit the code up into 3 parts to make it work on ajax loaded content.

Include the google script somewhere in your page (in your <head> for example) just once.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Place the google code in your (ajax) content wherever you want the banner(s)

<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-12345678901234950"
     data-ad-slot="987654321"></ins>

Trigger this function after your content has changed via ajax. (don't forget to trigger this on page load too, to display ads when pages isn't loaded via ajax.)

function displayGoogleAds(){
    $('ins').each(function(){
        (adsbygoogle = window.adsbygoogle || []).push({});
    });
}

Ps. I'm not sure if google will allow this, since your modifying/changing up the code a little bit. But i'm currently using it this way.

like image 141
Ludo - Off the record Avatar answered Sep 22 '22 08:09

Ludo - Off the record


Did some more research .. there is no easy solution to your problem.

If your site uses AJAX for a majority of the content then you can look at implementing the Google Ajax-Crawling (aka Hash-Bang) specs. This will ensure that that the Google bot and Adsense bot crawl your AJAX content. This will help with both relevant ads and search results. https://developers.google.com/webmasters/ajax-crawling/docs/specification

Or you have to wait till the Adsense for Ajax program start again. https://developers.google.com/adsense-for-ajax/

Update: Changed answer after more research.

like image 30
Mandar Limaye Avatar answered Sep 23 '22 08:09

Mandar Limaye