PRODUCT
Follow

Overview

HTML5 Expandable Banner is a base format for single and multi panel expanding creative.

The ad starts as a banner that can then expand panels while defining specific expand properties. Structure-wise, that means that we have one base banner HTML5 file, and an additional one for each of the panels.

Although the HTML5 Expandable is not a Custom Format (base format), we encourage the use of curated templates for all "HTML5 Expandable ad executions" as they are consistently maintained and tested, and have recently been updated with new capabilities, such as support for running in both mobile web and MRAID in-APP environments.

Clicking any of the expand buttons for any of the panels records an expand user action.
Clicking the ClickThrough button records a clickthrough.
Clicking the Close button tracks panel collapse user action.
Clicking the UserAction button records a custom interaction and is hence being tracked in reports.
Some expandable templates contain a video element, which is pre-set to track video interactions.
Auto expansions for certain panels can be frequency capped on ad setup.

The templates can be customized and extended to include additional userActionCounter's, automaticEvent Counters, or any of our HTML5 features from features block.

The user can interact with expanded panel by controlling the Video if present in the panel / template or by clicking UserAction button, ClickThrough button or Close button to close the particular panel - return it to the collapsed state.

While the HTML5 Expandable Banner can be customized to any size, Industry standard banner dimensions are made available within the template to cover a wide array of browsers, screens and devices.

See below for complete list of available templates:
HTML5 Expandable Banner Dimensions

Banner Size Expanded Size Video
160x600 300x600 No
160x600 300x600 Yes
320x50 320x416 No
320x50 320x416 Yes
300x250 500x250 No
300x250 500x250 Yes
728x90 728x200 No
728x90 728x200 Yes
300x250

500x250(panel1)

728x90 (panel2)

Yes

No

 

The following screen-grab shows an HTML5 Expandable Banner ad in its initial banner state (no expanded panels):

In the second screen-grab, you’ll notice that the buttons which expand both panels have been clicked and the panels are expanded to the left and above the banner.  Panel 1 (to the left) contains video while Panel 2 (above) does not:

Demos/Downloads

The following table provides links to the template and demo for the HTML5 Expandable Banner format.

Template

CFG_RELEASED_HTML5ExpandableBanner_1.0.1.zip

Demo

Preview demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Firefox, Chrome, Microsoft Edge

Mac

Safari, Chrome

iPhone

iOS 9.0 and later

iPad

iOS 9.0 and later

Android Phone

Android 4.4 and later

Android Tablet

Android 4.4 and later

Format Properties

Listed below are common properties available to the format.

Feature Supported
Polite Loading
Safeframe Support
MRAID (in APP Support)
AdKit ready 1
Liquid (One-Tag Solution)
Secure Serving
Sizmek Advertising Suite Support

DCO(Dynamic Creative) and Additional Assets Support.

This is a base format -  HTML5 Expandable Banner.
Please review the Sizmek AdKit API page for a full list of exciting new features.

Implementing an HTML5 Expandable Banner Format

Before you Begin

Make sure you have the following resources available:

The HTML5 Expandable Banner format workspace that is applicable to your campaign and fits the dimensions of publishers inventory(always check publisher / programmatic network specs first).
Download the Workspace and extract the ZIP file, preserving the directory structure.

Workspaces Available

Workspace Dimension Video
CFG_Released_HTML5ExpandableBanner_1.0.1_160x600.zip 160x600 No
CFG_Released_HTML5ExpandableBanner_1.0.1_160x600_video.zip 160x600 Yes
CFG_Released_HTML5ExpandableBanner_1.0.1_320x50.zip 320x50 No
CFG_Released_HTML5ExpandableBanner_1.0.1_320x50_video.zip 320x50 Yes
CFG_Released_HTML5ExpandableBanner_1.0.1_300x250.zip 300x250 No
CFG_Released_HTML5ExpandableBanner_1.0.1_300x250_video.zip 300x250 Yes
CFG_Released_HTML5ExpandableBanner_1.0.1_728x90.zip 728x90 No
CFG_Released_HTML5ExpandableBanner_1.0.1_728x90_video.zip 728x90 No

 

Included Template Files

HTML, JS & CSS

The following text-based template files are included:

File Name

Description

index.html

The html file for banner.

config.js

A dummy(empty) config file - AdKit dependency.

styles/reset.css

Reset the styles on browser so that the ad can look as intended in both of its collapsed and expanded states.

styles/style.css

The style sheet for the template (banner and panel).

scripts/script.js

The javascript(logic and tracking) for the banner.

scripts/settings.js

Settings file that contains key variables used to customize the template easier. HTML5 Single Expandable has two variables "autoPlayVideo" and "useDefaultCloseButtonInMRAID" you can customize in the settings, with "autoPlayVideo" only available for video template.

scripts/localPreview.js

A script that enables local preview of the ad(away from platform).

panels/expand/index.html

The html file of the expand panel

panels/expand/styles/style.css

The style sheet for the expand panel and its elements

panels/expand/scripts/script.js

The javascript for the expand panel

Images

The following image template files are included in the images folder:

File Name

Description

images/backup.jpg

The fallback image shown in unsupported browsers

images/logo.png

panels/expand/images/logo.png

Sizmek logo image

panels/expand/images/poster.jpg

The video used in video templates (video versions of template only)


The following video template files are included in the videos folder:

File Name

Description

panels/expand/videos/video.mp4

The video used in video templates (video versions of template only)


Customizing HTML5 Expandable Banner in HTML

All of the HTML5 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 pannel/ banner, open the index.html and style.css files separatley 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 on the platform, 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, please update the style.css in styles folder of that panel to the required dimensions, then update the EB.initExpansionParams() method's arguments in index.html of the given panel to match your dimensions.

E.g.
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 files:
<script>try{EB.initExpansionParams(0, 0, 300, 600);}catch(e){}</script>

Authoring tools and 3rd party JS libraries:
If you are developing ads with non-sizmek authoring tools or 3rd party libraries, please use sizmek hosted versions of dependencies listed on this page: Shared Libraries

For guides on building sizmek base formats with Animate CC, Hype or Google web designer, please visit 3rd party authoring tools page.

Features and Dynamic Creative:
Additional features can be added to all adkit based templates, please see this page for a full list of available features.

You can make some of your ads elements(Video, Image, HTML or String) Dynamic (DCO ready) by following the guide on this page.

Below are explanations of the variables and functions used in the template.

Variables

Variable Name

Description

bannerDiv panelDiv, expandButton, clickthroughButton, userActionButton, video

Global variable(s) used to select DOM elements.

Add/Edit/Remove these variable(s) as you modify elements in index.html and panels/expand/indx.html

sdkData, adId, rnd, uid, isMRAID, useCustomClose

These variables store values that are necessary for the ad to run properly once uploaded to the platform.

Please do NOT make any change to these variables.

 

autoPlayVideo

Set this value to true if you wish the video auto played as soon as the panel expand. You can modify this variable from scripts/settings.js. (This variable only available for the template that come with video)

useDefaultCloseButtonInMRAID

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

Functions

These functions will be chain-triggered when the window is loaded and adkit API is ready - initiated by checkIfAdKitReady function invoking initializeCreative.

Function Name

Description

checkIfAdKitReady

Check to see if the adKit is ready and then proceed to initialize creative.

initializeCreative

Initialize the creative.

initializeGlobalVariables

This is where we initialize the global variables for HTML elements.

initializeCloseButton

This is where we initialize the close button, depends on the serving environment and the variable useDefaultCloseButtonInMRAID, we show/hide our custom close button and notify the MRAID if need to hide the MRAID default close button.

initializeVideoTracking

This function initializes video tracking by creating a new instance of EBG Video Module. It also contains auto play video functionality in video templates.

addEventListeners

This is where we add all the event listeners. In the template, we have added the click event for click through and user action counter, as well as expand / collapse buttons.

registerInteraction

If you're adding dynamic user interactions, make explicit calls to them here, but never call this function. The platform will read from this function to register possible interactions.
if this function is invoked, it will track all of the interactions defined inside it, distorting the metrics.

handleExpandButtonClick

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

handleCloseButtonClick

Click event handler function for the close button.

handleUserActionButtonClick

Click event handler for user action button.

handleClickthroughButtonClick

Click handler for the click through button.

pauseVideo

The function that pauses the video.

expand, collapse

These function are set for EBCMD modul to call when ad served in MRAID environment so the ad can be expanded and collapsed correctly.

Setting Up HTML5 Expandable Banner in Sizmek MDX

Sizmek MDX2.0 Setup

  1. Once customized, archive the HTML5 Expandable Banner workspace into a ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In the Sizmek MDX2.0, under Creative Assets, create new Workspace by uploading the ZIP file.
  3. Under the Ads section, create a new master ad.
  4. Set Ad Format to HTML5 Expandable Banner and fill out the general info for the ad(name, etc).
  5. Assign the workspace you uploaded and the default image from the images folder.
  6. Under Panels List, add expand panel(s) using following settings…
    • Panel Name: expand (can be different name)
    • Asset: please select panels/expand/index.html
    • Size: should be filled automatically
    • X: 0
    • Y: 0
  7. Add the URL for the default click-through.
  8. Save the ad.
  9. Create a new placement for the ad.
  10. Fill out the form. Set the Placement type to In Banner and the Banner size to the template size.
  11. After you’ve saved your placement, you can then generate preview tags to test on your web site.

Sizmek Advertising Suite Setup

  1. Archive the HTML5 Single Expandable workspace into a ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. Click the Creative menu item > Asset Library, Upload your workspace the chosen folder.
  3. Click the Creative menu item > Ads and click the New Ad button and select Blank Ad.
  4. Set Ad Format to HTML5 Expandable Banner and fill out the form for the ad.
  5. Under Creative Assets select Main Assets tab and then select the Workspace folder and default image.
  6. Under Creative Assets select Panels tab and then add each panel to the ad, save once done.
  7. Add the URL for the default click-through.
  8. Save the ad.
  9. Create a new placement for the ad.
  10. Fill out the form. Set the Placement type to In Banner and the Banner size to the template size.
  11. After you’ve saved your placement, you can then generate preview tags to test on your web site.

Reported Custom Interactions

Currently, no custom interactions are reported in the template apart from User action counter button, however, the developer can always add their own custom interactions by using the following call.

EB.userActionCounter();
EB.automaticEventCounter();

For list of all EB interaction counters and tracking please visit EB API page - still viable for adkit formats.
for adkit interactions please visit adkit custom interactions page.

Known Issues

There is no known issue reported at the time we release.

Change Log

September 15, 2017

  • Upgraded to use AdKit API (Allows use of Additional Assets, Dynamic Creative, Media Gallery Component, 360 video component and other capabilities, please visit our AdKit API page for a full list of exciting new features).
  • Client API JS library is now self adapting to serving environment security protocol(http/https).
  • EB API (EB.API) is included and supported with all methods including geo-location, target OS/ Browser/ Device, set Style, ad Visibility etc...
  • Introduced a local preview support script - for previewing the creative away from the platform.
  • Removed SDK Video Player support and introduced standard HTML5 video DOM element for in-App serving.
  • Removed the webm video support.
  • Removed custom variable support and use local variable from creative instead.

November 5, 2015

  • Initial release
Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments