Overview

The Video Expandable is the first HTML5 format in a series of custom formats that were designed and developed to be served across programmatic channels for both desktop and tablet environments. By controlling different customizable options, this format displays a video that works seamlessly across collapsed and the expanded states, while programmatic customizations take this format to another level. Programmatic formats automatically adapt to a publisher’s page so that a one tag solution can be served across different publisher networks and exhibit completely different behaviors.

When the ad is configured to behave differently based on the domain, certain variables will be overridden from the platform settings, and will be set specifically for that domain/path. This functionality can be enabled or disabled using custom variables. The values of these domain-specific variables are controllable through an administration tool. Access to this tool is restricted to internal Sizmek use. This allows for certified behavior to be used from domain to domain on the same tag by customizing these variables.

The following limitations exist when this ad serves in a tablet environment. These changes are due to hardware limitations of the devices:

• No auto-play or looping of video available. Video will always be click-to-play
• Ad will always behave as tap-to-expand regardless of expansion type setting (or programmatic settings for that domain). 
• When viewing the ad on an iPad (not an issue on Android), the audio button will not be present, and audio will only be able to be controlled by the hardware volume button on the side of the device

 

For more information on Programmatic formats in general, and how to preview the different certified settings, please see Programmatic Support for Custom Formats. Please note that as this format was the first format to have any programmatic support, some of the information in that documentation is superseded by information in this documentation (e.g., the name of the custom variable to enable or disable programmatic support for this format is NOT mdProgEnable, but rather is mdIsDomainConfigEnabled, and setting that var to TRUE will load the programmatic settings, whereas setting it to true will load the settings from the MDX platform; also, CSS and JS injections are limited to on ad load only).

[The below screenshots show the same ad, within two different pages, exhibiting different behavior, in this case by automatically changing the expanding direction accordingly with the in page banner’s position]

Usability and Ease of Creation are Key Concepts.

No programming skills are required to develop a new Video Expandable ad. Simply plug in different creative content (i.e. images, video) into the template ad, customize different behavioral variables on the platform and a single placement with a different look and feel can be up and running across different publisher pages wherever the format has been certified using the domain specific features with the Programmatic Settings Tool

With a unique ad and simply customizing the default setting variables/creative assets, it is possible to create different format sizes with different behaviors.

The Video Expandable allows the ad developer to easily update both video and image creatives within the banner. The following examples show how the format uses ad configuration variables to control the toolbar position, video position, and both the video controller and the progress bar color. The below screenshots take you through different possible layouts including Vertical, Billboard, Horizontal and Square formats.

 

Vertical Layout

Placing a video in a vertical layout always seems to be a challenge, but not with the Video Expandable.

In the first example, the configuration is set to TOP_BOTTOM_FULLVIDEO. The “_FULLVIDEO” portion places the video in the collapsed state as a full screen video, maintaining aspect ratio, making the height of the video the same as the height of the collapsed state, and overflowing (and clipping) the video to the left and right. The “TOP_BOTTOM” portion of the configuration means that the video will have either the social toolbar or the expand button above it with the other one below it. The position of the video in the collapsed state can be controlled with the group of variables within the ad Default Settings so that the video X and Y positions can be easily adjusted. Note, that only the X offset would work in this example, as adjusting the Y offset would make the _FULLVIDEO portion of the configuration not make sense.

In the second example, the configuration uses BOTTOM, and places the video in the center of the collapsed state. Both the video size and the video position are completely customized through the Ad Default Setting group of variables. A bottom configuration implies that both the social toolbar and the expand button will be below the video. Within the collapsed and unclipped/expanded states, a companion image works as a background of the creatives. The position of the video in the expanded state is controlled by the Ad Exp. Setting group of variables and these variables control both the video X and Y positions and sizes in this panel.

Billboards and Horizontal Layouts

The Video Expandable can be easily adapted to horizontal formats such as billboards or leaderboards. Both the full video configurations and the “Maintain Aspect Ratio” function allow the user to easily optimize the video position within the ad.

In the below screenshot, you can see how the Video Expandable can be customized to resemble a billboard format. This particular banner is set to 970x250 with the social toolbar and expansion button on the top (using TOP Configuration) with a strip of the video that extends to the full width of the banner. The expanding panel contains both the video and the “expand” companion. The video size has been calculated, in the unclipped area, with the mdExpVideoRatio variable activated, which allows the format to automatically maintain the video aspect ratio at the largest size possible without clipping/cropping any portion of the video.

The next set up has a TOP_BOTTOM configuration, with a “default” companion and the video on the right side of the panel in the collapsed state. In the expanding state, using the mdExpVideoRatio functionality, which can be activated with a custom variable, the video size has the same dimension of the unclipped area.

With a few easy steps, the ad developer can use the Video Expandable to create leaderboards with expandable video.

Through the Ad Configuration variables and with the capability to automatically calculate the position and size of the video, the user can easily adapt their creatives to fit a traditional 728x90 leaderboard that is generally served at the top of the page. This is one of the more engaging and popular formats served within Programmatic Channels.

Square Layouts

All of these customizable features mentioned above will make you love applying an Video Expandable during the production workflow of square formats.

The following screenshots will show you how to take advantage of the Video Expandable in serving the most video engaging creatives within the square formats.

In the second example the Video Expandable is running always with a full video configuration, but in the expanded state it is using an “expand” companion as background of the video. Both the position and the size of the video in the expanding panel are automatically calculated within the ad.

The third example shows how it is easy to work with complete creativity within the Video Expandable.
For any non-full-video configuration, the ad developer can have multiple ways to place the video and the companion images.

