Overview

Note: This format is called HTML5 Polite Banner in Sizmek MDX and HTML5 Rich Media Banner in Sizmek Ad Suite.

The HTML5 Rich Media Banner is a set of templates created for the HTML5 Rich Media Banner - a base format for displaying an HTML5 banner with rich media content.
The ad starts with images within page content as well as UserAction and ClickThrough buttons.  Some of the Rich Media Banner Templates contain video elements with pre-set tracking.

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

Although the HTML5 Rich Media Banner is not a Custom Format (base format), we encourage the use of curated templates for all "HTML5 Rich Media Banner 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 the ClickThrough button records a clickthrough.
Clicking the UserAction button records a custom interaction and is hence being tracked in reports.
Some HTML5 Rich Media Banner templates contain a video element, which is pre-set to track video interactions.

While the HTML5 Rich Media Banner can be customized to any size, templates with common sizes are already provided.

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

Banner Size	Video
160x600	No
160x600	Yes
300x600	No
300x600	Yes
300x250	No
300x250	Yes
320x50	No
728x90	No

The following screen-grab shows the 300x250 rich media banner with a video element (native Chrome browser video controls and player present):

Demos/Downloads

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

Template	CFG_RELEASED_HTML5PoliteBanner_1.0.18.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 Rich Media Banner.
Please review the Sizmek AdKit API page for a full list of exciting new features.

Implementing a HTML5 Rich Media Banner Format

Before you Begin

Make sure you have the following resources available:

The HTML5 Rich Media 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_HTML5PoliteBanner_1.0.18_160x600.zip	160x600	No
CFG_Released_HTML5PoliteBanner_1.0.18_160x600_video.zip	160x600	Yes
CFG_Released_HTML5PoliteBanner_1.0.18_300x600.zip	300x600	No
CFG_Released_HTML5PoliteBanner_1.0.18_300x600_video.zip	300x600	Yes
CFG_Released_HTML5PoliteBanner_1.0.18_300x250.zip	300x250	No
CFG_Released_HTML5PoliteBanner_1.0.18_300x250_video.zip	300x250	Yes
CFG_Released_HTML5PoliteBanner_1.0.18_320x50.zip	320x50	No
CFG_Released_HTML5PoliteBanner_1.0.18_728x90.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 the banner
config.js	A dummy(empty) config file - AdKit dependency.
styles/reset.css	Reset the native styles of the browser so that the ad can look as intended.
styles/style.css	The style sheet for the banner and its HTML5 elements
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 Rich Media Banner has an "autoPlayVideo" variable you can customize in the settings and this only applied to the template that come with video.
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 Rich Media Banner in HTML

All of the HTML5 Rich Media Banner functionality is programmed in the template files. At minimum, the only changes you will need to make are to the loaded image and video 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.

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, clickthroughButton, userActionButton, video	Global variable(s) used to select DOM elements. Add/Edit/Remove these variable(s) as you modify elements in index.html.
sdkData, adId, rnd, uid, isMRAID	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 banner load. You can modify this variable from scripts/settings.js. (This variable only available for the template that come with video)

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.
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.
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.
handleUserActionButtonClick	Click event handler for user action button.
handleClickthroughButtonClick	Click handler for the click through button.
pauseVideo	The function that pauses the video.

Setting Up HTML5 Polite Banner in Sizmek

Sizmek MDX2.0 Setup

1. Once customized, archive the HTML5 Polite 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 Polite 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. Add the URL for the default click-through.
7. Save the ad.
8. Create a placement for the ad.
9. Fill out the form. Set the Placement type to In Banner and the Banner size to the template size.
10. After you’ve saved your placement, you can then generate preview tags to test on your web site.

Sizmek Ad Suite Setup

1. Archive the HTML5 Rich Media Banner 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 Rich Media 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. Add the URL for the default click-through.
7. Save the ad.
8. Create a new placement for the ad.
9. Fill out the form. Set the Placement type to In Banner and the Banner size to the template size.
10. 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.

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.

July 14, 2014

• Sizmek rebranding.
• Removed custom video player controls in favor of simpler native controls

October 21, 2014

• Update the template so it can work in both web browser and in App.

March 4, 2013

• Initial Release.