Submit a request
PRODUCT
Privacy Policy  |  Terms of Use  |  Cookie Preference
Follow
Last Update:
  viewable by end users
  editable by agents

Introduction

Overview

The Deluxe Expandable format provides a robust foundation for any campaign that requires a expand effect for their ad served within a publisher div, displaying a collapsed banner, but expanding to display a expand panel, that overlapping page content. This is a great format in particular for above-the-fold ad-serving. Further to that, we’ve recently enhanced the Deluxe Expandable to give you so much more in respect to flexibility, so as well as a expand effect, you can even set the expand panel to be a pushdown - pushing down content rather than overlapping it - or even to become a full-screen pushdown, or full-screen expand panel. Also, to ensure the best engagement and least intrusive experience, the format has customizations for a user versus auto experience. For example you could automatically expand to display a discrete panel for a set duration of time, that can auto-collapse, and when re-initialized by the user, could display a larger panel with a more engaging creative for a user who has opted-in to see the ad more fully. 

This is an all-in-one format that allows you to customize the Deluxe Expandable unit to behave as a traditional Expandable, or with easy platform customizations you can set a panel to behave like a pushdown, a fullscreen unit, or even have a single-expandable style expansion. In conjunction with the ability to define separate user versus auto responsive and adaptive behaviour for a expanded panel, and banner customizations for basic responsive versus fixed scaling - the creative developer has optimal flexibility to build a high-impact, in-page unit.

The Deluxe Expandable format is based on Html5 Expandable Banner, which is multi-panel expandable, the default template come with auto panel and user panel so the ad can have option to open up different panel with different content based on auto expand or user expand.  Furthermore, in order to get seamless effect while expanding the ad, Deluxe Expandable also has Single Expandable Template that allows you to add all your creative in one file and use as HTML5 Single Expandable. Below is the comparison between Multi-Panel Template and Single Expandable Template. This build guide will show you the details about Multi-Panel Template, if you are looking for Single Expandable Template please check the build guide for Single Expandable Template here.

  Multi-Panel Template Single Expandable Template
Seamless Expanding

No

Video or animation will be interrupted because banner and expanded panels are different html file.

Yes

Video or animation can continue play because banner and panels are in the same html file.
MRAID Supported

Yes

Yes, however, it will expand the actual panel files instead of resize the banner because of the MRAID design limitation.
Safeframe Supported

Yes, with fixed banner size and fixed panel size configuration.

Yes, with fixed banner size and fixed panel size configuration.

Note: ad will expand the actual panel files instead of resize the banner because of the safeframe design limitation.
Auto Expand Panel

Yes, but disabled by default

panels/expandAuto/index.html from workspace root

Yes, but disabled by default

div#autoExpand in index.html from workspace root

or

panels/expandAuto/index.html from workspace root if expecting ad served in MRAID or Safeframe
User Expand Panel

Yes

panels/expandUser/index.html from workspace root

Yes

div#userExpand in index.html from workspace root

or

panels/expandUser/index.html from workspace root if expecting ad served in MRAID or Safeframe
Pushdown Supported

Yes

Yes
Fullscreen Expand Supported

Yes

Yes
Fullscreen Pushdown Supported

Yes

Yes
Native Platform Frequency Supported

Yes

Yes
Dynamic Expansion Supported

No

No

 

These are the key ways to customize the panel expansion behaviour using the mdAutoPanelType or mdUserPanelType customizations:

  • Expand Effect: Using the 'expand' customization will expand the panel to overlap the content of a webpage.
  • Pushdown Effect: Using the 'pushdown' customization will slide down the content of a webpage, moving elements out of the way to accommodate for the ad.
  • Fullscreen Expand Effect: Expands the panel over the entire viewport.
  • Fullscreen Pushdown Effect: This expands the panel over the entire viewport by pushing down the page content. (page contents must be wrapped within a single container right below the ad container in order to get fullscreen pushdown effect)

With this release, we are aiming to cover all use cases and functionalities previously handled by separate formats - HTML5 Expandable, HTML5 Responsive Expandable, HTML5 Single Expandable and HTML5 Full Screen Expandable and old HTML5 Pushdown format.

All of the variations apart from single expandable templates allow user full control over what is shown to the user on auto expand as well as on user initiated expand, as well as frequency capping options.

