The following tables describe the list of files that are included in the downloadable templates. The asset files are the same for both templates; the only difference is the banner dimensions.

All of the pushdown functionality is programmed in the template files. At a minimum, the only changes you will need to make are to the loaded image and video assets, and their respective styles.

The following table describes the list of files that are included in the downloadable template.

If you are planning to upload multiple ads, make sure that the Ad Creation Wizard in AAS recognizes your Workspace as a pushdown . Verify that the config.js file contains the following JavaScript:

define({
    "adFormatId": 10360
});

If you are developing ads with third-party libraries, we recommend that you call these libraries from a CDN (Content Delivery Network) when possible. This will help improve loading time and caching.

If you need to add Dynamic Creative Optimization (DCO) elements to your creative, see Add Dynamic Elements to Your HTML Creative.

These functions are located in the script.js file.

To change the duration of the expansion and collapse animation, change the collapseDuration and expandDuration variables. This time is measured in milliseconds, so a 1 second animation uses a value of 1000. If you do not want the expansion to animate, set the variables to 0.

Many publishers and networks allow pushdown to expand automatically once in a given time period. For example, you may be allowed to auto-expand once per day, or once per campaign. If you want this functionality, include the following script in the head of your HTML:

<script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingRes/CustomScripts/html5_auto_expand_frequency_capping_adkit.js">
</script>

You can then set your auto-collapse settings using JavaScript. The following code sets the ad to auto-expand once per campaign, then auto-collapse after 7000 milliseconds, or 7 seconds.

var autoExpandSettings = {
    isEnabled: true,
    frequency: EB.autoExpandFrequencyCapping.Frequencies.CAMPAIGN,
    expansionsPerPeriod: 1,
    timeUntilAutoCollapse: 7000
};

EB.autoExpandFrequencyCapping.initialize(autoExpandSettings);

You can set the following properties for auto-expansion.

You can then pass these settings in an object into the EB.autoExpandFrequencyCapping.initialize function. At that time, the EB.autoExpandFrequencyCapping object determines if the ad should auto-expand. If the ad does auto-expand, the expansion is not tracked as a user expansion.

It is important to determine a period or frequency for auto-expansion. Some publishers allow you to auto-expand on a daily basis, while others allow you to auto-expand on a campaign basis. There are multiple constants you can use to set the frequency property. The constants are contained in the EB.autoExpandFrequencyCapping.Frequencies object.

For example, the constant for day is EB.autoExpandFrequencyCapping.Frequencies.DAY, and the constant for campaign is EB.autoExpandFrequencyCapping.Frequencies.CAMPAIGN.

The following table shows the options available for frequencies.

You can set up callback functions to trigger when the ad auto-expands or auto-collapses. For example, you probably want to call a function to switch to the expanded panel graphics before the ad auto-expands, and switch to collapsed banner graphics after the ad auto-collapses.

Create a new EB.autoExpandFrequencyCapping.EventSubscription object, which passes an object containing a number of different properties into the constructor function.

Once the object is initialized, it will determine whether the ad should auto-expand immediately. The following code creates a subscription to the auto-expand event.

var beforeExpandSubscription = new EB.autoExpandFrequencyCapping.EventSubscription({
    eventName: EB.autoExpandFrequencyCapping.Events.AUTO_EXPAND,
    callback: switchToExpandedGraphics,
    callbackBinding: this,
    timing: EB.autoExpandFrequencyCapping.EventTiming.BEFORE}
);

EB.autoExpandFrequencyCapping.subscribeToEvent(beforeExpandSubscription);

eventName: EB.autoExpandFrequencyCapping.Events.AUTO_EXPAND

callback: switchToExpandedGraphics,

callbackBinding: this,

timing: EB.autoExpandFrequencyCapping.EventTiming.BEFORE}

EB.autoExpandFrequencyCapping.subscribeToEvent(beforeExpandSubscription);

On some occasions, you may want to prevent your ad from auto-collapsing, for example, if a user engages with content in the expanded panel. You may also want to prevent the ad from auto-collapsing if the user clicks collapse, and then expands again, before the auto-collapse time limit is reached.

You can use the following function to cancel auto-collapse:

EB.autoExpandFrequencyCapping.cancelAutoCollapse()

Before using this method in your ad, make sure that your publishers allow you to cancel auto-collapse. Keep in mind the following points:

EB.initExpansionParams(x, y, width, height); must be used with defined values in order for the pushdown , which is based on the single expandable format, to expand with its correct panel dimension.

There is a EB.initPanelDimensions(x, y, width, height); in the template. This is for the expandable banner format. You can disregard this if using the pushdown format.

The full-screen banner templates use a function called EB._sendMessage to tell the ad to expand to full-screen. This function communicates with a custom script that resizes the ad container to the full size of the screen. This function call is as follows.

EB._sendMessage('resizecontainer', {width:'full',height:'full', x:'pageLeft', y:0, pushDown:true});

In the templates, this function is called within the goToFullScreenSize function. The following function is called to collapse the ad back to its original size. You can change the width and height properties as needed.

EB._sendMessage('resizecontainer', {width:320, height:50, x:0, y:0, pushDown:true});

You must apply a custom script to the ad in order for these function calls to work properly. For more information about applying this script, see Set up a pushdown.

There is also a function called setMessageTerminal in the full-screen templates. This function listens for resize events and responds accordingly. For example, if the user rotates their device, it will scroll to the top of the ad after it resizes. On Android, it ensures the ad resizes properly.

The AAS HTML API provides a set of methods, such as user interactions, automatic interactions, and timers that you can use in your code. For more information about these methods, see Methods.