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