The responsiveness of the format can be managed by various settings for both banner and panels. For example, a banner can be either fixed size or full-screen width with dynamic height based on configurable break points so that content may be rearranged and modified as the size of the browsers window size grows or shrinks.

Workspace Information

Name

Video

Banner Dimension

Panel Dimension

DeluxeExpandable_MultiPanel_1.0.0

No

Full width x 50

Full width x 300 (auto)

Full width x 400 (user)

DeluxeExpandable_MultiPanel_Video_1.0.0

Yes

Full width x 50

Full width x 300 (auto)

Full width x 400 (user)

The format contains a separate auto-expand panel which opens according to the default panel frequency capping settings in the platform, the auto-expand is disabled by default, to enable it, simply go to ad settings in Platform and enable the auto expand, you may also setup the frequency capping when you enable the auto-expand setting.  The user expand panel which opens when clicking the expand button. For the template with video, the user-expand panel contains a video asset that can auto play when the panel expands. Both panels expansion behavior can now be fully controlled from the creative asset allowing developers greater control , the panels can either expand over or push down the page content or expand to full screen based on user customization. For more information, see the Custom Variables section. Both auto and user expand panels will open to fill the view port area when in full screen mode and the ad will handle browser window resizing responsively. 

The images below shows you the responsive banner size based on the browser width and adaptive height combination.

e-mb-1.jpg

e-mb2.jpg

e-mb-3.jpg

The images below show you the responsive panel with different height setting and different content for auto and user expand panels.

e-pa.jpg

e-pu.jpg

Demos/Downloads

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

Template

Demo

Preview demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Microsoft Edge, Firefox, Chrome, Safari

Mac

Safari, Firefox, Chrome

iPhone

iOS 9.0 and later, including MRAID Apps

iPad

iOS 9.0 and later, including MRAID Apps

Android Phone

Android 4.4 and later, including MRAID Apps

Android Tablet

Android 4.4 and later, including MRAID Apps

Format Properties

Common properties available to the format.

Feature Supported
Polite Loading ✓
Safeframe Support 1 ✓
MRAID (in-APP Support)  ✓
AdKit ready 2 ✓
Programmatic (One-Tag Solution) ✓
Secure Serving ✓
Sizmek Advertising Suite Support ✓
Ad Builder Templates Available ✓

1 Safeframe supported only with fixed banner size and fixed panel size configuration.

2 Allows for DCO Support as well as Additional Assets.

Note: This format uses the HTML5 Expandable Banner as the base format.

Implementing an Deluxe Expandable using Workspace

Deluxe Expandable Assets

Included Template Files

HTML

The following HTML template files are included.

File Name

Description

index.html

The banner file.

config.js

Ad configuration file.

scripts/scripts.js

The script for the banner.

scripts/localPreview.js

Local preview file.

styles/reset.css

The style sheet resets the banner and panel so they can have a clean style to start with.

styles/style.css

The style sheet for the banner.

panels/expandAuto/index.html

The default panel (auto expand) file.

panels/expandAuto/styles/style.css

The style sheet for the default panel.

panels/expandAuto/scripts/script.js

The script for the default panel.

panels/expandUser/index.html

The user expand panel file.

panels/expandUser/styles/style.css

The style sheet for the user expand panel.

panels/expandUser/scripts/script.js

The script for the user expand panel.

Images

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

File Name

Description

images/backup_1x1.jpg

Backup image.

images/logo.png

Logo image for banner.

panels/expandAuto/images/logo.png

Logo image for auto expand panel.

panels/expandUser/images/logo.png

Logo image for user expand panel.

panels/expandUser/images/poster.png

Poster image for the video.
Images

The following image template files are included in the videos folder.

File Name

Description

panels/expandUser/videos/video.mp4

Demo videos in mp4 format (template with video)

 Customizing Deluxe Expandable

Customize the Banner

Procedure

The Deluxe Expandable format starts with the 1x1 responsive banner and will be resized to the proper size according to ad settings.

  1. To customize the banner, open the index.html from the root of the workspace.
  2. Change the creative (html elements) within the <body> tag to fit your creative spec.
  3. Open styles/style.css to change the stylesheet based on your creative requirements.
  4. Open scripts/script.js in JavaScript editing tool and add your own script. Please make sure to check the variable definitions and function usages below before you edit the script file. 

 

Customize the Default Panel (Auto Expand Panel)

