PRODUCT
Follow

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

Amz_ExpandableBanner_1_0_0_300x250_DCO.zip

Amz_ExpandableBanner_1_0_0_300x250_Multipanel.zip

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

After you finish creating your ad, proceed to setting up your ad in SAS. For more information, see Set up an Expandable Banner.

Additional Resources

Bulk Upload

For the SAS 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 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

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 SAS, 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

checkIfAdKitReady

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

DOC_cross_blue.jpg

handleCollapseButton

Collapse event handler for the collapse button.

DOC_tick.gif

initializeVideoTracking

Initializes video tracking by creating a new instance of the EBG Video Module. It also contains auto-play video functionality in video templates.

DOC_tick.gif

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.

DOC_tick.gif

handleExpandButton

Click event handler function for the expand button. It also contains auto-play video functionality for video templates.

DOC_tick.gif

handleUserActionButton

Click handler for the user action button.

DOC_tick.gif

handleClickthroughButton

Click handler for the click-through button.

DOC_tick.gif

handleClickOverlay

Fires Click_Main_Collapsed clickthrough.

DOC_tick.gif

Demo

Click here to preview a demo of Expandable Banner format.

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

Comments