In summary, the Video Expandable auto-plays video within a banner, but may expand in size via rollover, click, or tap to show the video in an expanded state. The banner and expanded state may also include a companion image so that additional advertising may run alongside the video. A social toolbar with hooks into social media such as Facebook, Twitter, YouTube, etc. is easy to set up and customize.

Overview Summary

The goals of the Video Expandable, as with any other programmatic custom format, include:

• Making the format absolutely scalable across different publisher sites
• Allowing both full and self-service clients to easily customize and set up their ads
• Supporting rich impressions not only on computer display ads, but also tablets
• Simplifying the certification process
• Tracking and grouping these ads as formats within our ad platform
• Creating a more robust ad preview solution

Demos/Downloads

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

Template	VideoExpandable_2.1.0.zip
Demo	Preview demo

Supported Platforms

Platform	Supported Version
Windows	Internet Explorer 10+, Microsoft Edge, Firefox, Chrome
Mac	Safari, Firefox, Chrome
iPhone	iOS 9.0 and later
iPad	iOS 9.0 and later
Android Phone	Android 6.0 and later
Android Tablet	Android 6.0 and later

Note: Supported in Mobile browsers only and not in Apps.

 

Features

These are the key features of the Video Expandable format by each template.

Mobile Experience (FullViewport)	yes
Scroll Detection	yes
Domain Configuration via Domain Config Tool (f/k/a Programmatic)	yes
Ad Builder Templates Available	no
Local Preview	yes
Uses AdKit (able to include DCO and Additional Assets)	yes
Polite Loading	yes
Safeframe Support	yes
MRAID (in-app Support)	no
Secure Serving	yes
Sizmek Advertising Suite Support	yes

Implementing a Video Expandable Format

Workspaces

Workspace	Default Images Dimensions
VideoExpandable_2.1.0	300x250 (by default), 160x600,300x600,728x90,970x66

 

Custom Variables: Customizing the Format

The entire customization of the Video Expandable can be adjusted with one of five groupings of custom variables. These groups include:

• Configuration Settings
  Settings for video positioning/size, social toolbar and expansion button as well as color attributes
• Collapsed Settings
  Collapsed state settings for the banner
• Expanded Settings
  Expanded state settings (e.g. expansion size, expanded video size)
• Programmatic Override Settings
  Customizations to override preset (programmatic) domain values
• Domain Path Settings
  path to setting files used [not to be edited]

The screenshot below is the customization of the ad with the example values in the column “Example Values to build a 300x250 expandable AD”.

Configuration Settings

The first group of custom variables that should be set up and they are related to the configuration of both the default and the expanding state of the AD.
The rows with the same color contain variables which are related to each other.
In order to know how each configuration places the elements, please look at “Configuration Setting Type Values”.