Procedure
  1. Open panels/expandAuto/index.html in an HTML-authoring environment so you can edit/alter all the html elements within <body> tag to create your own creative content.
  2. Make changes to the panels/expandAuto/styles/style.css based on your content design.
  3. Finally, open panels/expandAuto/scripts/script.js in JavaScript editing tool and add your own script. Please make sure to check the variable definitions and function usages below before you edit the script file. 

Customize the User Expand Panel

Procedure
  1. Open panels/expandUser/index.html in an HTML-authoring environment so you can edit/alter all the html elements within <body> tag to create your own creative content.
  2. Make changes to the panels/expandUser/styles/style.css based on your content design.
  3. Finally, open panels/expandUser/scripts/script.js in JavaScript editing tool and add your own script. Please make sure to check the variable definitions and function usages below before you edit the script file.

 

Variable Definitions

Variable Name

Description

expandButton,
closeButton,
userActionButton,
clickthroughButton,
video

Global variable(s) that will be used for define the HTML objects later. You may add/edit/remove the variable(s) if modify the HTML objects.

adId,
rnd,
uid,
bannerDiv,
expansionDiv,
videoTrackingModule,
autoCollapseTimer,
cancelAutoCollapse,
timeOut,
playContentDelayTimer,
expandType,
duration,
easing,
panelName,
bannerWidth,
bannerHeight,
panelWidth,
panelHeight,
PANEL_WIDTH_DEPENDENCY,
PANEL_HEIGHT_DEPENDENCY,
panelAutoBreakPoints,
panelUserBreakPoints,
parentViewPort,
initComplete,
ccReady,
sdkData,
isMRAID,
useCustomClose

These variables use to store values that are necessary when running the ad. Please do NOT make any change to these variables.

Function Usages

Function Name

Description

checkIfAdKitReady

Check to see if the AdKit is initialized and then proceed to initialize creative.

initializeCreative

Initialize creative. You may add your own script here if you wish to execute a script when the creative is initialized.

initializeGlobalVariables

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

initializeCloseButton

This is where we initialize close button, we based on the serving environment and custom variable to decide if we should display the close button here.

initializeVideoTracking

This function initialize video tracking.

addEventListeners

This is where we add all the event listeners for the ad.

handleRollover

This function handles the mouse over event, we cancel the auto collapse here when user mouse over the ad unit.

handleExpandButtonClick

Call this function to expand the user expand panel.

handleCloseButtonClick

Call this function to close the panel.

handleUserActionButtonClick

This function is an example for how we call and track the user action.

handleClickthroughButtonClick

Call this function for the default click-through. This function also pause the video when there is a video.

showMessage,
panelListener,
isNativeAndroidBrowser,
preventPageScrolling,
allowPageScrolling,
stopScrolling,
collapse,
getCustomVar,
setCreativeVersion,
creativeContainerReady,
openPanel,
getPanelFixedSize,
getPanelWidth,
getPanelHeight,
closePanel,
pauseVideo

These are utility functions, please do not make any change to these functions.

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.

figure1.jpg

Manifest Property: adFormatId

Default Value: 10430

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 Pushdown in the Sizmek platform. The mapped format name should appear in Ad Format selection shown in Figure1#2.

Manifest Property: name

Default Value: ""

Description: User-defined ad 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. The input value should appear in Ad Name field shown in Figure1#1.

Manifest Property: defaultBanner

Default Value: "Main_Banner"

Description: This is the name of the default 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: defaultPanel

Default Value: "Default_Panel"

Description: This is the name of the default panel. This must match the name of the asset in the panels array.

Manifest Property: banners

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

Parameters:

Field Default Value Description
name "Main_Banner" Name of the banner, this must match the value of defaultBanner above. No reason to change this.
width 1

Integer value representing the banner width in pixels. Note: this should match the height of the defaultImage. The input value should appear with input height in Dimensions column shown in Figure1#4.
height 1

Integer value representing the banner height in pixels. Note: this should match the height of the defaultImage. The input value should appear with input width in Dimensions column shown in Figure1#4.
defaultImage "images/default.jpg"

Relative path to the default image for this format. The input value should appear in Asset column shown in Figure1#3. Note: only file name will be displayed instead of full relative path.

figure2.jpg

Manifest Property: clickThrough

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

Parameters:

Field Default Value Description
url "http://www.sizmek.com/?defaultClickthrough"

Landing page when a user clicks. The URL can include up to a 1,000 characters. The input value should appear in Click-thriugh URL field shown in Figure2#1.
target "newWindow"

