Create a rich media 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 rich media banner.

Creating an ad using an Amazon Ad Server template

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

Files within the bundle:

README.txt

Amz_RichMediaBanner_1_0_1_300x250.zip

Amz_RichMediaBanner_1_0_1_300x250_DCO.zip

Once you have downloaded the template, you can customize it to your requirements, including resizing the dimensions.

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/backup.jpg`	Fallback image shown in unsupported browsers.	Required
`images/logo.jpg`	Additional image asset	Optional
`images/poster.jpg`	Additional image asset (included in the DCO template)	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 a rich media banner .

Additional resources

Preparing for bulk upload

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

define({
    "adFormatId": 38
});

For more information about uploading ads in bulk, 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

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

Variables

Variable name	Location	Description	Type	Editable
`amz_main` `cta_btn` `overlay_hotspot` `user_action_btn` `logo`	`index.html`	Global variables used to select tags in the HTML file.	div ID

Functions

All functions are located in the script.js file.

Function name	Description	Additional code allowed
`initializeCreative`	Initializes the creative.
`addEventListeners`	Adds all the event listeners. In the template, the click event for the click-through and user action counter was added.
`handleUserActionButtonClick`	Click event handler for user action button.
`handleClickthroughButtonClick`	Click handler for the click-through button.

Additional methods

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.

Demo

Click here to preview a demo of rich media banner format.