Is it possible to use asynchronous google adsense, i.e. non-blocking?

Question

I know that there is a Asynchronous method of using Google Analytics but is there something similar for adsense? I can't find one from my current searches - I was wondering whether there is a common trick I'm missing?

Aristos · Answer 1 · 2012-01-25 15:09:52Z

this does it:

<script type="text/javascript"><!--
// dynamically Load Ads out-of-band
setTimeout((function ()
{
    // placeholder for ads
        var eleAds = document.createElement("ads");  
        // dynamic script element
        var eleScript = document.createElement("script");  
        // remember the implementation of document.write function
        w = document.write;
        // override and replace with our version
        document.write = (function(params)
        {
        // replace our placeholder with real ads
        eleAds.innerHTML = params;
        // put the old implementation back in place
        // Aristos, add this check because called more than ones
        //  and ends, with this symbol.
        if(params.indexOf("</ins>") != -1)
            document.write=w;
        });
        // setup the ads script element
        eleScript.setAttribute("type", "text/javascript");
        eleScript.setAttribute("src", "http://pagead2.googlesyndication.com/pagead/show_ads.js");
        // add the two elements, causing the ads script to run
        document.body.appendChild(eleAds);              
        document.body.appendChild(eleScript);           
}), 1);
                //-->
        </script>

see this blog item "Google Ads Async (asynchronous)" basically I've found a way to get the ad code to run truly async..

+1 for the smart solution provided in the link. It's very interesting the way it backups the standard document.write function and restores it later. The only downside is that I'm wondering if Google Adsense TOS allow to do this kind of stuff?
+1 for the idea, I take it and make it work a little better and post it here. I fail to make this GS_googleAddAdSenseService work with the other idea.

Aurelio De Rosa · Answer 2 · 2012-07-22 01:53:04Z

Yes, there is a way - using iframes. We do asynchronous loading of ad content on one of our customer's sites.

You first have to contact Google for support of their ads in iframes (which was not widely available back when we built that site). You can then use JavaScript to trigger the loading of the AdSense iframe content, which is what we do.

The solution is really straight forward once you have Google's iframe support.

Edit: Looks like - from the posts referenced by Virtuosi Media - this practice might not be welcome by Google...

Edit 2: This is the code we use in the iframe. Try it out to see if it works, maybe even without specifically asking Google for support. Removed type="text/javascript" language="JavaScript" for better legibility:

<head runat="server">
    <script src="http://partner.googleadservices.com/gampad/google_service.js">
    </script>

    <script>
        GS_googleAddAdSenseService("ca-pub-YOURKEY");
        GS_googleEnableAllServices();
    </script>

    <!-- For this method, it is not necessary to define the slots in advance 
         and we do not use the FetchAds function -->
    <script>
        GA_googleUseIframeRendering(true);    //<%-- This indicates iframe rendering for all slots --%>
    </script>
</head>
<body>
    <form id="formAd" runat="server">
        <div>
            <script>
                GA_googleFillSlotWithSize("ca-pub-YOURKEY", "AdSlotId",
                                          iframeWidth, iframeHeight);
            </script>
        </div>
    </form>
</body>

We fill all of our slots through adslot ids, so we are not seeing any PSAs.

Can you provide more detail on contacting Google about this? I don't see anything about it in my AdSense account.
Also, I'd be curious to know if the ad units still deliver relevant ads or just PSA's and how you worked around that problem.
Actually, we fill all of our slots through adslot ids, so we are not seeing any PSAs.
when using this method, I get GA_googleFillSlotWithSize is not defined error
@YuriKolovsky: looks like Google's script is not loading properly. See my Edit 2: you might need to apply for this method with Google.

Virtuosi Media · Answer 3 · 2010-08-24 18:17:55Z

They don't currently offer the option, as far as I can see. Your best option, if it was allowed by the Google TOS, would have been to use a placeholder element and replace it dynamically with JavaScript after the page has loaded. However, it appears as if it may be against the TOS. See this thread for more details.

score 2 · Answer 4 · 2010-10-19 07:42:17Z

You can use a placeholder, call the Adsense code and then switch the placeholder with the ad. I'm using something like this on my site:

if ( ad1 = document.getElementById('ad-top') )
{
    ad2 = document.getElementById('banner_tmp468');
    ad1.appendChild(ad2);
    ad2.style.display = 'block';
}

Google even recommends doing this when they say that you should have your most important ad position first in your HTML code. If you want to accomplish that you'll have to use JS or CSS to move less important ad units to the (visual) top of your page.

But as far as I know AdSense already renders ads asynchronously. I've only very rarely seen it block pageloading. Not sure about this though.

Aristos · Answer 5 · 2012-01-25 12:08:39Z

Because google say "lets make the web faster" I change the above code to load the google ads only when they are visible. The code is work "as is" only for one google place ad, but I think you can easy modify it for more ads. The different with the other code are

Load ads only if the are visible to the user
Loads ads and place them on a div (not on end of the page)
Works with all browsers because I load all items needed (not only the first)

Starting with the div that I place the ads later on.

<div id="adSpot" ></div>

<script type="text/javascript">
    // load the script with cache
    function getScriptCcd(url, callback)
    {
        jQuery.ajax({
                type: "GET",
                url: url,
                success: callback,
                dataType: "script",
                cache: true
        });
    };

    // to unbind the scroll I keep the total binds of scroll
    // in this example I have only one.
    var cPosaScrollExo = 0;
    // bind the scrool to monitor if ads are visible    
    function addThisScroll(RunThisFunction)
    {
        jQuery(window).scroll(RunThisFunction);
        cPosaScrollExo++;
    }
    // unbind all scroll if all they not needed any more
    function unBindScroll()
    {
        cPosaScrollExo--;

        if(cPosaScrollExo <= 0)
        {
            cPosaScrollExo = 0;
            jQuery(window).unbind('scroll');
        }
    }

    // here I check if the element is visible to the user with a 100pixel advanced.
    function isScrolledOnMatia(pioSimio) 
    {
        var SimioPouTheloNaFenete = (jQuery(pioSimio).offset().top - 100 );
        var scrollPosition = jQuery(window).height() + jQuery(window).scrollTop();

        return (scrollPosition >= SimioPouTheloNaFenete );
    }   

    // the ads informations
    google_ad_client = "pub-XXXXXXXXXXXXXXX";
    google_ad_slot = "XXXXX";
    google_ad_width = 468;
    google_ad_height = 60;

    var GoogleIsVisible = false;
    // we call this function on every window scroll
    function CheckAdsVisibility()
    {
        if(!GoogleIsVisible)
        {
            if(isScrolledOnMatia("#adSpot"))
            {
                unBindScroll();
                GoogleIsVisible = true;

                            // finally I go to show the ads
                LoadAdsLater();
            }
        }
    }

    // here is a modification of the function that load the ads
    function LoadAdsLater()
    {
        try
        {
                    // Aristos: nice trick here 
            // remember the implementation of document.write function
            w = document.write;

            // override and replace with our version
            document.write = (function(params)
            {
                jQuery("#adSpot").append(params);

                // put the old implementation back in place when
                            //  all writes are finish
                if(params.indexOf("</ins>") != -1)
                    document.write=w;
            });             

            // loading script
            getScriptCcd("http://pagead2.googlesyndication.com/pagead/show_ads.js");
        }
        catch(e)
        {
            // check for errors on debug
        }
    }

    // and here we setup the hole thin
    jQuery(document).ready(function() 
    {       
            // check if all ready is visible !
        CheckAdsVisibility();
            // bind the scroll
        addThisScroll(CheckAdsVisibility);
    });
</script>

I have test it and working with all browsers, I just use jQuery to be more safe that I am avoid browsers difficult.

ps, I have make similar code to load the google plus, and the facebook and all that items that load with out reason the most of the times.

Salman A · Answer 6 · 2012-07-13 19:52:55Z

up vote 0 down vote

There is no further need to do this. The Google AdSense's show_ads.js now somewhat asynchronous. You can read more about the gory details on the official blog:

Your Web, Half a Second Sooner

There is no need to change ad code.

answered Jul 13 '12 at 19:52

Salman A
20219

Laurence · Answer 7 · 2013-04-08 19:39:51Z

This asynchronous loading function is useful. I use it to pick the "perfect" size ad to obtain a full view in the available customer size window. As a result of post load heights and width adjustments, the definitive Adsene placeholders heights only become available after the body is fully loaded. Using this method enables me to display the "perfect" size Adsense ad or none if space is insufficient.

asked	2 years ago
viewed	3566 times
active	1 month ago

Is it possible to use asynchronous google adsense, i.e. non-blocking?

7 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged performance page-speed google-adsense or ask your own question.

Community Bulletin

Is it possible to use asynchronous google adsense, i.e. non-blocking?

7 Answers

Did you find this question interesting? Try our newsletter

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged performance page-speed google-adsense or ask your own question.

Community Bulletin

Related