AppNexus HTML5 Client Library

The AppNexus HTML5 client library helps integrate HTML5 ads into websites in a safe and secure manner.

API Documentation

APPNEXUS Object

The APPNEXUS object is the base object of the API which provides actions to pass down to the publisher website.

Method APPNEXUS.ready(callback) : void

The APPNEXUS.ready() will trigger callback function once the APPNEXUS object has been initialized and the page has been loaded.

APPNEXUS.ready(function () {
  var readMoreButton = document.getElementById('read-more-button');

  readMoreButton.addEventListener("click", function () {
    APPNEXUS.click();
  });
});

Multiple APPNEXUS.ready() calls

The library also supports multiple APPNEXUS.ready() calls per page. You might want to do this if you have multiple functions that want to check if the APPNEXUS object is initialized and the page is loaded.

interaction.js

APPNEXUS.ready(function () {
  var readMoreButton = document.getElementById('read-more-button');

  readMoreButton.addEventListener("click", function () {
    APPNEXUS.click();
  });
});

layout.js

APPNEXUS.ready(function () {
  var fullscreenButton = document.getElementById('fullscreen-button');

  APPNEXUS.setExpandProperties({
    width: 600,
    height: 500,
    floating: true,
    expand: {
      easing: 'ease-in-out',
      duration: 1000
    }
  });

  // Expands on click
  fullscreenButton.addEventListener("hover", function () {
   APPNEXUS.expand();
  });
});

Method APPNEXUS.click([url]) : void

Opens a new window linking to the clickthrough URL or to the specified URL if the url parameter is specified.

NOTE: Click-tracking is currently not available when a URL is specified with the url parameter.

APPNEXUS.ready(function () {
  var readMoreButton = document.getElementById('read-more-button');
  var facebookButton = document.getElementById('facebook-button');

  readMoreButton.addEventListener("click", function () {
    APPNEXUS.click();
  });

  facebookButton.addEventListener("click", function () {
     // Does not use click-tracking
   APPNEXUS.click('http://www.facebook/myawesomeprofile');
  });
});

Method APPNEXUS.setExpandProperties(properties) : void

Sets the expanding properties of an ad, whether that's an interstitial, a push over, or a floating ad.

Options for properties settings:

Property	Type	Value	Default
width	Number	The expanded width in pixels	Current ad "width"
height	Number	The expanded height in pixles	Current ad "height"
floating	Boolean	Makes the ad float or push content	false
anchor	String	Can be one of the following: "top-right", "bottom-right", "bottom-left", or "top-left" <br/ > NOTE: Only works when the floating flag is set to true.	"top-left"
expand	Object	Expanding easing animation of the frame. See easing-properties option settings.
collapse	Object	Collapsing easing animation of the frame. See easing-properties option settings.	Inherits expand property
interstital	Boolean	Sets the ad as a full screen interstitial with a light box overlay	false
overlayColor	String	The CSS color of the light box overlay	"rgba(0,0,0,0.5)"

NOTE: Setting interstitial to true will ignore the floating value if set together

Options for easing-properties settings:

Property	Type	Value	Default
easing	String	CSS transition-timing-function.	No easing by default
duration	Number	CSS transtion duration for easing	400

Some examples for APPNEXUS.setExpandingProperties():

Interstitial Ad Example

// Ad must call `APPNEXUS.expand()` inside the `APPNEXUS.ready`
APPNEXUS.ready(function () {
  ...
  APPNEXUS.setExpandProperties({
    interstitial : true
  });
  APPNEXUS.expand();
});

Expanding (Push Over) Ad Example

// Original ad size 720x90 that expands to 720x275
APPNEXUS.ready(function () {
  var button = document.getElementById('button');

  APPNEXUS.setExpandProperties({
    height: 275,
    expand: {
      easing: 'ease-in-out',
      duration: 1000
    },
    collapse: {
      easing: 'ease-in-out',
      duration: 500
    }
  });

  // Expands on click
  button.addEventListener("click", function () {
   APPNEXUS.expand();
  });
});

Expanding (Floating) Ad Example

// Original ad size 300x250 that expands to 600x500
APPNEXUS.ready(function () {
  var button = document.getElementById('button');

  APPNEXUS.setExpandProperties({
    width: 600,
    height: 500,
    floating: true,
    expand: {
      easing: 'ease-in-out',
      duration: 1000
    }
  });

  // Expands on click
  button.addEventListener("click", function () {
   APPNEXUS.expand();
  });
});

Method APPNEXUS.getExpandProperties() : Object

Returns the current set expanding properties.

Method APPNEXUS.expand() : void

Triggers the ad to expand to the size specified by the expanding properties in APPNEXUS.setExpandProperties().

Method APPNEXUS.collapse() : void

Triggers the ad to collapse to the original size.

Method APPNEXUS.getClickTag() : string

returns the current clickTag url passed to the creative. This is useful for integration with other ad builders such as adobe edge.

This function can be called before APPNEXUS.ready has fired.

Example usage

var clickTag = APPNEXUS.getClickTag();

Method APPNEXUS.getMacroByName(string) : string

returns the value of a given macro passed to the creative. This is useful for GDPR purposes.

NOTE: Only works the two GDPR macros.

Example usage

 APPNEXUS.ready(function () {
    clickthrough.addEventListener("click", function () {
      APPNEXUS.getMacroByName("GDPR_APPLIES");
      APPNEXUS.getMacroByName("GDPR_CONSENT_STRING");
    });
  });

Usage Documentation

Visit the links below for walkthroughs on how to use the AppNexus HTML5 library in a few specific cases:

• Integrating the AppNexus HTML5 Library with Manually Created Creatives
• Integrating the AppNexus HTML5 Library with Ads Created in Google Web Designer
• Integrating the AppNexus HTML5 Library with Ads Created in Adobe Edge

Development

For instructions on how to develop this library, see the Contribution Guidelines.