Overview

The Deluxe Banner is a rich banner that is able to resize responsively or adaptively to fill the available space. The format also supports using one fixed size for ad placements that do not change size.

This format includes a fully “domain configurable” solution.  This allows one tag to be served across different domains, where Certification and Support can use the “Liquid Domain Manager” to change custom variables, JavaScript and CSS on specific domains, so a single tag can work everywhere as expected. (Note: This has previously been referred to as a “programmatic” solution, but is more appropriate for PMPs and smaller networks that have been certified with Sizmek)  For more information on the domain configurable formats in general, and how to preview the different certified settings, please see Domain Config Solution for Custom Formats

This template includes UserAction and ClickThrough buttons as well as video. The template can be customized and extended to include a wide array of interactive features.

Clicking the UserAction button sends a custom interaction that is tracked in reports.  Clicking the ClickThrough button opens up an advertiser’s site. 

The design can adapt to all but the smallest sizes. The contents of the ad will move as the ad changes in size, meaning the template is ready to be used in responsive, adaptive, or fixed sizes. Responsive ads are capable of being displayed in any size. Adaptive ads display in a set of predetermined sizes, showing the largest size that is available on the publisher page. Fixed size ads will remain at one size regardless of the space available.

Video Template

 The Video template adds video, text, and a background image to the Basic template. The video and text adapt to fit a wide variety of ad sizes, and disappear when there is not enough space available.

For example, here is the Video template when the ad resizes to 450x500:

Demos/Downloads

The following table provides links to the templates and demo for the Deluxe Banner format.

Supported Platforms

Note: Supported in both mobile browsers as well as in MRAID-compliant apps.

Features

These are the key features of the Deluxe Banner format.

Implementing a Deluxe Banner

Before you begin

Included Template Files

HTML

The following HTML5 template files are included.

Styles

The following CSS template files are included.

Scripts

The following JavaScript files are included.

Images

The following image template files are included.

Videos

The following video template files are included.

Customizing a Deluxe Banner

All of the Deluxe 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.

Note: When updating or replacing images or videos, make sure to also update references to their file names and dimensions found in index.html and style.css as necessary.

To update the layout, design, and functionality of a template, open the HTML, CSS, and JS files in a text editor.

Common Customizations

Responsive

A responsive banner will resize to fill whatever space is available to it. To make a responsive banner, set mdResizeBehavior to "responsive". You may also want to set minimum and maximum heights and widths, to make sure your design is never displayed at a size it doesn't support. 

Creating responsive designs can be difficult. You can make it easier by learning about CSS media queries, which allow you to change the style of the ad based on the available space. You can also use CSS flexboxes, which allow you to create extremely responsive designs that can stack or spread out based on the available space. Note that you will need to use many different CSS prefixes with flexbox to support a wide range of browsers. For example, "-webkit-" and "-ms-". Look at the style.css file for the video template for an example of the various prefixes you may need to use.

Adaptive

An adaptive banner will snap to different preset sizes based on the available space. Set mdResizeBehavior to "adaptive" to make an adaptive banner. It will attempt to use the largest size that fits in the designated area. You can choose the adaptive sizes using the mdAdaptiveBreakpoints variable. For example, if you wanted an ad that snaps to the widths 300px, 600px, 900px, and 1200px, set the breakpoints to "300,600,900,1200". When the space available is greater than or equal to 300px wide, the ad will show the 300px size. When the space available is greater than or equal to 600px wide, the ad will show the 600px size. If the space available is less than 300px wide, the ad will fall back to using the minimum width and minimum height, which are set using custom variables. 

You can also designate explicit heights for each breakpoint. For example, "300x250,600x400,900x750,1200x800". When the width available is greater than or equal to 300px, the ad will change to 300x250. If heights are not specified, the ad will generally use the minimum height custom variable as its height. 

Fixed

If you want the banner to simply display at one size, you can set mdResizeBehavior to "fixed" and set a fixed height and fixed width using custom variables.  

Changing width and height dependencies

The width and height dependency custom variables are used to determine the basis for the ad's resizing. For example, you can set the ad to change its width based on the current width of the element containing it using the setting "advertiserDiv", or set it to resize based on the width of the browser windows using the setting "browser".

You can set the height of the banner to resize based on an aspect ratio using the setting "aspectRatio" and setting the aspect ratio to a value like "16:9" or "3:4". This will make the height adjust itself proportionally based on the current width of the ad.

You can also set either dependency to "fixed" to make that dimension use the value set in the the fixed height or fixed width variables. 

If you want the height or width to be based on a specific element on the page, you can set it to a CSS selector for that element. For example, if you want the width to be based on an element with the id "container", you can set the width dependency to "#container". 

When you are making a responsive ad, the ad will generally resize to the same size as the element you select as the dependency. When you are making an adaptive ad, the ad will use the largest adaptive breakpoint that is less than or equal to the size of the element you select as the dependency. This will use width rather than height, so the height dependency custom variable is not as useful for adaptive banners.

Detecting Scroll Position

All the provided templates have a function that handles keeping aware of the current scroll position. When the ad first loads, the current scroll position is received. Upon any scroll, resize, or orientation change, the new scroll position will be updated. You can access the current scroll position, available in values from 0 to 100 (percentage scrolled), via the global object and properties scrollPos.x and scrollPos.y from the creative script.js.  If you want to have code that adjusts positioning when the scrollPositioning is updated, you can put your code in the onPageScroll function in script.js.

Note: Occasionally there is network trouble causing the scroll detection code to fail, so be sure to not rely on scroll position without including backup functionality in case of failure.

Manifest Configuration (config.js file)

We have outlined some information about this file below, but for a more detailed description, please see the article in the Sizmek Help Center by going here.

The Manifest Configuration File (config.js location in the root folder of the workspace) is a metadata file that defines certain default behaviors for the ad when created on the Sizmek Advertising Suite platform (MDX does not support the manifest file; the file is simply ignored).  When you create a new blank ad, and select a workspace containing a manifest file, the information in that manifest file will be applied.  You may certainly make changes to the inputted information once the data is there.  The manifest file only gets applied once, when you assign a workspace.

Figure 1

Manifest Property: adFormatId

Fig. 1, Item 1

Default Value: 10366

Description: DO NOT MODIFY this value or your ad will not function correctly. This is a reference to the custom ad format ID that maps to the Deluxe Banner in the Sizmek platform.

Manifest Property: name

Fig. 1, Item 2

Default Value: "CIT_RELEASED_DeluxeBanner_2_0_0_1x1_Basic"

Description: User-defined name displayed in the platform. You may change this to your desired name, or you may leave this line out entirely to create an ad without assigning a name.

Manifest Property: defaultBanner

Default Value: "Main_Banner"

Description: This is the name of the banner. This must match the name of the (only) asset in the banners array. This value is never displayed in the platform nor in reports, so while you can edit this, assuming you also changed the name of the banner in the below array to match this, it would have no effect.

Manifest Property: banners

Description: A single-entry array of the only banner in the ad.

Parameters:

Figure 2

Manifest Property: clickThrough

Description: Object containing details on the default clickthrough for the ad

Parameters:

Manifest Property: customInteractions

Description: Array containing objects that define the default custom interactions for the ad.  This ad template only includes one interaction.

Parameters:

Manifest Property: variables

Description: Array containing key/value pair objects that define the default values of the custom variables for the ad.  

Guidelines and Rules

• The Manifest file key name must match the format key name.  Note, this is NOT the same as the variable display name.
• A key is ignored and not added to the ad, if the Manifest file includes a unique key that is not defined on the format level.
• The last key is used in the Manifest file if the key appears more than once.
• Variables that are embedded on the format level with default values will appear on the ad level even if they do not exist on in the Manifest file.
• A variable is ignored if an error or conflict arises. The default values on the format level apply.
• Variable values can include boolean, integers, strings, and float types.
• All values should be entered with quotes, as strings, regardless of variable type
• Boolean values use lowercase "true" and "false" values

Parameters:

Example:

Recommended Manifest Configuration Changes

At the very least, you will want to make a minimum of these changes to your manifest file:

Name: The template provided includes the template name as the ad name.  You will want to make sure your ad is named according to your campaign/placement.

Clickthrough URL: The template clicks through to the Sizmek home page.  You will want to update the default clickthrough URL according to your campaign/placement.

Interactions: The template provides a single interaction named "userAction".  You will want to update this section to either include all the interactions you have in your ad's creative, or remove the section entirely and rely just on the asset scanning of the platform to detect all interactions in the code.

In addition to the above list, you may want to adjust the below entries:

Custom Variables: While the template provides default behavior, depending on the needs of your ad, the publisher(s) on which the ad will run, etc., you may need to adjust the values of some of the variables.

Banner Dimensions: The template provides is served as a 1x1.  You may need to serve a different tag size due to certain publisher restraints.  As this ad can behave responsively, you may serve any size banner you wish.  If you decide to change your banner size, you should change the Manifest to match.

Testing Your Deluxe Banner

You can test the banner by opening the index.html files in a modern browser. Change the size of the browser window to get a sense of how the design will look at different sizes. This is not, however, a reliable representation of how the ad might behave on a publisher page. This will depend on the layout of the publisher page and the Custom Variable settings.

Setting up a Deluxe Banner in the Sizmek Platform

Set up in the MDX2.0 Platform

Procedure

1. Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with
   WinZip, 7Zip, or another archiving program.
2. Under Creative Assets, create a new Workspace by uploading the ZIP file.
3. Under the Ads section, create a new ad.
4. Enter a name for the ad, and set Ad Format to Deluxe Banner.
5. Select the Workspace folder and the default image.
6. In the Settings section, under Advanced Features, customize the variables according to your needs, and those of your publishers.
7. Create a new placement for the ad.
8. Set the Placement type to In Banner and the Banner size to the size of your ad.
9. After you save your placement, you can generate preview tags to test on your web site.

Note: On the Sizmek platform, your user account will need access to the Deluxe Banner format in the list of available custom formats. If you do not have access to this format, please contact Support to gain permissions for this format.

Set up in the Sizmek Advertising Suite Platform

Procedure

1. Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with
   WinZip, 7Zip, or another archiving program.
2. Click Creative > Assets Library. Upload your Workspace to the chosen folder.
3. Click Creative > Ads, and then click New Ad > Blank Ad.
4. In the Creative Assets section, on the Main Assets tab, select the Workspace folder and the default image.
5. With the included manifest config.js file, all settings will be entered for you.  You can customize as you desire.
6. Enter a name for the ad.
7. Under the Advanced Features section, customize the variables to your needs, and those of your publishers.
8. Create a new placement for the ad.
9. Set the Placement type to In Banner and the Banner size to the size of your ad.
10. After you save your placement, you can generate preview tags to test on your web site.

Note: On the Sizmek platform, your user account will need access to the Deluxe Banner format in the list of available custom formats. If you do not have access to this format, please reach out to Support to gain permissions for this format.

Custom Variables

A variable is used when you have instructions in the code and you want the ad to behave accordingly. For example, you can create a variable that will be called by the JavaScript when you want to define the location of a panel when it opens and after how much time. Here you would define a variable for X (location) and a variable for Y (amount of time).

Custom variables are created in the Sizmek Workshop or HTML5 workspace. Once the ad is uploaded to the Sizmek platform, Sizmek recognizes that your ad contains variables and you can then changes their definitions in the Sizmek platform. You can create an unlimited number of variables in your ad.

Custom Interactions

Known Issues

• In SafeFrames and unfriendly iframes, the ad will only be able to resize based on the size of the SafeFrame or unfriendly iframe. It will not be able to resize based on the size of the browser window, screen, or elements on the advertiser page. This is due to security restrictions.
• The ad may disappear and reappear during initial load. This is due to a bug in AdKit.
• In certain scenarios, the scroll detection functionality fails to work.  Be sure to include a fallback behavior for any creative use of the scroll position.
• In IE10 and 11, local preview may not work due to security defaults.  You may need to click "allow" when prompted to run scripts and ActiveX content, in order to get the ad to function closer to how it would function live.

Change Log

2.0.0

Release: November ???, 2017

• Added MRAID support
• Updated format name (HTML5 Responsive Rich Media Banner --> Deluxe Banner)
• Updated base template to latest version
• Updated custom var mdProgEnable to mdIsDomainConfigEnabled
• Included manifest.js support
• Various minor bug fixes to improve performance and functionality

1.1.0

Release: February 7, 2017

• Added domain config (f/k/a programmatic) solution.
• Added Sizmek Advertising Suite support.
• Add new value option for mdResizeBehavior, "responsive_adaptive".
• Added new value option for mdHeightDependency, "advertiserdiv_adaptive".
• Added various other new custom variables included as a result of updating script to latest template code base.
• Page scroll position available in creative javascript.

1.0.0

Release: June 6, 2016

• First release