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 |
|
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, |
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
|
BOTTOM / BOTTOM_FULLVIDEO |
SOCIAL TOOLBAR AND EXPAND BUTTON ALWAYS AT THE BOTTOM OF THE VIDEO if the mdCollapseSwitchElements var is false
|
TOP_BOTTOM / TOP_BOTTOM_FULLVIDEO |
ONE ELEMENT ABOVE VIDEO, ONE ELEMENT BELOW VIDEO
if the mdCollapseSwitchElements var is false
|
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 5th 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 |
Controls the audio muting/unmuting behavior. |
1 |
mdcbAutoExp |
Integer |
1 - 1 time per user per day |
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) |
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 |
Controls the expanding direction |
3 |
mdcbExpType |
Integer |
1 - Expand on click |
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)
Note: These variables will be ONLY used for Local Testing purpose, when you upload the Ad to the platform you will need to apply the setup that you used in Local Preview to the Custom Variables and select the assets correctly in Additional assets.
If your platform is SAS you can modify the file "config.js" with the new configuration before upload the workspace and automatically the setup will be loaded in your new Ad.
Setting up Video Expandable in the Sizmek Platform
Before you begin, please make sure that you have the workspace available:
- 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.
- 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
- Log into Sizmek MDX 2.0 Platform
- Select Manage -> Ads
- Select New -> Create New Ad
- Enter a name for your format, and select Video Expandable as the Ad Format (listed under the sub-section Custom Ad Formats)
- 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.
- 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.
- Select “Add Panel” and select the expand.html file located in the /panels/expand folder of the workspace.
- 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.
- You can leave “Show Single Panel At A Time” checked, since this format only has a single panel it will not really matter
- 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.
- Give your ad a default clickthrough (and make sure to UNCHECK the “Close Ad Parts When Clicked” in the “Clickthrough URL Settings” area
- Save Ad (Ad need to be saved at this point in order to proceed to the next step).
- Select Advanced Features and UNCHECK the “Enable Dynamic Expansion Direction – Ad Level” (the ad handles this itself using custom variables).
- 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.
- 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.
- 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.
- Save Ad again, now you can preview the ad from Platform preview.
Sizmek SAS Setup
- Log into Sizmek SAS Platform
- Select CREATIVE-> ADS
- Select New Ad -> Blank Ad
- Enter a name for your format, and select Video Expandable as the Ad Format
- 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.
- If you have not yet uploaded your workspace, you can do so from the “Upload” tab on popup.
- Switch to "PANELS" tab and click on Add Panel to add panel.
-
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.
- 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.
- 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.
- Enter Click-through URL under the "CLICK-THROUGH & EVENTS” area, adjust Target Window, Show Address Bar, and Show Menu Bar as your desire.
- 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.
- 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.
- Switch to "AD DELIVERY" tab and make sure "Enable the Dynamic Expansion Direction" is unchecked.
- Save Ad (Ad need to be saved at this point in order to proceed to the next step).
- 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.
- 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.
- Save the Ad again, now you can preview the ad from Platform preview.
Custom Script Notice: Since Video 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_VideoExpandable.js
Note: The above custom script may be served either securely or insecurely based on the option selected in the platform
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 |
1 |
mdcbAutoExp | Integer |
Controls the frequency cap for the auto expansion. Uses HTML Local Storage. 1 - 1 time per user per day |
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)
|
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 |
3 |
mdcbExpType | Integer |
Controls the type of expansion, click/tap or mouse over. 1 - Expand on click |
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 |
|
Boolean |
Whether or not to load the programmatic settings. |
false |
|
String |
Location from which to load the programmatic settings files. |
//services.serving-sys.com/programmatic/DomainList/ |
|
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. |
Comments