Where to open the url when user clicks. The input value should appear in Target Window selection shown in Figure2#2.

Options are:

  • newWindow: Opens the landing page in a new browser window or a new tab.
  • currentFrame: Opens the landing page in the current iframe or iframe of the page.
  • top: Opens landing page on the top of the page.
showMenuBar true

Boolean value that determines the appearance of the browser's menu bar in the landing page new window/tab. The input value should appear in Show Menu Bar checkbox shown in Figure2#4.
showAddressBar true

Boolean value that determines the appearance of the browser's address bar in the landing page new window/tab. The input value should appear in Show Menu Bar checkbox shown in Figure2#3.
closePanels false

Boolean value that determines if panel should be collapsed when click-through triggered.

Note: This is not yet implemented in the UI. You can safely ignore this setting if format/template does not include any panels.

figure3.jpg

Manifest Property: customInteractions

Description: Array containing objects that define the default custom interactions for the ad.

Parameters:

Field Default Value Description
name "userAction"

The name of the user action as defined in the workspace. The input value should appear in Name column shown in Figure3#1.
reportingName "User Action"

The name to appear in reports for this custom interaction. The input value should appear in Reporting Name column shown in Figure3#2.
type "userAction"

Type of interaction. The input value should appear in Type column shown in Figure3#3.

Options are:

  • autoEvent
  • userAction
  • clickThrough
  • timer
includeInRate true

A boolean value that defines whether to include the interaction in the Interaction Rate, and to influence the Interaction Rate metrics in reports. The input value should appear in Include In Interaction Rate column shown in Figure3#4.
Note: Applicable only for userAction type. If not entered the default is true.
closePanels false

Defines whether to close the ad's panels when the interaction is triggered. The input value should appear in Close Ad Parts column shown in Figure3#5.
Note: Applicable for all types, except timer. You can safely ignore this setting if format/template does not include any panels.
landingPageUrl "http://www.sizmek.com/?userAction"

Landing page to which the user will be directed when triggering the interaction. The input value should appear in Redirect URL column shown in Figure3#6.

Note: The URL can include up to a 1,000 characters. You can  safely ignore this setting if there is no landing page for the custom interaction.
target "newWindow"

Where to open the url when user clicks.

Options are:

  • newWindow: Opens the landing page in a new browser window or a new tab.
  • currentFrame: Opens the landing page in the current iframe or iframe of the page.
  • top: Opens landing page on the top of the page.

This is not yet implemented in the UI
showMenuBar true

Boolean value that determines the appearance of the browser's menu bar in the landing page new window/tab.

This is not yet implemented in the UI
showAddressBar true

Boolean value that determines the appearance of the browser's address bar in the landing page new window/tab.

This is not yet implemented in the UI

figure4.jpg

figure5.jpg
Manifest Property: panels

Description: An array of the panel(s) in the ad.

Parameters:

Field Default Value Description
name "Default_Panel" Name of the panel, this must match the value of defaultPanel above if is default panel. The input value should appear in Panel Name column shown in Figure4#1.
width 1

Integer value representing the panel width in pixels. The input value should appear in Width column shown in Figure4#5.
height 1

Integer value representing the banner height in pixels. The input value should appear in Height column shown in Figure4#6.
asset "panels/defaultPanel/index.html"

Relative path to the panel index file for this format. The input value should appear in Asset column shown in Figure4#2.
x 0

The left offset for the panel position. The input value should appear in X column shown in Figure4#4.
Y 0

The top offset for the panel position. The input value should appear in Y column shown in Figure4#5.
delayedExpansion false

Boolean value that determines if panel should be expanded with delay. The input value should appear in Delay Expansion checkbox shown in Figure5#2.
positionType bannerRelativePixels

The type of panel positioning. The  input value should appear in Position Types selection shown in Figure5#1.

Options are:

  • bannerRelativePixels: The panel position is relative to the banner’s top-left corner.
  • pageRelativePixels: The panel is positioned relative to the webpage’s center.
  • pageRelativePercentage: The panel is positioned relative to the webpage’s top-left corner.
autoCollapse never

This determines if the panel should auto collapse or not. The input value should appear in Retractions selection shown in Figure5#3.

