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.

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.

Required

styles/reset.css

Resets the native styles of the browser so that the ad can look as intended.

Optional

styles/style.css

Style sheet for the banner and its HTML elements.

Required

scripts/script.js

JavaScript (logic and tracking) for the banner.

Required

scripts/settings.js

Settings file that contains key variables used to ease template customization. HTML Single Expandable includes two variables that you can customize: autoPlayVideo (available for video template only) and useDefaultCloseButtonInMRAID.

Optional

scripts/localPreview.js

Script that enables local preview of the ad.

Optional

panels/expand/index.html

HTML file of the expand panel.

Mandatory

panels/expand/styles/style.css

Style sheet for the expand panel and its elements.

Optional

panels/expand/scripts/script.js

JavaScript for the expand panel.

Optional

images/backup.jpg

Fallback image shown in unsupported browsers.

Required

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 a Page Peel, 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

Type

Editable

  • bannerDiv

  • panelDiv

  • expandButton

  • userActionButton

  • clickthroughButton

  • video

Global variables used to define HTML objects.

Add, edit, or remove these variables as you modify HTML objects.

div ID

DOC_tick.gif
  • useCustomClose

  • sdkData

  • isMRAID

  • adId

  • rnd

  • uid

These variables store values that are necessary for the ad to run properly after the upload to SAS.

Important

Important: Do not make changes to these variables.

var

DOC_tick.gif

autoPlayVideo

When true, the video auto-plays as soon as the panel expands. You can modify this variable from scripts/settings.js. (This variable only available for the template that includes video.)

Boolean

DOC_tick.gif

useDefaultCloseButtonInMRAID

Set this value to true to use MRAID default close button instead of the custom close button from the template when the panel expands. You can modify this variable from scripts/settings.js.

Boolean

DOC_tick.gif

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

initializeCreative

Initializes the creative.

You can add your own script if you want to run a script when the creative is initialized.

DOC_tick.gif

initializeGlobalVariables

Initializes the global variables for HTML objects. In the template, positionAdElements is also called to position the ad elements.

DOC_tick.gif

initializeCloseButton

Initializes the close button. Whether to display the close button is based on the serving environment and custom variable.

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

registerInteraction

When adding dynamic user interactions, make explicit calls to them here, but never call this function. SAS reads from this function to register possible interactions. If this function is invoked, it tracks all of the interactions defined inside it, distorting the metrics.

DOC_tick.gif

handleExpandButtonClick

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

DOC_tick.gif

handleCloseButtonClick

Click event handler for the close button.

DOC_tick.gif

handleUserActionButtonClick

Click handler for the user action button.

DOC_tick.gif

handleClickthroughButtonClick

Click handler for the click-through button.

DOC_tick.gif

pauseVideo

Pauses the video.

DOC_tick.gif

expand, collapse

These functions are set for the EBCMD module to call when an ad is served in MRAID environment, so the ad can be expanded and collapsed correctly.

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

Comments