Help Center Manage Your Account Ad Tag

How can I defer ads until after the page has finished loading?

Typically, content is loaded according to the components' order in the HTML source code. If you want visitors to see the site contents before seeing the ads to improve performance and visitor experience, you can choose the IFRAME serving code format, which loads independently from other components on the page. The other option is deferring the fetching and loading ads into DIV containers. This technique can be useful for websites that use asynchronous loading like AJAX or if you want to avoid using JavaScript's document.write(), which can trigger a warning in Chrome.

How it works

The process is similar to the single-ad-call solution to get all ads in one shot to increase performance. The difference between the two solutions is the order of execution. This solution displays the ad after the page contents have finished loading. Each ad placement calls a JavaScript function to push the ad into the specified DIV container. Each ad is tracked separately for impressions, clicks and other ad metrics. This method has 2 parts: setup DIV containers and displaying ads.

Wizard

For your convenience, you can follow a wizard to set up this ad tag or follow the instructions below. Please see section "Wizard" for the single-ad-call solution. One difference is that this method calls the JavaScript function AdSpeed_div(DIV_Container_ID,Zone_ID) instead of AdSpeed_display(Zone_ID).

Below is an example of the 2 steps that are generated from the wizard:

1. Setup DIV containers

For each ad placement, create an empty DIV container. The DIV is the place holder for the actual ad. The ad server will push ad content into this DIV later.

<h1>CONTENT FOR PAGE HEADER</h1>
Content Content Content
<div id="AdSpeed_HeaderAd"></div>
Content Content Content

<h1>CONTENT FOR RIGHT SIDEBAR</h1>
Content Content Content
<div id="AdSpeed_RightSideAd"></div>
Content Content Content

2. Preparing and Displaying Ads

This code gets ads from one or more zones in a single call to the ad server. It will then load the ad into the proper DIV container. If possible, place these calls near the closing BODY tag so that it loads after all the main contents. For each ad placement, call AdSpeed_div(DIV_Container_ID,Zone_ID) to instantly display the prepared ad to the visitor's browser without any additional call to the external ad server. If your page already uses jQuery, you should call AdSpeed_jQuery(DIV_Container_ID,Zone_ID) instead.

<!-- AdSpeed.com Serving Code 7.9.4 for 2 zones [Any Dimension] -->
<script src="//g.adspeed.net/ad.php?do=js&oid=XXX&zids=1234-2345&wd=-1&ht=-1&target=_top" type="text/javascript"></script>
<!-- AdSpeed.com End -->

<script type="text/javascript">
  AdSpeed_div('AdSpeed_HeaderAd',1234);
  AdSpeed_div('AdSpeed_RightSideAd',2345);
</script>

The parameter zids has multiple zone IDs (eg: 1234 and 2345) separated by hyphens "-". Change them to your own zone IDs and change oid to be your account ID.

Multiple Ads per Zone

If you want to pre-fetch multiple ads per zone, you can use the multiplier syntax. For example: zids=123x2-456 will get 2 ads from zone #123 and one ad from zone #456.

The call syntax to embed ad code into the DIV container:

AdSpeed_div(DIV_Container_ID,Zone_ID,Slot_Num); or,
AdSpeed_jQuery(DIV_Container_ID,Zone_ID,Slot_Num);

<!-- AdSpeed.com Serving Code 7.9.4 for 2 zones [Any Dimension] -->
<script src="//g.adspeed.net/ad.php?do=js&oid=XXX&zids=123x2-456&wd=-1&ht=-1&target=_top" type="text/javascript"></script>
<!-- AdSpeed.com End -->

<script type="text/javascript">
  AdSpeed_div('AdSpeed_HeaderAdOne',123,0);
  AdSpeed_div('AdSpeed_HeaderAdTwo',123,1);
  AdSpeed_div('AdSpeed_RightSideAd',456);
</script>

3rd Party and Rich-Media/HTML Ads

To make sure the ads display properly, you should have the correct ad dimensions for HTML ads. Ads from ad networks and 3rd party ad servers often need to load external JavaScript files and have nested and complex code. For these ads to display properly using this method, you might need to add the attribute "defer" into the script tag. This ensures that the browser does not execute the JavaScript code unexpectedly. For example:

<script type="text/javascript" src="http://third-party-ad-server"></script>

becomes

<script defer="true" type="text/javascript" src="http://third-party-ad-server"></script>

You can also use "async" attribute for the script tag if it only loads the ad and does not depend on other elements on the main page.

Request Ad Dynamically

You can use this method to create a dynamic ad request and push it into the DOM via the call AdSpeed_div(). The script loading process is asynchronous and does not block the loading sequence of other components. It is suitable for AJAX applications and on-demand advertising. It is also useful when want to fetch multiple ads first but do not display the individual ads until a certain event. For example: there are multiple tabs, each has one ad but the ad should not display until the tab is clicked and becomes visible.

However, there is an issue to watch out for. If you call AdSpeed_div() before the ad request finishes, it will not be able to display the ad. Thus, if you dynamically create the script object, you should use this function:

<div id="myAd"></div>
<div id="myOtherAd"></div>
....
<script type="text/javascript">

// If you use jQuery, it is recommended to call this: $.getScript(url,callback)

function getScriptObj(url,callback) {
   var myScript = document.createElement("script");
   myScript.type = "text/javascript";
   if (myScript.readyState){  // IE
      myScript.onreadystatechange = function() {
         if (myScript.readyState=="loaded" || myScript.readyState=="complete"){
            myScript.onreadystatechange = null;
            callback();
         } // fi
      };
   } else {  // Firefox, Chrome, Safari
      myScript.onload = function() { callback(); };
   } // fi

   myScript.src = url;
   return myScript;
	
   // You can then append this script object to another node, for example:
   // document.body.appendChild(myScript);
}

function loadAdSpeed(zids) {
   dynamicData = 'Your_Data';
   // Note: the parameter to enable asynchronous is "zids" and not "zid"
   // Change oid to your account ID 
   myScript = getScriptObj('//g.adspeed.net/ad.php?do=js&oid=XXX&zids='+zids+'&wd=-1&ht=-1&target=_top&cb='+Math.random()+'&custom='+dynamicData,displayAdSpeed);
   document.body.appendChild(myScript);
}

function displayAdSpeed() {
   AdSpeed_div('myAd',12345);
   AdSpeed_div('myOtherAd',67890);
   // or if you use jQuery: AdSpeed_jQuery('myOtherAd',67890);
}

loadAdSpeed('12345-67890'); // load ads from 2 zones
</script>

Auto-Refresh

The built-in auto-refresh setting is not currently compatible with loading ads from multiple zones. To do that, you need to implement the auto-refresh on the ad placements using JavaScript/jQuery. Basically, the concept is that it reloads the JavaScript request and repeats the appropriate AdSpeed_div() or AdSpeed_jQuery() calls.

function loadAdSpeed() {
  var zids = '123-456-789'; // 3 zones
  $.getScript('//g.adspeed.net/ad.php?do=js&oid=XXX&zids='+zids+'&wd=-1&ht=-1&target=_blank&cb='+Math.random(), function(){
    AdSpeed_jQuery('AdSpeed_HeaderAd', 123);
    AdSpeed_jQuery('AdSpeed_RightSideAd', 456);
    AdSpeed_jQuery('AdSpeed_FooterAd', 789);
  });
}

$(function(){
  loadAdSpeed();
  // ad auto-refresh every 90 seconds
  var adRefreshInterval = window.setInterval(loadAdSpeed,90*1000);
  function stopAdRefresh() {
	window.clearInterval(adRefreshInterval);
  }
  // auto-refresh disables after 900 seconds to avoid idle browsers
  window.setTimeout(stopAdRefresh,900*1000);
});

Text Link Ad and Expandable HTML Ad

Text links and ads without a fixed width and height dimension should call AdSpeed_jQuery(). This method uses jQuery's .html() to embed code into the placement. With this method, you need to include the jQuery library into your web page first.

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

<script type="text/javascript">
  AdSpeed_jQuery('AdSpeed_HeaderAd',12345);
</script>

Custom Ad Integration

If you have an advanced ad integration that requires a custom approach to embed ads into the main content, you can write your own code instead of using the method AdSpeed_div() or AdSpeed_jQuery(). The ad selection result is returned inside a JavaScript array, one for each zone and each ad slot. You will need to write your own rendering code to display this full content, including the tracking pixel, into the correct ad placement.

Troubleshooting

The DIV container should be readily available before making the call to AdSpeed_div(). If the container has not been created or is not available in the DOM, the ad cannot load properly.
The zone parameter for this integration method is "zids" and not "zid". The difference is to support multiple zones.
If you fetch multiple ads from a zone, make sure you have enough ads linked to the zone. If the zone does not have enough ads, any additional ad slots will show errors.