Mobile app version of vmapp.org
Login or Join
Marchetta884

: Is it possible to use asynchronous google adsense, i.e. non-blocking? I know that there is a Asynchronous method of using Google Analytics but is there something similar for adsense? I can't

@Marchetta884

Posted in: #GoogleAdsense #PageSpeed #Performance

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?

10.06% popularity Vote Up Vote Down


Login to follow query

More posts by @Marchetta884

5 Comments

Sorted by latest first Latest Oldest Best

 

@Jennifer507

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.

10% popularity Vote Up Vote Down


 

@Pierce454

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.

10% popularity Vote Up Vote Down


 

@Welton855

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

10% popularity Vote Up Vote Down


 

@Correia994

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.

10% popularity Vote Up Vote Down


 

@Steve110

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme