Overview
HTML5 Single Expandable base format is built using a single page architecture, with both banner and panel markup contained in a single html file.
Although the HTML5 Single Expandable is not a Custom Format (base format), we encourage the use of curated templates for all "HTML5 Single 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.
The templates can be customized and extended to include additional userActionCounter's, automaticEvent Counters, or any of our HTML5 features from features block.
The ad starts as a collapsed panel and can then be either expanded or clicked through to another site.
On the expanded panel, the user can either click the UserAction button, or close the ad and return it to the collapsed state. 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.
While the HTML5 Single Expandable 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 Single Expandable 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 |
The following screen-grab shows the collapsed and expanded states of the 320x50 to 320x416 expandable template with video:
Demos/Downloads
The following table provides links to the template and demo for the HTML5 Single Expandable format.
Template |
|
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 | ✓ |
1 DCO (Dynamic Creative) and Additional Assets Support.
This is a base format - HTML5 Single Expandable.
Please review the Sizmek AdKit API page for a full list of exciting new features.
Implementing a HTML5 Single Expandable Format
Before you Begin
Make sure you have the following resources available:
The HTML5 Single Expandable format workspace that is applicable to your campaign and fits the dimensions of publishers inventory(always check publisher / programmatic network specs first).
You can download the workspace and extract the ZIP file, preserving the directory structure.
Workspaces Available
Workspace | Dimension | Video |
CFG_Released_HTML5SingleExpandable_1.0.26_160x600.zip | 160x600 | No |
CFG_Released_HTML5SingleExpandable_1.0.26_160x600_video.zip | 160x600 | Yes |
CFG_Released_HTML5SingleExpandable_1.0.26_320x50.zip | 320x50 | No |
CFG_Released_HTML5SingleExpandable_1.0.26_320x50_video.zip | 320x50 | Yes |
CFG_Released_HTML5SingleExpandable_1.0.26_300x250.zip | 300x250 | No |
CFG_Released_HTML5SingleExpandable_1.0.26_300x250_video.zip | 300x250 | Yes |
CFG_Released_HTML5SingleExpandable_1.0.26_728x90.zip | 728x90 | No |
CFG_Released_HTML5SingleExpandable_1.0.26_728x90_video.zip | 728x90 | No |
Included Template Files
HTML, JS & CSS
The following script / markup files are included:
File Name |
Description |
index.html |
The html file of the ad. |
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) of the template. |
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). |
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 |
Sizmek logo image |
images/poster.jpg |
Poster image for the video (video template only) |
Videos
The following video template files are included in the videos folder:
File Name |
Description |
videos/video.mp4 |
The video used in video templates (video versions of template only) |
Customizing HTML5 Single Expandable in HTML
All of the HTML5 Single Expandable functionalities are coded within the template 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.
To update the layout and design of a template, open the index.html and style.css files in a text editor.
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 expansion:
To resize the expansion, you would need to edit both css as well as EB.initExpansionParams() methods arguments. You will find this method invocation in the index.html usually around line 15.
All you need to do is update the values of the arguments so that they fit the size of your expanded panel.
E.g.if(0)EB.initExpansionParams(xPosition, yPosition, width, height);
When populated it looks like this:if(0)EB.initExpansionParams(140, 0, 300, 600);
Line 15 of our template's index.html filee:<script>if(0)EB.initExpansionParams(140, 0, 300, 600);</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 |
|
Global variable(s) used to select DOM elements. Add/Edit/Remove these variable(s) as you modify elements in index.html. |
|
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. |
|
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) |
|
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 |
|
Check to see if the adKit is ready and then proceed to initialize creative. |
|
Initialize the creative. |
|
This is where we initialize the global variables for HTML elements. |
|
This is where we initialize the close button, depending on the serving environment and the variable useDefaultCloseButtonInMRAID, we show/hide our custom close button and/or notify the MRAID API if it needs to hide the default SDK (MRAID) close button. |
|
This function initializes video tracking by creating a new instance of EBG Video Module. |
|
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. |
|
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. |
|
Click event handler function for the expand button. |
|
Click event handler function for the close button. |
|
Click event handler for user action button. |
|
Click handler for the click through button. |
|
The function that pauses the video. |
Setting Up HTML5 Single Expandable in Sizmek MDX
Sizmek MDX2.0 Setup
- Once customized, 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.
- In the Sizmek MDX2.0, under Creative Assets, create new Workspace by uploading the ZIP file.
- Under the Ads section, create a new master ad.
- Set Ad Format to HTML5 Single Expandable and fill out the general info for the ad(name, etc).
- Assign the workspace you uploaded and the default image from the images folder.
- Add the URL for the default click-through.
- Save the ad.
- Create a new placement for the ad.
- Fill in the general info for the placement (name, serving dates, publisher, impressions, etc...). Set the Placement type to In Banner and the Banner size to the template size.
- After you’ve saved your placement, you can then generate preview tags to test on your publishers site.
Sizmek Ad Suite Setup
- 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.
- Click the Creative menu item > Asset Library, Upload your workspace the chosen folder.
- Click the Creative menu item > Ads and click the New Ad button and select Blank Ad.
- Set Ad Format to HTML5 Single Expandable Banner and fill out the general info for the ad(name, etc).
- Under Creative Assets select Main Assets tab and then select the Workspace folder and default image.
- Add the URL for the default click-through.
- Save the ad.
- Create a new placement for the ad.
- Fill in the general info for the placement (name, serving dates, publisher, impressions, etc...). Set the Placement type to In Banner and the Banner size to the template size.
- After you’ve saved your placement, you can then generate preview tags to test on your publishers 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 webm video support.
March 10, 2015
- Modified template so it can load EBLoader.js in secure or insecure environments.
- Fixed bug in iOS Safari in which video controls are not centered horizontally when the video is less than 260px wide.
April 30, 2014
- Sizmek rebranding.
- Simplified and increased reliability of full screen feature on many devices and in-app environments.
- Fixed bugs with expanding ad from a fixed publisher div.
- HTML5 Full Screen Expandable is now a custom format separate from the HTML5 Single Expandable Banner.
- Removed custom graphics from video player in favor of simpler native controls
October 21, 2014
- Renamed the template workspaces from HTML5 Expandable Banner to HTML5 Single Expandable to align better with the format naming already used on the Sizmek Platform
- Added support for MRAID video so the templates will work in APP or in mobile browser.
September 26, 2012
- Initial Release
Comments