Options are:

  • never: Do not collapse the panel.
  • mouseOffAdd: Collapse the panel when the mouse does not hover over the panel.
  • mouseOffPanel: Auto-collapse panel when the mouse pointer does not hover over the panel.

  

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, please refer to the Custom Variables section below for the key value for each custom variable.
  • 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:

Field Description
key Key of the custom variable.  Note: this is NOT the display name, please refer to the Custom Variables section below for the key value for each custom variable.
value

The default value of the variable.  Encapsulate every value in quotes, regardless of if variable type is string, integer, float, or boolean.

Example:

varExample.png  

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.

 

Common Customizations

Auto expand with full screen user expand

  1. Download the template and update the template with your creative assets and code.
  2. Upload your workspace to platform and create an ad using Deluxe Expandable format.
  3. Set the auto expand panel to be default panel on ad setup level and setup user Panel separately.
  4. Set the custom variable value of mdAutoPanelName and mdUserPanelName to fit the names you defined for the panels on ad setup level.
  5. Set the values of mdAutoPanelType to be "expand" and mdUserPanelType to "fullscreen_expand".
  6. Enable auto expand in ad Platform and set the frequency as you desired.

Full screen expand on auto expand

  1. Download the template and update the template with your creative assets and code.
  2. Upload your workspace to platform and create an ad using Deluxe Expandable format.
  3. Set the auto expand panel to be default panel on ad setup level and setup user Panel separately.
  4. Set the custom variable value of mdAutoPanelName and mdUserPanelName to fit the names you defined for the panels on ad setup level.
  5. Set the values of mdAutoPanelType to be "fullscreen_expand".
  6. Enable auto expand in ad Platform and set the frequency as you desired.

Pushdown on both auto and user expand

  1. Download the template and update the template with your creative assets and code.
  2. Upload your workspace to platform and create an ad using Deluxe Expandable format.
  3. Set the auto expand panel to be default panel on ad setup level and setup user Panel separately.
  4. Set the custom variable value of mdAutoPanelName and mdUserPanelName to fit the names you defined for the panels on ad setup level.
  5. Set the values of mdAutoPanelType to be "pushdown" and mdUserPanelType to "pushdown".
  6. Enable auto expand in ad Platform and set the frequency as you desired.

Making banner and panel fixed size

  1. Open panel html files and modify the values in EB.initPanelDimensions method, for example, if you wish your panel is 320x415 fixed size, you will need to change the value to make the EB.initPanelDimensions method like this: EB.initPanelDimensions(320,415).
  2. Open adConfig.js from the workspace root and change the panel width and height to the size you desired.
  3. Change your default image size to fit the banner size.
  4. Upload your workspace to platform and create an ad using Pushdown format.
  5. Make sure that mdBannerSizeInheritance, mdPanelWidthDependency, and mdPanelHeightDependency are set to "fixed".
  6. Set the mdBannerFixedSize, mdAutoPanelFixedSize, and mdUserPanelFixedSize to the size you desired using [width]x[height] format.

Managing panel responsiveness using full width

  1. Set the custom variable value of mdPanelWidthDependency to "browserWidth".
  2. Set the custom variable value of mdPanelHeightDependency to "adaptive".
  3. Set the mdAutoPanelBreakpoints and mdUserPanelBreakpoints using the [width]:[height], [width]:[height], [width]:[height] format.

Managing panel responsiveness using adaptive width

  1. Set the custom variable value of mdPanelWidthDependency to "adaptive".
  2. Set the custom variable value of mdPanelHeightDependency to "adaptive".
  3. Set the mdAutoPanelFixedHeight and mdUserPanelBreakpoints using the [width]:[height], [width]:[height], [width]:[height] format.

Using Comm Module to sync Panels of multipanel ads

  1. Download and update the template(multipanel) with your creative assets and code.
  2. Edit all your index.html panel html files so that they are loading the Comm module:
    EBModulesToLoad = ['Comm'];
  3. Use the code from this guide to sync your panels:
    https://support.sizmek.com/hc/en-us/articles/115000140563--howto-Glossary-Work-with-the-Comm-Module-in-the-HTML5-API
  4. Read and make sure you understand serving environment limitations.
  5. Test on publishers test page with live tags. 

Setting up Deluxe Expandable on Sizmek Platforms

Setting Up Deluxe Expandable in Sizmek MDX2.0

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. In the Sizmek MDX2.0 platform, under Creative Assets, create a new Workspace by uploading the ZIP file.
  3. Under the Ads section, create a new ad.
  4. Set Ad Format to Deluxe Expandable and fill out the form.

    Note: On the Sizmek MDX2.0 Platform, your user account will need access to the Deluxe Expandable format in the list of available custom formats.  If you do not have access to this, please reach out to Support (support@sizmek.com) to be granted permissions to setup an ad using this format.

  5. Under the Creative select the workspace and default image from the workspace zip that was uploaded.
  6. Under the Panels List, add the auto expand panel using following settings.
    • Panel Name: expandAuto
    • Creative Asset: Select panels/expandAuto/index.html from the root of workspace
    • Dimensions: 1x1
    • Auto Expand on Mouse Over: unchecked
    • Delay Expansion: unchecked
    • Auto Retract When: Never
    • Position Type: Banner relative
    • X: 0
    • Y: 0
  1. Under Panels List, add the user expand panel using following settings.
    • Panel Name: expandUser
    • Creative Asset: Select panels/expandAuto/index.html from the root of workspace
    • Dimension: 1x1
    • Auto Expand on Mouseover: unchecked
    • Delay Expansion: unchecked
    • Auto Retract When: Never
    • Position Type: Banner relative
    • X: 0
    • Y: 0
  1. For the Panel Settings, please make sure Show Single Panel at a Time is checked.
  2. If you wish to auto expand the default panel, please check the Auto Expand Default Panel when Ad is Loaded checkbox and then set the Default Panel Frequency to unlimited or the desired settings.
  3. Add the URL to the default click-through.
  4. Save the ad.
  5. Create a new placement for the ad.
  6. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  7. After you have saved your placement, you can generate preview tags for testing on your web site / test page.
Custom Script Notice: Since the Deluxe Expandable format is a HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically. For reference, the following custom script is being used: 

PL_DeluxeExpandable.js

Note: The above custom script may be served either securely or insecurely based on the option selected in the platform

Setting Deluxe Expandable in the Sizmek Advertising Suite 

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 > Asset Library , create a new Workspace by uploading the ZIP file.
  3. Under the Creative > Ads section, create a new ad by clicking New Ad > Blank Ad. 
  4. Enter the name of your ad and Set Ad Format to Deluxe Expandable.
  5. Under the Main Assets tab select the workspace from the workspace zip that was uploaded and the rest of form should be filled according to the ad data in manifest file(config.js) automatically.
  6. Under Advanced Panel Settings, please make sure Show Single Panel at a Time is checked.
  7. If you wish to auto expand the default panel, please check the Overwrite Creative Settings: Always auto-expand checkbox and then set Panel Frequency to unlimited or the desired settings.
  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 1x1.
  11. Generate the preview tags to test on your web site after you have saved your placement.
Note: In case of the platform does not read ad data from manifest file correctly, use the following settings for the panel settings.
  1. Under Panels tab, add the auto expand panel using following settings…
    • Panel Name: expandAuto
    • Creative Asset: Select panels/expandAuto/index.html from the drop down
    • X: 0
    • Y: 0
    • Width: 1
    • Height: 1
    • ...
      • Position Types: Banner Relative(px)
      • Expand on Mouse Over: unchecked
      • Delay Expansion: unchecked
      • Retraction: Never
      • Transparency: unchecked
  2. Under Panels tab, add the user expand panel using following settings.
    • Panel Name: expandUser
    • Creative Asset: Select panels/expandAuto/index.html from drop down
    • X: 0
    • Y: 0
    • Width: 1
    • Height: 1
    • ...
      • Position Types: Banner Relative(px)
      • Expand on Mouse Over: unchecked
      • Delay Expansion: unchecked
      • Retraction: Never
      • Transparency: unchecked
Custom Script Notice: Since the Deluxe Expandable format is a HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically. For reference, the following custom script is being used:

PL_DeluxeExpandable.js

Note: The above custom script may be served either securely or insecurely based on the option selected in the platform

Custom Variables

Custom variables mentioned below are strictly for Ad created from workspace and will not have any effect when Ad is created from Ad Builder.

Variable Name

(key)

 

Type

Description

Default Value

Accepted Values

Auto Reposition Interval

(mdAutoRepositionInterval)

 

Integer

Auto re position panel if needed on specified time interval.

0

>0 and <= 100

Easing Type

(mdEasingType)

String

Easing setting for panel expansion and collapse

ease-in-out

None

ease

linear

ease-in

ease-out

ease-in-out

 

Animation Duration

(mdAnimationDuration)

Float

Time it takes for panel to animate expansion or collapsing in seconds.

1

>0

Is Fullscreen?

(mdIsFullscreen)

Boolean

Used for backwards compatibility with the previous version of the workspaces.  If set to True, panel will expand to full screen. This variable is used exclusively with the full screen template.

No

 

Yes/ No

eyeDiv ZIndex

(mdEyeDivZIndex)

String

Set eyediv zIndex - z-Index of the panel on publishers page.

undefined

Supported CSS z-Index value

Auto Collapse Timer

(mdAutoCollapseTimer)

Float

Number of seconds it takes to collapse the auto expanded panel.

8

> 0

Auto Panel Name

(mdAutoPanelName)

String

Auto expand panel name

expandAuto

Panel name

User Panel Name

(mdUserPanelName)

String

User expand panel name

expandUser

Panel name

Auto Panel Type

(mdAutoPanelType)

String

Auto expand panel type

expand

pushdown
expand
fullscreen_pushdown
fullscreen_expand

User Panel Type

(mdUserPanelType)

String

User expand panel type

expand

pushdown
expand
fullscreen_pushdown
fullscreen_expand

Interactions Cancel Auto Collapse

(mdInteractionsCancelAutoCollapse)

Boolean

Cancels Auto on Interaction with auto expand panel

Yes

Yes/No

Lock Scrolling When Expanded

(mdLockScrollingWhenExpanded)

  Boolean

Decide if you need to allow page scrolling on panel expanded

Note: This is utilized only when mdAutoPanelType/mdUserPanelType sets to fullscreen_expand

 No  Yes/No

Enable SDK Default Close Button 

(mdEnableSDKDefaultCloseButton)

 Boolean Set Yes to use MRAID default close button rather than the customized one in template when ad served in MRAID (in App)  No  Yes/No

Panel Width Dependency 

(mdPanelWidthDependency)

 String 

Decide what panel width should based on.

fixed: based on the value of mdAutoPanelFixedSize/mdUserPanelFixedSize

adaptive: based on the value of mdAutoPanelBreakpoints/mdUserPanelBreakpoints

aspectRatio: based on mdPanelAspectRatio

matchBanner: based on banner width

browser: based on browser width

 matchBanner adaptive, aspectRatio, matchBanner, fixed, browser 

Panel Height Dependency

(mdPanelHeightDependency)

 String

Decide what panel height should based on.

fixed: based on the value of mdAutoPanelFixedSize/mdUserPanelFixedSize

adaptive: based on the value of mdAutoPanelBreakpoints/mdUserPanelBreakpoints

aspectRatio: based on mdPanelAspectRatio

matchBanner: based on banner height

browser: based on browser height

 adaptive  

Panel Aspect Ratio

(mdPanelAspectRatio)

 String Panel Aspect Ratio  4:3  String in [width ratio]:[height ratio] format 

Banner Size Inheritance 

(mdBannerSizeInheritance)

 String 

Decide what banner size should based on.

default: based on placement size

fixed: based on mdBannerFixedSize

adaptive: based on mdBannerAdaptiveBreakpoints

browserWidth: based on browser width for the banner width and mdBannerAdaptiveBreakpoints for the banner height

publisherContainerSize: based on publisher container size

 browserWidth default, fixed, browserWidth, publisherContainerSize 

Maximum Banner Width 

(mdMaxBannerWidth)

 Integer  Decide the maximum number of pixels of the banner width. Set to -1 for no maximum. -1  > 0 

Minimum Banner Width 

(mdMinBannerWidth)

 Integer Decide the minimum number of pixels of the banner width. Set to -1 for no minimum. -1  > 0

Maximum Banner Height 

(mdMaxBannerHeight)

 Integer Decide the maximum number of pixels of the banner height. Set to -1 for no maximum. -1 > 0

Banner Adaptive Breakpoints

(mdBannerAdaptiveBreakpoints)

 String

Set banner height based on banner width breakpoints when mdBannerSizeInheritance custom var is set to adaptive or browserWidth.

The value should be in the [width]:[height] format and use comma for multiple breakpoints.

For example: 300:50,500:90,749:120 means set banner height to 50px when banner width <= 500, set banner height to 90px when banner width <= 749, set banner height to 120px when banner width > 749

 300:50,500:90,749:120