Custom Variable Name	Var Format	Values	Variable Description	Default Values (to build a 300x250 expandable ad)
mdConfiguration	String	BOTTOM, BOTTOM_FULLVIDEO, TOP, TOP_FULLVIDEO, TOP_BOTTOM, TOP_BOTTOM_FULLVIDEO	The social toolbar position, the video position (and size), and the expand button position, in both the expanding and the default positions.	TOP_BOTTOM
mdConfigurationBgColor	String	(Orange, Blue, Yellow, Green, Red, Violet, White, Black), (#99cc00) Any valid CSS color code. Or you can use "image" if you want to show the image of the expanded state	The color of the background.	image
mdConfigurationControllerColor	String	(Orange, Blue, Yellow, Green, Red, Violet, White, Black), (99cc00) Any valid CSS color code	The color of the video controllers.	#FFFFFF
mdConfigurationProgressbarColor	String	(Orange, Blue, Yellow, Green, Red, Violet, White, Black), (99cc00) Any valid CSS color code	The color of the progress bar.	#FFFFFF
mdConfigurationToolbarColorSet	String	(positive), (negative)	Which assets to use for the social toolbar elements, the positive ones, which are generally the _ON version of the buttons, or the negative ones, which are generally the _OFF version of the buttons.	positive
mdConfigurationEnableLogo	Boolean	(true), (false)	If true, the logo of the branded version of the format is added as the first element of the social toolbar. If false, logo is not included.	true
mdSpeedExpandAnimation	String	options: fast, slow, default	the speed of the animation when the panel is expanding or collapsing	default
mdAutoRepositionInterval	Integer	0 or any positive number	If >0, will fire a resize event to the ad every n milliseconds, effectively forcing the ad to reposition itself. Useful when other elements on the page (pushdowns, etc) move our banner and our panel is no longer aligned properly.	0
mdAutoCollapseTimer	Integer	0 or any positive number	If greater than 0, auto expanded panel will auto-collapse after this number of seconds	0

Configuration Setting Type Values

For all configurations, the below is true:

if mdCollapseToolbarFullWidth = true
the social toolbar has the same width of the collapsed state width and it is not placed as an overlay on the video, unless the video is explicitly positioned beneath the toolbar

 

if mdCollapseToolbarFullWidth = false
the social toolbar is always placed as an overlay on the video and the toolbar is only as wide as the video

Wherever the Social Toolbar is located in the collapsed state, it will also be located in the expanded state (TOP or BOTTOM)

 

Adding the “_FULLVIDEO” option will only affect the size/position of the video. The social toolbar and expand button will be located the same as if the FULLVIDEO option were not turned on. FULLVIDEO option fills the collapsed state with the video element, overflowing in one direction and fully-expanding in the other direction. This is dynamically calculated depending on the aspect ratio of your collapsed state. When FULLVIDEO is being used, video size variables for the collapsed state are ignored. Video position will also only work in the direction in which the video is overflowing.

 

The expand button is always centered in the collapsed state

Configuration Value	Configuration Description
TOP / TOP_FULLVIDEO	SOCIAL TOOLBAR AND EXPAND BUTTON ALWAYS AT THE TOP OF THE VIDEO if the mdCollapseSwitchElements var is false social toolbar + expand button + video if the mdCollapseSwitchElements var is true expand button + social toolbar + video
BOTTOM / BOTTOM_FULLVIDEO	SOCIAL TOOLBAR AND EXPAND BUTTON ALWAYS AT THE BOTTOM OF THE VIDEO if the mdCollapseSwitchElements var is false video + social toolbar + expand button if the mdCollapseSwitchElements var is true video + expand button + social toolbar
TOP_BOTTOM / TOP_BOTTOM_FULLVIDEO	ONE ELEMENT ABOVE VIDEO, ONE ELEMENT BELOW VIDEO   if the mdCollapseSwitchElements var is false social toolbar + video + expand button if the mdCollapseSwitchElements var is true expand button + video + social toolbar

 

Collapsed Settings

The next group of custom variables that should be set up and they are related to the collapsed or the default state of the ad.
The rows in the table below with the same color contain variables which are related to each other.

Custom Variable Name	Var Format	Values	Variable Description	Default Values (to build a 300x250 expandablead)
mdDefaultBannerX	Integer	Positive numbers	The x-offset position of the default banner/collapsed state relative to the panel. It needs to be a number with positive value. This is based on an expansion to the right. Any number greater than 0 and the ad will expand to the left as well (and vice versa when expanding the other way).	0
mdDefaultBannerY	Integer	Positive numbers	The y-offset position of the default banner/collapsed state relative to the panel. It needs to be a number with positive value. Any number greater than 0 and the ad will expand up as well as down.	0
mdCollapseShowShadow	Boolean	(true),(false)	If true, the collapsed state decreases in height by 7 pixels, and displays a 7-pixel-tall CSS drop shadow beneath that state.	true
mdCollapseVideoDimHeight	Integer	numbers	The height of the video when ad is in the collapsed state. This value is ignored if you are either using a FULLVIDEO configuration, or if you have the mdCollapseVideoRatio option turned on. The ratio of this to the width should match the ratio of the source video.	0
mdCollapseVideoDimWidth	Integer	numbers	The width of the video when ad is in the collapsed state. This value is ignored if you are either using a FULLVIDEO configuration, or if you have the mdCollapseVideoRatio option turned on. The ratio of this to the height should match the ratio of the source video.	0

 

 

Custom Variable Name	Var Format	Values	Variable Description	Default Values (to build a 300x250 expandable ad)
mdCollapseVideoPositionX	String	(left), (right), (center), (number)	The horizontal position of the video when the format is in the collapsed state. When using FULLVIDEO or mdCollapseVideoRatio configurations, the numbers will represent offsets from a horizontally centered video. All other times, the number represents an offset from the 0 X position of the collapsed state. When using FULLVIDEO, this variable will be ignored if the video is stretched full width and overflowing on height.	0
mdCollapseVideoPositionY	String	(top), (bottom), (center), (number)	The vertical position of the video when the format is in the collapsed state. When using FULLVIDEO or mdCollapseVideoRatio configurations, the numbers will represent offsets from a vertically centered video. All other times, the number represents an offset from the 0 Y position of the collapsed state. When using FULLVIDEO, this variable will be ignored if the video is stretched full height and overflowing on width..	0
mdCollapseVideoRatio	Boolean	(true), (false)	If true, forces the video to be as large as it can be, maintaining aspect ratio, without cropping any portion of the video. If using a FULLVIDEO configuration, this variable is ignored. When this variable is set to true, mdCollapseVideoDimHeight and mdCollapseVideoDimWidth are ignored.	true
mdCollapseToolbarFullWidth	Boolean	(true), (false)	If true, toolbar will be full width of collapsed ad state. If false, toolbar will be width of video in collapsed state.	true
mdCollapseSwitchElements	Boolean	(true), (false)	If false, order is Social Toolbar on top, Expand Button on bottom. If true, order is Expand Button on top, Social Toolbar on bottom.	false

 

Expanded Settings

It is the third group of custom variables that should be set up and they are related to the unclipped or expanded state of the AD.
The rows with the same color contain variables which are related to each other and the values in the 5^th column are example values to build a 300x250 Video Expandable with companion images.

Custom Variable Name	Var Format	Values	Variable Description	Default Values (to build a 300x250 expandable ad)
mdExpDimHeight	Integer	Positive numbers	Height, in pixels, of the unclipped/expanded state	500
mdExpDimWidth	Integer	Positive numbers	Width, in pixels, of the unclipped/expanded state	728
mdExpVideoDimHeight	Integer	numbers	Height, in pixels, of the video when the panel is in thenclipped/expanded state This value is ignored if you have the mdExpVideoRatio option turned on. The ratio of this to the width should match the ratio of the source video.	281
mdExpVideoDimWidth	Integer	numbers	Width, in pixels, of the video when the panel is in the unclipped/expanded state This value is ignored if you have the mdExpVideoRatio option turned on. The ratio of this to the height should match the ratio of the source video.	500
mdExpVideoPositionX	String	(left), (right), (center), (numbers)	The horizontal position of the video when the format is expanded. When using mdExpVideoRatio, the numbers will represent offsets from a horizontally centered video. All other times, the number represents an offset from the 0 X position of the collapsed state.	center
mdExpVideoPositionY	String	(top), (bottom), (center), (numbers)	The vertical position of the video when the format is expanded. When using mdExpVideoRatio, the numbers will represent offsets from a vertically centered video. All other times, the number represents an offset from the 0 Y position of the collapsed state.	center
mdExpVideoRatio	Boolean	(true), (false)	If true, forces the video to be as large as it can be, maintaining aspect ratio, without cropping any portion of the video. When this variable is set to true, mdExpVideoDimHeight and mdExpVideoDimWidth are ignored.	false
mdExpToolbarFullWidth	Boolean	(true), (false)	If true, toolbar will be full width of expanded state. If false, toolbar will be width of video in expanded state.	true

 

Programmatic Override Settings

This fourth group of custom variables should be set up if the ad developer needs to override a publisher’s certified behavior. All custom variables in this section will be set dynamically from the Programmatic Settings Tool on ad-load based on the domain/page on which the ad is loaded, unless mdIsDomainConfigEnabled is set to true, in which case the values set on the platform will be used.
This group of custom variables is useful to create a custom ad that should have also the same behavior for every website in the campaign, despite (and overriding) the domain detection feature.
In addition, it can be very useful if some placement in the campaign is served to a very large network or DSP, for which a unique behavior for all websites is requested.

Custom Variable Name	Var Format	Values	Variable Description	Default Values (to build a 300x250 expandable ad)
mdIsDomainConfigEnabled	Boolean	(true), (false)	Turns on / off the custom behavior. Custom behavior is used to override the settings that are loaded from the JSON files exported from the Settings Tool (certified publisher settings). This, in effect, overrides the domain-specific settings and uses custom vars to control all behavior.	false
mdcbAudioBehavior	Integer	1 - click to enable audio 2 - audio enabled when moused-over and panel expanded only 3 - mouse over to enable audio	Controls the audio muting/unmuting behavior.	1
mdcbAutoExp	Integer	1 - 1 time per user per day 2 - Always 3 - Never	Controls the frequency cap for the auto expansion. Uses HTML Local Storage.	1

 

 

Custom Variable Name	Var Format	Values	Variable Description	Default Values (to build a 300x250 expandable ad)
mdcbCloseBtnPos	Integer	1 - Normal (if left-expanding, put close on left; if right-expanding, put close on right) 2 - Reverse (if left-expanding, put close on right; if right-expanding, put close on left)	Controls the position of the close button within the social toolbar.	1
mdcbCustomCode	String	Valid JS code; e.g., alert('hello')	Executes this code on the publisher’s page when the ad loads	undefined
mdcbCustomStyle	String	CSS rules; e.g., #body{background-color: #ffffff !important}	Adds custom CSS rules in page when ad loads	undefined
mdcbExpDir	Integer	1 - left to right expansion 2 - right to left expansion 3 - automatic detection of the expanding direction	Controls the expanding direction	3
mdcbExpType	Integer	1 - Expand on click 2 - Expand on mouse over	Controls the type of expansion, click/tap or mouse over.	1
mdcbVideoLoop	Integer	(Forever = -1), (Video plays only after click = 0), (numbers: 1, 2, 3)	Controls the number of times the video plays in the ad	0
mdcbZIndex	String	numbers	Overrides the z-index of the panel. Sets eyediv z-index to auto and sets panel div z-index to this value.	undefined

 

Domain Path Settings

This variable should neither be deleted nor overwritten. It contains the path to the domain settings, which are absolutely necessary to run the ad in the programmatic environment.

Custom Variable Name	Var Format	Values	Variable Description	Default Values (to build a 300x250 expandable ad)
mdProgSettingsFolderPath	String	String	Path to the folder of the programmatic settings files, not including protocol	//services.serving-sys.com/programmatic/DomainList/

Custom Variable Values for Templates

The below table shows what variables should be changed from their default values for the different-sized templates. Obviously you can modify any custom variables to suit your needs, but these will give you good-looking starting points for each template. 300x250 column lists the default value, which is the correct value for a 300x250 ad.

Custom Variable Name	300x250 (default)	300x600
mdCollapseVideoDimHeight	0	460
mdCollapseVideoDimWidth	0	818
mdCollapseVideoPositionX	0	center
mdCollapseVideoPositionY	0	top
mdCollapseVideoRatio	true	false
mdConfigurationEnableLogo	true	false
mdExpDimHeight	500	600
mdExpDimWidth	728	871
mdExpToolbarFullWidth	true	false
mdExpVideoDimHeight	281	460
mdExpVideoDimWidth	500	818
mdExpVideoPositionY	center	top
mdExpVideoRatio	false	false

Here are more examples with suggested custom variable values in different ad sizes.

Custom Variable Name	160x600	728x90	970x66
mdCollapseVideoDimHeight	460	315	371
mdCollapseVideoDimWidth	818	560	660
mdCollapseVideoPositionX	center	left	left
mdCollapseVideoPositionY	top	top	top
mdCollapseVideoRatio	false	false	false
mdConfigurationEnableLogo	false	true	true
mdExpDimHeight	600	510	250
mdExpDimWidth	871	728	970
mdExpToolbarFullWidth	false	false	false
mdExpVideoDimHeight	460	0	0
mdExpVideoDimWidth	818	0	0
mdExpVideoPositionY	Top	top	Top
mdExpVideoRatio	false	true	true

 

Provided Workspace Templates

There are 2 provided workspace templates. Though you can customize this format to have the collapsed and expanded states be whatever size you want, there are 2 different samples provided to get you started. Using these templates, along with the above table of custom variable changes required, you can achieve different sizes and experiences.

300x250

300x600

 

Additional Creative Assets

The creative customization of the Video Expandable requires the ad developer to produce only the default image and the additional assets, without asking the ad developer to have any programming skills.

• Backup Image or Default Image
  jpg, png, gif, or svg file;
  file size: any size needed;
  max weight: up to 99 kb.
  The dimensions of this file are the dimensions of the collapsed state of the ad.
• Video File – additional asset ID 1
  file format: MP4;
  recommended file bitrate: 800 / 1000 kbps;
  file size: any size needed;
  max weight: as specified in the media plan.
• Video Poster Image – additional asset ID 2
  jpg, png, gif, or svg file;
  file size: any size needed;
  max weight: up to 150 kb.
• Default Companion – additional asset ID 3
  jpg, png, gif, or svg file;
  file size: any size needed;
  max weight: up to 150 kb.
• Expand Companion– additional asset ID 4
  jpg, png, gif, or svg file;
  file size: any size needed;
  max weight: up to 150 kb.
• Loading Image– additional asset ID 5
  jpg, png, gif, or svg file;
  file size: any size needed;
  max weight: up to 99 kb.
• Logo Positive Image – additional asset ID 6
  jpg, png, gif, or svg file;
  file size: any size needed;
  35 pixels tall;
  max weight: up to 99 kb.
• Logo Negative Image – additional asset ID 7
  jpg, png, gif, or svg file;
  file size: any size needed;
  35 pixels tall;
  max weight: up to 99 kb.
• Landscape Image for Mobile devices - additional asset ID 8
  jpg, png, gif, or svg file;
  file size recommended: 960x640;
  max weight: up to 150 kb.
• Portrait Image for Mobile devices - additional asset ID 9
  jpg, png, gif, or svg file;
  file size recommended: 640x960;
  max weight: up to 150 kb.

 

Social toolbar setting

The Video Expandable allows the ad developer to easily manage social features through the social toolbar setting.
It can be handled in the Smart Versioning Item List, adding only the URL value for landing or sharing functionality.

Name	Description	Value
GLOBAL_facebook_LANDING_url	Landing URL for Facebook landing icon	URL for link or none to not include the icon
GLOBAL_twitter_SHARE_url	Sharing URL for Twitter share icon	URL for link or none to not include the icon
GLOBAL_twitter_LANDING_url	Landing URL for Twitter landing icon	URL for link or none to not include the icon
GLOBAL_youtube_LANDING_url	Landing URL for YouTube landing icon	URL for link or none to not include the icon
GLOBAL_pinterest_SHARE_url	Sharing URL for Pinterest share icon	URL for link or none to not include the icon
GLOBAL_pinterest_LANDING_url	Landing URL for Pinterest landing icon	URL for link or none to not include the icon
GLOBAL_linkedin_SHARE_url	Sharing URL for Linkedin share icon	URL for link or none to not include the icon
GLOBAL_linkedin_LANDING_url	Landing URL for LinkedIn landing icon	URL for link or none to not include the icon
GLOBAL_instagram_LANDING_url	Landing URL for Instagram landing icon	URL for link or none to not include the icon
GLOBAL_email_SHARE_url	Sharing URL for Email share icon	URL for link or none to not include the icon

  

Clickthrough URLs setting

The Video Expandable allows the ad developer or the media agency to easily handle the external links setting, also managing multiple landing page URLs, through the custom interactions.

Name	Description	Value
pua_companion_default	It fires the landing page url after the click on the default companion creatives.	Landing url – important: the “Close ad part” functionality needs to be disabled.
pua_companion_expand	It fires the landing page url after the click on the expand companion creatives.	Landing url – important: the “Close ad part” functionality needs to be disabled.
pua_video	It fires the landing page url after the click on the video area.	Landing url – important: the “Close ad part” functionality needs to be disabled.

 

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.

 

Testing in Local Preview

You can test the Ad preview in your Local machine and it´s not necessary to upload the Ad to the Platform. If You edit the file "script/localPreview.js" You will see all the custom variables that the Video Expandable has, you have all the information for each element in the "customJSVars" section, you can modify the values and see the new behavior of the format.

If you want to see the SmartVersioning elements (the social networks buttons) in the same file you will find in the section "svKVPairs" all the SV elements, instead of "none" you only need to add some URL.

The default size for the banner in this format is 300x250 but you can change it for your local testing. Go to "panels\expand\scripts\script.js" and when you edit the file you will find all the elements you can modify:

• collapsedWidth: the width of the banner (default: 300)
• collapsedHeight: the height of the banner (default: 250)

The variables below are another elements (images, video, etc) that you can modify for local preview, all of these files should be in the "AdditionalAssets" folder:

• video_mp4_localPath: the name of your video element (default: video.mp4)
• video_poster_localPath: the name of your poster element (default: sizmek_poster.png)
• imageName_default_localPath: the default image (default: companion_300x250_default.jpg)
• imageName_expand_localPath: the image when the panel is expanded (default: companion_300x250_expand.jpg)
• imageName_loading_localPath: the image when the panel is loading (default: companion_300x250_loading.jpg)
• imageName_logo_positive: the logo for positive option (default: logo_positive.svg)
• imageName_logo_negative: the logo for negative option (default: logo_negative.svg)
• imageName_mobile_landscape_localPath: the image for Landscape mode (default: mobile_landscape_960x640.jpg)
• imageName_mobile_portrait_localPath: the image for Portrait mode (default: mobile_portrait_640x960.jpg)

 

 

 

Setting up Video Expandable in the Sizmek Platform

Before you begin, please make sure that you have the workspace available:

1. Download the template and unzip it for editing. The template files include Sizmek-branded assets. Make sure your default image and your additional assets are replaced so your ad is branded properly.
2. Archive the workspace into a new ZIP file when you done with your editing, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program. Store workspace zip at where you can access later on when create your ad.

Sizmek MDX2.0 Setup

1. Log into Sizmek MDX 2.0 Platform
2. Select Manage -> Ads
3. Select New -> Create New Ad
4. Enter a name for your format, and select Video Expandable as the Ad Format (listed under the sub-section Custom Ad Formats)
5. Once the New Ad screen appears, select your Workspace. If you have not yet uploaded your workspace, you can do so from the “Select Workspace Folder” popup.
6. After selecting your workspace, you must select a default image. The dimension of the default image is what defines the size of your banner/collapsed state of the ad. The Default Image can be found in the /images folder of the workspace.
7. Select “Add Panel” and select the expand.html file located in the /panels/expand folder of the workspace.
8. Name the panel “expand” (if you change this name, the ad will not expand properly unless you also change the code in the ad where the expansion takes place). You may leave the dimensions set to 0x0, and you can also ignore the settings for Auto Retract When, Position Type, and X and Y offsets. All of these settings are completely ignored by the ad, and instead the proper values are calculated by the ad itself.
9. You can leave “Show Single Panel At A Time” checked, since this format only has a single panel it will not really matter
10. Do NOT check “Auto Expand Default Panel when Ad is Loaded.” Auto expansion behavior from the platform is completely ignored. Instead, auto expansion is handled by the custom variables.
11. Give your ad a default clickthrough (and make sure to UNCHECK the “Close Ad Parts When Clicked” in the “Clickthrough URL Settings” area
12. Save Ad (Ad need to be saved at this point in order to proceed to the next step).
13. Select Advanced Features and UNCHECK the “Enable Dynamic Expansion Direction – Ad Level” (the ad handles this itself using custom variables).
14. Select Smart Versioning and start setting social toolbar icons (See Social Toolbar Setting setup above). Two social icons will be pre-set using Sizmek URLs. You must remove these and set up the toolbar as you desire. Keep in mind that you can only include as many icons as you have physical space for in your collapsed and expanded states. If you include too many social icons, the display of the ad will not be correct as the toolbar will attempt to wrap the icons to display them all, leading to a poor experience. The same is true for showing/hiding the advertiser logo. Only display the logo if you have enough horizontal space in your ad.
15. Select Interactions & Ad URLs -> Custom Interactions and set your additional clickthroughs to your desired landing pages. Be sure to REMOVE the “Close Ad Parts” checkbox from each clickthrough.
16. Assuming you are creating a 300x250, your ad should now be working correctly and you can preview your ad. If you are creating a different sized banner, or you want to adjust / customize your ad further, Select Advanced Features > variables and start setting your configuration up (See Custom Variables section above for details). Commonly set variables for the different template sizes can be found in the custom variable table above.
17. Save Ad again, now you can preview the ad from Platform preview.

Sizmek SAS Setup

1. Log into Sizmek SAS Platform
2. Select CREATIVE-> ADS
3. Select New Ad -> Blank Ad
4. Enter a name for your format, and select Video Expandable as the Ad Format
5. Once the New Ad screen appears, assign your Default Image and Workspace Folder by click on Assign Asset button from "MAIN ASSETS" tab under "CREATIVE ASSETS" area. The Default Image can be found in the /images folder of the workspace.
6. If you have not yet uploaded your workspace, you can do so from the “Upload” tab on popup.
7. Switch to "PANELS" tab and click on Add Panel to add panel.

8. Enter "expand" in PANEL NAME (if you decide to use different panel name, please remember to change the code in ad where the expansion takes place) and then click on the empty cell next to the panel name you have entered (underneath ASSET), you will see "Please Select" dropdown appeared, click "Please Select" dropdown to bring the list of available asset and then select "panels/expand/expand.html". You can ignore SIZE, X, Y, WIDTH and HEIGHT as they will be ignored by format.

9. Switch to "ADDITIONAL ASSETS" tab and add additional assets by click "Add Asset" button. It is very important that you have asset and asset id exactly matched as we described in Additional Creative Assets section above because we display different asset based on its asset id.You can find all the additional assets in AdditionalAssets folder from the root of workspace.
10. For the ADVANCED PANEL SETTINGS, please leave as it is or as the image show below. Do NOT use auto expand setting here as auto expansion is handled by the custom variables.
11. Enter Click-through URL under the "CLICK-THROUGH & EVENTS” area, adjust Target Window, Show Address Bar, and Show Menu Bar as your desire.
12. Under "CUSTOM INTERACTIONS" area, click "ALL" tab and set your additional clickthroughs to your desired landing pages in REDIRECT URL fields. Be sure to UNCHECK the "CLOSE AD PARTS" checkbox from each clickthrough.
13. Assuming you are creating a 300x250, your ad should now be working correctly and you can preview your ad. If you are creating a different sized banner, or you want to adjust / customize your ad further, Go to "ADVANCED FEATURES" in "GENERAL" tab under "SETTINGS" area and start setting your configuration up (See Custom Variables section above for details). Commonly set variables for the different template sizes can be found in the custom variable table above.
14. Switch to "AD DELIVERY" tab and make sure "Enable the Dynamic Expansion Direction" is unchecked.
15. Save Ad (Ad need to be saved at this point in order to proceed to the next step).
16. After page refreshed from saved ad, click on "VERSIONS" and you will see a default version that come with the template. Click on the default version to edit or New Version button to create more versions.

    

17. Under DYNAMIC ELEMENTS, you will find social toolbar icons settings (See Social Toolbar Setting setup above). Two social icons will be pre-set using Sizmek URLs. You must remove these and set up the toolbar as you desire. Keep in mind that you can only include as many icons as you have physical space for in your collapsed and expanded states. If you include too many social icons, the display of the ad will not be correct as the toolbar will attempt to wrap the icons to display them all, leading to a poor experience. The same is true for showing/hiding the advertiser logo. Only display the logo if you have enough horizontal space in your ad.

    

18. Save the Ad again, now you can preview the ad from Platform preview.

 

 

Technical information

Ad Interaction Tracking

Video Expandable provides the following custom interaction tracking by default.

• CLICK_TO_EXPAND
• MOUSE_OVER_TO_EXPAND
• TAP_TO_EXPAND
• CLICK_TO_CLOSE
• MOUSE_OUT_TO_CLOSE
• pua_Facebook_LANDING
• pua_Twitter_LANDING
• pua_Twitter_SHARE
• pua_Youtube_LANDING
• pua_Linkedin_LANDING
• pua_Linkedin_SHARE
• pua_Pinterest_LANDING
• pua_Pinterest_SHARE
• pua_Instagram_LANDING
• pua_Email_SHARE

 

Ad Video Metrics

Video Expandable provides the following metrics for the video.

• start video
• video played 25%
• video played 50%
• video played 75%
• video fully played
• mute video
• un-mute video

 

All Custom Variables

Custom Variable Name	Type	Description	Default Value
mdCollapseShowShadow	Boolean	If true, the collapsed state decreases in height by 7 pixels, and displays a 7-pixel-tall CSS drop shadow beneath that state.	True
mdCollapseSwitchElements	Boolean	If false, order is Social Toolbar on top, Expand Button on bottom. If true, order is Expand Button on top, Social Toolbar on bottom.	False
mdCollapseToolbarFullWidth	Boolean	If true, toolbar will be full width of collapsed ad state. If false, toolbar will be width of video in collapsed state.	True
mdCollapseVideoDimHeight	Integer	The height of the video when ad is in the collapsed state. This value is ignored if you are either using a FULLVIDEO configuration, or if you have the mdCollapseVideoRatio option turned on. The ratio of this to the width should match the ratio of the source video.	0
mdCollapseVideoDimWidth	Integer	The width of the video when ad is in the collapsed state. This value is ignored if you are either using a FULLVIDEO configuration, or if you have the mdCollapseVideoRatio option turned on. The ratio of this to the height should match the ratio of the source video.	0
mdCollapseVideoPositionX	String	The horizontal position of the video when the format is in the collapsed state. When using FULLVIDEO or mdCollapseVideoRatio configurations, the numbers will represent offsets from a horizontally centered video. All other times, the number represents an offset from the 0 X position of the collapsed state. When using FULLVIDEO, this variable will be ignored if the video is stretched full width and overflowing on height.	0
mdCollapseVideoPositionY	String	The vertical position of the video when the format is in the collapsed state. When using FULLVIDEO or mdCollapseVideoRatio configurations, the numbers will represent offsets from a vertically centered video. All other times, the number represents an offset from the 0 Y position of the collapsed state. When using FULLVIDEO, this variable will be ignored if the video is stretched full height and overflowing on width..	0
mdCollapseVideoRatio	Boolean	If true, forces the video to be as large as it can be, maintaining aspect ratio, without cropping any portion of the video. If using a FULLVIDEO configuration, this variable is ignored. When this variable is set to true, mdCollapseVideoDimHeight and mdCollapseVideoDimWidth are ignored.	True
mdConfiguration	String	The social toolbar position, the video position (and size), and the expand button position, in both the expanding and the default positions.	TOP_BOTTOM
mdConfigurationBgColor	String	The color of the background or if you will use the image of the panel expanded "image"	image
mdConfigurationControllerColor	String	The color of the video controllers.	#FFFFFF
mdConfigurationEnableLogo	Boolean	If true, the logo of the branded version of the format is added as the first element of the social toolbar. If false, logo is not included.	True
mdConfigurationProgressbarColor	String	The color of the progress bar.	#FFFFFF
mdConfigurationToolbarColorSet	String	Which assets to use for the social toolbar elements, the positive ones, which are generally the _ON version of the buttons, or the negative ones, which are generally the _OFF version of the buttons.	positive
mdDefaultBannerX	Integer	The x-offset position of the default banner/collapsed state relative to the panel. It needs to be a number with positive value. This is based on an expansion to the right. Any number greater than 0 and the ad will expand to the left as well (and vice versa when expanding the other way)	0
mdDefaultBannerY	Integer	The y-offset position of the default banner/collapsed state relative to the panel. It needs to be a number with positive value. Any number greater than 0 and the ad will expand up as well as down.	0
mdExpDimHeight	Integer	Height, in pixels, of the unclipped/expanded state	500
mdExpDimWidth	Integer	Width, in pixels, of the unclipped/expanded state	728
mdExpToolbarFullWidth	Boolean	If true, toolbar will be full width of expanded state. If false, toolbar will be width of video in expanded state.	true
mdExpVideoDimHeight	Integer	Height, in pixels, of the video when the panel is in thenclipped/expanded state This value is ignored if you have the mdExpVideoRatio option turned on. The ratio of this to the width should match the ratio of the source video.	281
mdExpVideoDimWidth	Integer	Width, in pixels, of the video when the panel is in the unclipped/expanded state This value is ignored if you have the mdExpVideoRatio option turned on. The ratio of this to the height should match the ratio of the source video.	500
mdExpVideoPositionX	String	The horizontal position of the video when the format is expanded.  When using mdExpVideoRatio, the numbers will represent offsets from a horizontally centered video. All other times, the number represents an offset from the 0 X position of the collapsed state.	center
mdExpVideoPositionY	String	The vertical position of the video when the format is expanded. When using mdExpVideoRatio, the numbers will represent offsets from a vertically centered video. All other times, the number represents an offset from the 0 Y position of the collapsed state.	center
mdExpVideoRatio	Boolean	If true, forces the video to be as large as it can be, maintaining aspect ratio, without cropping any portion of the video.  When this variable is set to true, mdExpVideoDimHeight and mdExpVideoDimWidth are ignored.	False
mdSpeedExpandAnimation	String	the panel will be expanded and contracted with a specific speed	default
mdcbAudioBehavior	Integer	Controls the audio muting/unmuting behavior. 1 - click to enable audio 2 - audio enabled when moused-over and panel expanded only 3 - mouse over to enable audio	1
mdcbAutoExp	Integer	Controls the frequency cap for the auto expansion.  Uses HTML Local Storage. 1 - 1 time per user per day 2 - Always 3 - Never	1
mdcbCloseBtnPos	Integer	Controls the position of the close button within the social toolbar. 1 - Normal (if left-expanding, put close on left; if right-expanding, put close on right) 2 - Reverse (if left-expanding, put close on right; if right-expanding, put close on left)	1
mdcbCustomCode	String	Executes this code on the publisher’s page when the ad loads	undefined
mdcbCustomStyle	String	Adds custom CSS rules in page when ad loads	undefined
mdcbExpDir	Integer	Controls the expanding direction 1 - left to right expansion 2 - right to left expansion 3 - automatic detection of the expanding direction	3
mdcbExpType	Integer	Controls the type of expansion, click/tap or mouse over. 1 - Expand on click 2 - Expand on mouse over	1
mdcbVideoLoop	Integer	Controls the number of times the video plays in the ad (Forever = -1), (Video plays only after click = 0), (numbers: 1, 2, 3)	0
mdcbZIndex	String	Overrides the z-index of the panel.  Sets eyediv z-index to auto and sets panel div z-index to this value.	undefined
mdEyeDivZIndex	String	The default z-index of the eye div.	undefined
mdInteractionsCancelAutoCollapse	Boolean	After some interaction in the Ad the autocollapse will be canceled	False
mdAutoCollapseTimer	Integer	Delay to auto collapse header pane when panel auto expands.	0
mdAutoRepositionInterval	Integer	If >0, will fire a resize event to the ad every n milliseconds, effectively forcing the ad to reposition itself. Useful when other elements on the page (pushdowns, etc) move our banner and our panel is no longer aligned properly.	0
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" When set to undefined, the normal 1x1 fallback occurs	undefined
mdIsDomainConfigEnabled	Boolean	Whether or not to load the programmatic settings.	false
mdProgSettingsFolderPath	String	Location from which to load the programmatic settings files.	//services.serving-sys.com/programmatic/DomainList/
mdParentLevelsToResize	Number	This var is ONLY for the mdBackupImage experience. If you set this var to true, then the min-width and min-height of the parent elements of the ebDiv tag will be set to the dimensions of the backup image, so that the backup image will not be cropped/clipped	0

 

Change Log

Release: Aug 20, 2018 (v2.1.0)

• Manifest file has been included, and now when you create this format in SAS, the setup will be loaded from the config.js file
• Now it’s supported in Mobile Devices. There are two new images when the Ad is loaded in mobile devices (for Landscape mode: mobile_landscape_960x640.jpg, and for portrait mode: mobile_portrait_640x960.jpg) and the panel will be expanded in full-viewport by default only in mobile devices.
• Safeframe now is supported
• Local preview now is supported. You can test the different behaviors changing the custom variables and the SmartVersioning elements
• The custom variable "mdConfigurationBgColor" has a new option if you want to show the background image when the panel is expanding and collapsing
• There are some new custom variables: mdSpeedExpandAnimation, mdAutoCollapseTimer, mdEyeDivZIndex, mdProgSettingsFolderPath, mdIsDomainConfigEnabled, mdAutoRepositionInterval, mdBackupImgPath and mdParentLevelsToResize
• These variables have been renamed: "mdcbApplyCustomBehavior" now is "mdIsDomainConfigEnabled", "mdSettingsFolderPath" now is called "mdProgSettingsFolderPath" and "mdAutoTimeoutInterval" now is called "mdAutoCollapseTimer"
• Some Icons of Social Networks were removed from the SmartVersioning Elements: Android, Apple,  BlackBerry, Google Plus and Windows
• Some minor bugs were fixed

Release: Oct 26 2017 (v2.0.0)

• Rename HTML5 Programmatic Video Expandable to Video Expandable.

Release: Nov 11, 2015 (v1.0.0)

• Initial Release

 

Known Issues

• Close button will always appear as a part of the Social Toolbar. If you require the close button in the expanded state to be at the top of the ad, you must also set your social toolbar to be at the top of the ad.
• In IE and Edge if the video is playing during the animation of expanding and collapsing the panel, the reposition of the video will not very smooth

 

 

Copyright 2017 Sizmek. All rights reserved.

The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice.

 

Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries. Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners.