Dynamic Adsense Insertion With JavaScript

Question

I can't believe how hard this is to find, but even in the Google developer docs I can't find it. I need to be able to dynamically, only with JavaScript insert adsense. I also looked on StackOverflow and some others have asked this but no response. Hopefully this will be a better explanation and will get some replies.

Basically, a user inserts my script, lets call it my.js (can't say what it is specifically at the moment.) my.js is loaded and in my.js some embedded media is displayed on their page then I need somehow to append the generated HTML from:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxx";
/* my.js example Ad */
google_ad_slot = "yyy";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Inside a specific <div> (or whatever) element. Any ideas?

P.S. No libraries like jQuery, and I can't insert HTML onto the page unless it's through JavaScript and it has to be inserted into a specific <div> i named (I'm using Sizzle for my JS library if that helps)

Solution 1

The simple technique used to asynchronously load the AdSense script proposed by other answers won't work because Google uses document.write() inside of the AdSense script. document.write() only works during page creation, and by the time the asynchronously loaded script executes, page creation will have already completed.

To make this work, you'll need to overwrite document.write() so when the AdSense script calls it, you can manipulate the DOM yourself. Here's an example:

<script>
window.google_ad_client = "123456789";
window.google_ad_slot = "123456789";
window.google_ad_width = 200;
window.google_ad_height = 200;

// container is where you want the ad to be inserted
var container = document.getElementById('ad_container');
var w = document.write;
document.write = function (content) {
    container.innerHTML = content;
    document.write = w;
};

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://pagead2.googlesyndication.com/pagead/show_ads.js';
document.body.appendChild(script);
</script>

The example first caches the native document.write() function in a local variable. Then it overwrites document.write() and inside of it, it uses innerHTML to inject the HTML content that Google will send to document.write(). Once that's done, it restores the native document.write() function.

This technique was borrowed from here: http://blog.figmentengine.com/2011/08/google-ads-async-asynchronous.html

Solution 2

I already have adsense on my page but also inject new ads into placeholders in my blog article. Where I want an advert injecting I add a div with a class of 'adsense-inject' then I run this script when the doc is ready and I know the adsense script has already been loaded for the other adverts:-

    $(document).ready(function()
    {
        $(".adsense-inject").each(function () {
            $(this).append('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3978524526870979" data-ad-slot="6927511035" data-ad-format="auto"></ins>');
            (adsbygoogle = window.adsbygoogle || []).push({});
        }); 
    });

Solution 3

Here is an updated implementation, this is useful if you need no manage the Ads using a common external javascript include, in my case I have a lot of static html files and it works well. It also offers a single point of management for my AdSense scripts.

var externalScript   = document.createElement("script");
externalScript.type  = "text/javascript";
externalScript.setAttribute('async','async');
externalScript.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.getElementsByTagName('body')[0].appendChild(externalScript);

var ins   = document.createElement("ins");
ins.setAttribute('class','adsbygoogle');
ins.setAttribute('style','display:block;');/*add other styles if required*/
ins.setAttribute('data-ad-client','ca-pub-YOUR-CLIENTID');
ins.setAttribute('data-ad-slot','YOUR-SLOTID');
ins.setAttribute('data-ad-format','auto');
document.getElementsByTagName('body')[0].appendChild(ins);

var inlineScript   = document.createElement("script");
inlineScript.type  = "text/javascript";
inlineScript.text  = '(adsbygoogle = window.adsbygoogle || []).push({});'  
document.getElementsByTagName('body')[0].appendChild(inlineScript); 

Example of usage:

<script type="text/javascript" src="/adinclude.js"></script>

Solution 4

What about having the vars (google_ad_client, etc) always in the head and dynamically append the other part like this:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
myDIV.appendChild(script); 

Solution 5

According to this page, it is possible to generate script tags and populate their src fields on the fly - which is what @noiv suggests (my version here should be self-contained; no external html or js libraries required). Have you tried this out? It does not seem so difficult...

function justAddAdds(target_id, client, slot, width, height) {
  // ugly global vars :-P
  google_ad_client = client;
  google_ad_slot = slot;
  google_ad_width = width;
  google_ad_height = height;
  // inject script, bypassing same-source
  var target = document.getElementById(target_id);
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
  target.appendChild(script);
}

View more solutions