PRODUCT
Follow

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 a Sizmek Ad Suite 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_0_300x250.zip

Amz_RichMediaBanner_1_0_0_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 Sizmek Ad Suite

After you finish creating your ad, proceed to setting up your ad in SAS. 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 SAS 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 3rd 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

DOC_tick.gif

Functions

All functions are located in the script.js file.

Function Name

Description

Additional Code Allowed

checkIfAdKitReady

Checks to see if the AdKit is ready and then proceeds to initialize creative.

DOC_cross_blue.jpg

initializeCreative

Initializes the creative.

DOC_tick.gif

addEventListeners

Adds all the event listeners. In the template, the click event for the click-through and user action counter was added.

DOC_tick.gif

handleUserActionButtonClick

Click event handler for user action button.

DOC_tick.gif

handleClickthroughButtonClick

Click handler for the click-through button.

DOC_tick.gif

Additional Methods

The SAS 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.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments