Link Search Menu Expand Document

PDF

Asynchronous JavaScript Ad Tag Examples

Publishers

Last updated on August 10, 2020

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 tag between the HTML body tags in the location where you want an ad to be displayed.

Click to expand the following examples:

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 unit 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 fallback mechanism within the placeholder.

  • OX_ads: A global array to store ad request 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_domain*script 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 fallbacks within each placeholder.

  • <*delivery_server_domain*script 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 choosing. 4d6552943f5a4 in this example is just a sample value.

  • OX_4d6552943f5a4.addPage("9");: Queue a request to the Ad Server for the ad unit group 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 topic 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\>).