Moved adsense code to end but ads sometimes do not display on initial site load

Question

This is the code skeleton I use for my website to move the ad loading to the bottom of the website. While nearly everything works well, I find that every now and then on first load of the page, no ad shows up. I'm not sure if it is because the browser does not know how to reload the completed DOM automatically, but its annoying because every time I hit refresh, an ad appears. I'm not sure if its google failing to serve ads or if its browsers not processing my code as intended.

    <!-- Website header here -->
    <div ID="ADW">ADVERTISEMENT</div>
    <div ID="AB"><!-- advertisement goes here after load --></div>
    <script type="text/javascript">
            // choose ad unit based on user's screen
            // size and format ad box to that size.
            var s="#####";
            var w=728;
            var h=90;
            if(window.innerWidth<500){
                    if(w>320){s="####";w=320;h=50}else{s="#####";w=234;h=60}
            }
            var AD=document.getElementById('AB');
            AD.style.height=h+'px';
            AD.style.width=w+'px';
    </script>
    <!-- Website content here -->
    <div ID="ADS">
            <!-- Ad will load in this DIV after webpage is loaded -->
            <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="text/javascript" async></script>
            <ins ID="XX" class="adsbygoogle"></ins>
            <script type="text/javascript">
                    // loaderr is only set on pages where ad isn't supposed to run.
                    if (typeof(loaderr)=='undefined'){
                    (adsbygoogle=window.adsbygoogle||[]).push({params:{data_override_format:"true",data_page_url:"http://example.com/",google_ad_slot:s,google_ad_client:"#####",google_ad_width:w,google_ad_height:h}});
                    }
            </script>
            <script type="text/javascript">
                    var x=document.getElementById('XX'); //cram ad in
                    x.style.height=h+'px'; // I know sizes are equal but ad can fit
                    x.style.width=w+'px';  // and this was tested.
                    // give title of all adsense IFRAMES
                    // to meet accessibility guidelines
                    var xif=document.getElementsByTagName('IFRAME');
                    for(var i=0;i<xif.length;i++){
                    xif[i].title='Advertisement '+i;
                    }
            </script>
    </div>
    <script type="text/javascript">
            // Display the ad but 10% of the time it doesn't appear.
            if (typeof(AD) !== 'undefined'){
                    AD.appendChild(document.getElementById('ADS'));
            }
    </script>

In order for me to rule things out, I want to know a way to add a repaint function to make the ad that was intended to show up actually show up. I'm not asking for an ad change during page load. I'm just asking for the ad to appear without requiring the user to hit refresh. Is there a javascript solution to this without violating adsense policies?

I replaced the adsense ad number and publisher ID with ##### to prevent others from messing around with my ads.

score 0 · Accepted Answer · 2015-04-17T04:33:18.773

0

Async attribute

The first <script> has an async attribute which means that it will load asynchronously. It looks like you have a "race condition" since it only works sometimes.

The quickest solution: would be to remove the async attribute as this will force the scripts to load synchronously (so, as long as you have the scripts placed at the bottom of the <body> in your HTML, the DOM will be ready by the time the scripts run).

Another option: To be more explicit about when you want the scripts to run, you can use the DOMContentLoaded or load events depending on if you want the scripts to run as soon as the DOM is ready or when everything else on the page is done loading. For example,

document.addEventListener('DOMContentLoaded', function() {
  // code to run after DOM has been loaded and parsed
  alert('DOM is ready!');
});

edited Apr 17 '15 at 04:33

answered Apr 16 '15 at 16:20

Has anyone been successful at making an income using google's async code with the async attribute removed? – Apr 16 '15 at 17:08
1

The `async` attribute doesn't have anything to do with income; it just allows your script to run asynchronously if you have multiple scripts, but if you need the DOM to exist before your script runs, then you need to program it that way with either 1) a synchronous script at the bottom of the ` – Apr 17 '15 at 04:27
It did somewhat, but I decided now its best to move the ad code closer to the top. Thanks for your help tho. – Apr 17 '15 at 04:40

Moved adsense code to end but ads sometimes do not display on initial site load

1 Answers1