You are here: Developers > Ad Request API > Javascript ad tags > Asynchronous JavaScript ad tags

Asynchronous JavaScript ad tags

Last updated on August 18, 2016

Using asynchronous JavaScript ad tags can decrease page load times because the webpage content loads at its own pace while ads fill in around it via separate processes.

To implement asynchronous JavaScript ad tags, build them using OX instance and static methods and then paste your ad tagA small piece of code that defines the ad space where ads display on a website. It includes parameters that describe the inventory advertising campaigns can target, which may in turn display ads in the ad space. between the HTML body tags in the location where you want an ad to be displayed.

Standalone asynchronous JavaScript ad tag

<div id="placeholderId" style="width:336px;height:280px;margin:0;padding:0">
  <noscript>
    <iframe id="4c86a778400be" name="4c86a778400be"
 src="http://delivery_server_domain/w/1.0/afr?auid=12345&target=_blank&cb=INSERT_RANDOM_NUMBER_HERE"
 frameborder="0" scrolling="no" width="336" height="280">
      <a href="http://delivery_server_domain/w/1.0/rc?cs=4c86a778400be&cb=INSERT_RANDOM_NUMBER_HERE" target="_blank"><img src="http://delivery_server_domain/w/1.0/ai?auid=12345&cs=4c86a778400be&cb=INSERT_RANDOM_NUMBER_HERE" border="0" alt=""></a>
    </iframe>
  </noscript>
</div>

<script type="text/javascript">
  var OX_ads = OX_ads || [];
  OX_ads.push({
     "slot_id":"placeholderId",
     "auid":"12345"
     "tid":"4",
     "tg":"_blank",
     "r":"http://redirect_clicks_to_here/landing.html",
     "rd":"120",
     "rm":"2",
     "imp_beacon":"<iframe src='myplace.com'></iframe>",
     "fallback":"<iframe src=/test/ads/468x60-unicef.gif></iframe>",
     "vars":{"key1":"value1","key2":"value2"}
  });
</script>

<script type="text/javascript" src="http://delivery_server_domain/w/1.0/jstag">

</script>

Where:

  • id="placeholderId". An HTML id attribute used as a placeholder document object model (DOM) element for the ad unitThe smallest inventory component that represents the space on a site where ads display. to preserve space while the rest of the page loads. You can either randomly generate an ID or select it yourself, making sure that it is unique to the webpage and that it contains only valid characters. The closing </div> tag occurs after the fallback section of the tag.

  • style="width:336px;height:280px;margin:0;padding:0". An HTML style attribute used to specify the dimensions of the ad space

  • <noscript>. Encloses an optional iframe and image fallback mechanism within the placeholder

  • OX_ads is a global array to store ad requestCommunication from a web browser or app to an ad server to display an ad. details, and OX_ads.push adds a new ad unit to the ad request queue.

  • "slot_id":"placeholderId". The ID of the element to render in

  • "auid":"12345". The ID for the ad unit to be displayed

    This call also includes multiple optional parameters in a JSON array.

  • "vars". Custom key value pairs (KVPs) used to provide additional information about your ad space. For example, you could specify {"gender":"male","income":"85","category":"sports"}. For more details, see custom variables in ad requests.

  • <delivery_server_domainscript type="text/javascript" src="http:///w/1.0/jstag"> </script>. A request to return the OpenX JavaScript tag library

    To avoid namespace collisions, you can add the oxns parameter to this request.

Asynchronous JavaScript tag for an ad unit group request

<html>
<head></head>

<body>

Some content here

Ad goes here

<!--

 Preserve space for an ad unit while the rest of the page loads. -->

<div id="exampleAd1" style="width:120px;height:600px;margin:0;padding:0;">
  <noscript>
     <!-- Fallback mechanism here -->
  </noscript>
</div>

<!-- Preserve space for an ad unit while the rest of the page loads. -->

<div id="exampleAd2" style="width:120px;height:600px;margin:0;padding:0">
  <noscript>
     <!-- Fallback mechanism here -->
  </noscript>
</div>

<!-- Fetch the OpenX JavaScript tag library -->

<script type="text/javascript" src="http://delivery_server_domain/w/1.0/jstag">

</script>

<!--Asynchronous ad request-->

<script type="text/javascript">
  var OX_4d6552943f5a4 = OX();
  OX_4d6552943f5a4.addPage("9");
  OX_4d6552943f5a4.addVariable("key","value");
  OX_4d6552943f5a4.setAdUnitSlotId("12345","exampleAd1");
  OX_4d6552943f5a4.setAdUnitSlotId("45678","exampleAd2");
  OX_4d6552943f5a4.addContentTopic("5");
  OX_4d6552943f5a4.setAnchorTarget("_blank");
  OX_4d6552943f5a4.setRefreshDelay("2");
  OX_4d6552943f5a4.setRefreshMax("6");
  OX_4d6552943f5a4.load();
</script>

Some content here

</body>
</html>

Where:

  • id="exampleAd1". An HTML id attribute used as a placeholder DOM element for each ad unit within the group to preserve space while the rest of the page loads. You can either randomly generate IDs or select them, making sure that they are unique to the webpage. The closing </div> tag occurs after the fallback section of the tag.

  • style="width:336px;height:280px;margin:0;padding:0". An HTML style attribute used to specify the dimensions of the ad space

  • <noscript>. Encloses optional iframe and image fallbacks within each placeholder

  • <delivery_server_domainscript type="text/javascript" src="http:///w/1.0/jstag"> </script>. Get the OpenX JavaScript tag library.

  • var OX_4d6552943f5a4 = OX();. Create a new OX object and assign it to a global variable with a pseudo-random name of your chosing. 4d6552943f5a4 in this example is just a sample value.

  • OX_4d6552943f5a4.addPage("9");. Queue a request to the Ad ServerA complete digital advertising platform where publishers sell, manage, and deliver their advertising inventory across all digital formats. for the ad unit groupA collection of ad units where related ads display together at the same time. with an ID of 9.

  • OX_4d6552943f5a4.addVariable("key", "val");. A custom key value pair used to provide additional information about your ad space. For more details, see the addVariable method.

  • OX_4d6552943f5a4.setAdUnitSlotId("12345","exampleAd1"); and OX_4d6552943f5a4.setAdUnitSlotId("45678","exampleAd2");. Match each ad unit ID within the ad unit group with their placeholder element's ID.

  • OX_4d6552943f5a4.addContentTopic("1001");. Set a content topicDescribes the main subject of the online content surrounding the ad space, such as sports or automotive. for the current page.

  • OX_4d6552943f5a4.setAnchorTarget("_blank");. Set the window target for ad clicks in the page.

  • OX_4d6552943f5a4.setRefreshDelay("20");. Set the refresh delay in seconds.

  • OX_4d6552943f5a4.setRefreshMax("6");. Set the maximum number of refreshes.

  • OX_4d6552943f5a4.load();. Call the Ad Server for the queued ad unit groups. The load() call must occur after all placeholders in the group have loaded (this script block must not go in <head>).

Asynchronous JavaScript tag for a multi-ad unit request

<div id="exampleAd1" style="width:120px;height:600px;margin:0;padding:0;">
  <noscript>
     <!-- fallback mechanism -->
  </noscript>
</div>

<div id="exampleAd2" style="width:120px;height:600px;margin:0;padding:0">
  <noscript>
     <!-- fallback mechanism -->
  </noscript>
</div>

<script type="text/javascript" src="http://delivery_server_domain/w/1.0/jstag">

</script>

<script type="text/javascript">
  var OX_4d6552943f5a4 = OX();
  OX_4d6552943f5a4.addAdUnit("12345");
  OX_4d6552943f5a4.setAdUnitSlotId("12345","exampleAd1");
  OX_4d6552943f5a4.addAdUnit("45678");  
  OX_4d6552943f5a4.setAdUnitSlotId("45678","exampleAd2");
  OX_4d6552943f5a4.load();
</script>

Where:

  • id="exampleAd1". An HTML id attribute used as a placeholder DOM element for each ad unit you want to include in the call

  • var OX_4d6552943f5a4 = OX();. Create a new OX object and assign it to a global variable with a pseudo-random name.

  • OX_4d6552943f5a4.addAdUnit("12345");. Queue a request to the Ad Server for ad unit 12345.

  • OX_4d6552943f5a4.setAdUnitSlotId("12345","exampleAd1");. Match ad unit 12345 with the placeholder element's ID.

  • OX_4d6552943f5a4.addAdUnit("45678");. Queue a request to the Ad Server for ad unit 45678.

  • OX_4d6552943f5a4.setAdUnitSlotId("45678","exampleAd2");. Match ad unit 45678 with the placeholder element's ID.

  • OX_4d6552943f5a4.load();. Call the Ad Server for the queued ad units.

    The load() call must occur after all placeholders have loaded (this script block must not go in <head>).

Feedback form