Create an expandable banner in a Code Editor – Amazon Ads Help Center

Note

Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About expandable banner.

Create an Ad Using an Amazon Ad Server Template

When creating a expandable banner in a code editor, it is recommended that you start with our official template bundle.

Files within the Bundle:

README.txt Amz_ExpandableBanner_1_0_1_300x250.zip

Amz_ExpandableBanner_1_0_1_300x250_DCO.zip

Amz_ExpandableBanner_1_0_1_300x250_Multipanel.zip

Amz_ExpandableBanner_1_0_1_300x250_Video.zip

Download the template and then select the desired folder from the list of available dimensions and options.

You can also customize the dimensions according to your requirements. Everything can be personalized, including media controls of the video.

Included Files

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

File Name	Description	Required
`index.html`	HTML file for the banner.	Required
`config.js`	Configuration/manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative.	Optional
`styles/style.css`	Style sheet for the banner and its HTML elements.	Optional (if code is included in the HTML file)
`scripts/script.js`	JavaScript (logic and tracking) for the banner.	Required
`images/default.png`	Fallback image shown in unsupported browsers.	Required
`images/logo.png`	Logo for your ad.	Required
`panels/panel1`	This folder contains all files related to panel and its creative assets.	Optional
`panels/panel1/index.html`	HTML file for the panel.	Required
`panels/panel1/styles/style.css`	Style sheet for the banner and its HTML elements.	Optional (if code is included in the HTML file)
`panels/panel1/scripts/script.js`	JavaScript (logic and tracking) for the banner.	Required
`panels/panel1/images`	This folder contains the image assets for the scroll panel.	Optional
`panels/panel2`	This folder contains all files related to panel and its creative assets.	Optional
`panels/panel2/index.html`	HTML file for the panel.	Required
`panels/panel2/styles/style.css`	Style sheet for the banner and its HTML elements.	Optional (if code is included in the HTML file)
`panels/panel2/scripts/script.js`	JavaScript (logic and tracking) for the banner.	Required
`panels/panel2/images`	This folder contains the image assets for the scroll panel.	Optional
`panels/expand`	This folder contains all files related to panel and its creative assets.	Optional
`panels/expand/index.html`	HTML file for the panel.	Required
`panels/expand/styles/style.css`	Style sheet for the banner and its HTML elements.	Optional (if code is included in the HTML file)
`panels/expand/scripts/script.js`	JavaScript (logic and tracking) for the banner.	Required
`panels/expand/images`	This folder contains the image assets for the scroll panel.	Optional
`panels/expand/videos/video.mp4`	Temporary video that you should replace with your own video.	Required for video format

Additional Files in the Video Template

The following table describes the additional files that are included in a video template.

File Name	Description	Required
`panels/expand/videos/video.mp4`	Temporary video that you should replace with your own video.	Required
`panels/expand/images/poster.jpg`	Poster image displayed in the video location in the banner before the video starts and after the video ends.	Optional

Setting up Your Ad in Amazon Ad Server

After you finish creating your ad, proceed to setting up your ad in AAS. For more information, see Set up an expandable banner.

Additional Resources

Bulk Upload

For the AAS Ad Wizard to recognize your workspace as an expandable banner verify that the config.js file contains the following:

define({
    "adFormatId": 43
});

For more information, see Set up multiple ads using Ad Creation Wizard.

Shared libraries

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.

Dynamic Creative Optimization

If you need to add dynamic creative optimization (DCO) elements to your creative, see Add dynamic elements to your HTML ads using a code editor.

Advanced Configuration

Customize HTML Expandable Banner

All of the HTML Expandable Banner functionalities are coded within the script.js files and styles in style.css files. At a minimum, the only change you will need to make is to the image .jpg and video .mp4 assets and their respective styles and markup.

You can modify the script files based on your design and what functionalities you will need for your ad. To update the layout and design of a panel or banner, open the index.html and style.css files separately in text editors.

Resize Banner

To customize the dimensions of a main banner, update the style.css file to match your new size, and generate a default image for the ad. Upon ad setup in AAS, the dimensions of the default image will be used to set the size for the banner.

Resize Panel

To customize the size of any panel, update the style.css in the styles folder of that panel to the required dimensions, and update the EB.initExpansionParams() method's arguments in the index.html of the given panel to match your dimensions.

For example:

EB.initExpansionParams(xPosition, yPosition, width, height);

When populated, it looks like this:

EB.initExpansionParams(0, 0, 300, 600);

Line 12 of our template's panel index.html file:

<script>try{EB.initExpansionParams(0, 0, 300, 600);}catch(e){}</script>

Variables and Functions

The following tables provide additional variables and functions that are available for this format. You can use these additional items to fully customize your ad.

Variables

Variable Name	Description	Description
`collapse_btn` `user_action_btn` `clickthrough_btn` `overlay_hotspot` `expand_btn`	`script.js`	Global variables that define the HTML objects.

Functions

These functions are located in the script.js file.

Function Name	Description	Additional Code Allowed
`handleCollapseButton`	Collapse event handler for the collapse button.
`initializeVideoTracking`	Initializes video tracking by creating a new instance of the EBG Video Module. It also contains auto-play video functionality in video templates.
`addEventListeners`	Adds all of the event listeners. In the template, the click event for the click-through and user action counter was added. In addition, the `webkitendfullscreen` event listener for iOS devices was added in order to handle some positioning issues when exiting the full screen video player.
`handleExpandButton`	Click event handler function for the expand button. It also contains auto-play video functionality for video templates.
`handleUserActionButton`	Click handler for the user action button.
`handleClickthroughButton`	Click handler for the click-through button.
`handleClickOverlay`	Fires Click_Main_Collapsed clickthrough.

Demo

Click here to preview a demo of expandable banner format.