String in [width]:[height] format. Use comma for multiple breakpoints.

Auto Panel Breakpoints

(mdAutoPanelBreakpoints)

 String 

Decide the auto panel height based on the panel width breakpoints when mdPanelWidthDependency/mdPanelHeightDependency custom var is set to adaptive.

The value should be in the [width]:[height] format and use comma for multiple breakpoints.

For example: 300:200,500:300,749:400 means set panel height to 200px when panel width <= 500, set panel height to 300px when banner width <= 749, set panel height to 400px when panel width > 749

 300:200,500:300,749:400

String in [width]:[height] format. Use comma for multiple breakpoints. 

User Panel Breakpoints

(mdUserPanelBreakpoints)

 String 

Decide the user panel height based on the panel width breakpoints when mdPanelWidthDependency/mdPanelHeightDependency sets to adaptive.

The value should be in the [width]:[height] format and use comma for multiple breakpoints.

For example: 300:300,500:400,749:500 means set panel height to 300px when panel width <= 500, set panel height to 400px when banner width <= 749, set panel height to 500px when panel width > 749

 300:300,500:400,749:500

String in [width]:[height] format. Use comma for multiple breakpoints. 

Banner Fixed Size

(mdBannerFixedSize)

 String Decide banner width and height when mdBannerSizeInheritance sets to fixed 320x50 String in [width]x[height] format 

Auto Panel Fixed Size

(mdAutoPanelFixedSize)

 String Decide auto panel width and height when mdPanelHeightDependency sets to fixed   320x415  String in [width]x[height] format

User Panel Fixed Size

(mdUserPanelFixedSize)

 String Decide user panel width and height when mdPanelHeightDependency sets to fixed  320x415  String in [width]x[height] format

Prog Enable

(mdProgEnable)

Boolean

Enable Programmatic

No

Yes/No

Prog Settings Folder Path

(mdProgSettingsFolderPath)

String

Path to Programmatic seetings file

//services.serving-sys.com/programmatic/DomainList/

Folder path

Backup Image Path

(mdBackupImgPath)

String

Relative path to the backup image, if a custom image is desired. This allows a fallback experience to display an image that is not a 1x1 even though the tag is a 1x1 tag. Template workspace includes a file that could be used here as an example, if this custom var were set to "images/970x250_Default.jpg"

undefined

Relative path to the backup image. eg. images/970x250_Default.jpg

Parent Levels to Resize

(mdParentLevelsToResize)

 Integer Only applied when serving default image. Affects the number of levels of parent elements to resize to the default image size. 0 > 0

Hide Banner When Expand

(mdHideBannerWhenExpand)

 Boolean Decide if banner should be hidden when panel expanded. No Yes/No

Fixed Position Panel Name

(mdFixedPositionPanelName)

 String Decide if the panel should be use fixed position (does not scroll away when page scrolls) when expanded. undefined Valid panel name

No Auto Expand In App

(mdNoAutoExpandInApp)

 Boolean Decide if panel should not auto expand when ad served in App. This will override the auto expand settings from ad platform.  The reason to not to do auto expand in App is because some Apps are not allow auto expansion. Yes Yes/No

Reported Custom Interactions

Currently, there are no custom interactions reported in the template, however, ad developers can always add their own custom interactions by using the following call.

EB.userActionCounter(); 

Change Log

January 9 2018 (v 1.0.0)

  • Initial release

Known Issues

  • The ad may not expand to full height on Single Expandable mode template if user keep expand and collapse the ad continuously.
  • Auto expand may not working in Ad Marvel and Millennial SDK in MRAID Test App as the App is blocking the auto expansion. We have added a custom variable call mdNoAutoExpandInApp to prevent the auto expansion, if your App support auto expansion and wish to do the auto expand, you will need to set the mdNoAutoExpandInApp to No.
  • There is no auto play video on Native Android browser and Samsung browser.
  • On iOS 10, user is unable to unmute the video if auto play the video.
  • For the Single Expandable Template only, if using fullscreen option and mdLockScrollingWhenExpanded sets to No, panel may moved out of viewport in landscape mode after rotate couple times in iPhone.
  • In iOS, the panel is able to scrolling on dragging the video area up or down even if panel is locked on scrolling.
  • In iOS, the ad may moving up gradually after few device rotations.
  • When ad served in safeframe, the ad cannot be responsive size, ad must be fixed size configuration.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments