PRODUCT
Follow

Overview

The Billboard format can be used for creating a responsive billboard effect on a publisher's page. This format has two different states: the expanded or banner state (Billboard) and the collapsed/unexpanded state (Leave Behind). The billboard can adjust to different breakpoints, either animating responsively between breakpoints as the ad is resized, or snapping between breakpoints without a transitional animation (using the mdSnapPointAnimation variable).

The "Leave Behind" state has an option to click and animate the Responsive Billboard panel while pushing down the page content. Likewise, the Responsive Billboard panel has an option to close the expanded panel and set it back to unexpanded (Leave Behind) state.

The Billboard format can also remember the last expanded state that it was in, and share this state as well with other responsive billboard adverts in a placement if customized to do so.

There are two sets of template available with video and non-video versions. The templates are available with a single breakpoint or five breakpoints. The single breakpoint template will show a single creative design and scale it up and down based on the width of the page content or window. The five breakpoint template will switch between 5 creative designs based on the current width of the page content or window and the width breakpoints you set using the custom variables. Both versions can be used by different publishers based on page / section layout. The Responsive Billboard can be edited to add or remove breakpoints for different publisher requirements.

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

Demos/Downloads

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

Template

Demo

Preview demo

Templates Overview

Template

Workspace

Video

Creative Break Points

Leave Behind Dimensions

Default Image Dimensions

Non-Video 

Billboard_1.1.0.zip

No

1

970x66

(100% width if under 970)

768x250

Video

Billboard_Video_1.1.0.zip

Yes

1

970x66

(100% width if under 970)

768x250

 

 

Breakpoint Width (px)

Width Range

Content dimension

Detail

754px

754 - 1272px

754x194px scaling to 1272x328px

The billboard will scale height and width responsively to fit according to the width of the page content.

Note: When the browser width is under 754px, then the advert will not display.

Note: To change the template to use different creatives at different breakpoints, consult the Customizing the Billboard section of the documentation.

 

Note: To change the template to use a single creative at all breakpoints, consult the Customizing the Billboard section of the documentation.

 

A few screenshots of the Billboard with different content and sizes are shown below.

Responsive Creative Panel:

 

1272x328 Panel (Four column view):

For each dimension the Billboard is able to display a different experience for the user if desired. The template is also able to scale on creative design to the other sizes for maximum flexibility during production.

 

1119x289 Panel (3 ½ column view that is showed only on IE browsers):

 

970x250 Panel (3 column view):

 

824x212 Panel (2 ½ column view that is showed only on IE browsers):

628x162 Panel (2 column view):

The Billboard format includes a Show Ad/Hide Ad functionality (Leave Behind state). The viewing state of the Billboard is saved via local storage on the user's machine; it is possible to customize the storage name so that it can be shared between responsive billboard units in a placement. The state of the Billboard is maintained when the browser is resized.

 

Leave Behind (Responsive Creative Template)

The format is built as a 1x1 in-banner unit and requires one different default image that is uploaded as additional assets in the creative and used to serve in IE8.

 

Leave Behind (with mdDoesLeaveBehindTakeSpace = No)

The Leave Behind Panel will overlap elements on the publisher page.

 

Supported Platforms

Platform

Supported Version

Windows

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

Mac

Safari, Firefox, Chrome

Tablet

iPad with iOS 8 and up

Android Tablet with Android 4.1 and up

Surface Tablet 8.0+

 

Features

These are the key features of the Billboard format.

Feature

Supported

Publisher Customizations (provided via Certification using Domain Config Tool)

Responsive

Local Preview

Uses AdKit (able to include DCO and Additional Assets)

Polite Loading

Safeframe Support

MRAID (in APP Support)

Secure Serving

Sizmek Advertising Suite Support

Ad Builder Templates Available

 

Implementing an Billboard Format

Included Template Files

HTML

The following HTML template files are included:

File Name

Description

index.html

The HTML file for the banner.

panels/billboard/index.html

The HTML file for the responsive billboard section.

panels/leavebehind/index.html

The HTML file for the leave behind section.

 

Styles

The following CSS template files are included:

File Name

Description

styles/common.css

The style sheet for all html files.

panels/billboard/styles/style.css

The style sheet for the responsive billboard panel.

panels/leavebehind/styles/style.css

The style sheet for the leave behind panel.

 

Scripts

The following JavaScript template files are included:

File Name

Description

scripts/script.js

The JavaScript for the banner.

Panels/billboard/scripts/script.js

The JavaScript for the responsive billboard panel.

panels/leavebehind/scripts/script.js

The JavaScript for the leave behind panel.

 

Images

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

File Name

Description

images/backup.jpg

1x1 backup image for banner.

images/billboard.jpg

The backup image for the billboard. This will display in IE8.

panels/billboard/images/logo.png

The logo image for responsive billboard content.

panels/billboard/images/poster.png

The poster image for responsive billboard video window.

panels/leavebehind/image/leaveBehind.png

The leave behind image for leave behind panel.

panels/leavebehind/image/logo.png

The logo image for the responsive leave behind panel.

 

Customizing Billboard Format in HTML

To update content images, please follow these steps:

  1. Go to panels/billboard/images folder.
    Notice there are two images, the logo and video poster in this folder.
  2. Replace or add the files.

To change the image names:

  1. Go to panels/billboard/scripts/script.js.
  2. Change the names in script files.

 

Responsive Billboard Panel

  1. To customize the responsive billboard panel, open panels/billboard/index.htm, panels/billboard/styles/style.css, and panels/billboard/scripts/script.js in an HTML-authoring environment.
  2. The Customizable Functions are: 

Panel Functions (panels/billboard/scripts/scripts.js)

Function Name

Description

addEventListeners

Event listeners for different elements on the panel are added with this function.

checkIfEBInitialized

Check to see if the HTML5 API has initialized.

checkCloseEnabled

Check to see if the close button has been enabled as a custom variable, and if so display the button.

collapse

Start the collapse behavior of the billboard panel

collapseCompletely

Once the billboard panel's transition animation for collapsing has complete, collapse the panel.

dummyInteractions

This is for the platform to register the custom interactions the ad uses for tracking changes to breakpoints.

initExpandAnimation

This function dispatches a message telling the panel to start the expansion animation of the billboard panel.

initializeCreative

Once the HTML5 API has initialized, then initializeCreative will call the initial creative functions for panel.

initializeGlobalVariables

Initialize the global variables that will be used by the panel.

removeEventListeners

Custom remove listener function, it removes the listener (Template function - do not modify)

Parameters (listenerId)

setColumn

When the ad is loaded or resized, setColumn is used to dispatch an automatic event counter for the matching column name.

setCurrentColumn

Used to set the display style of the current creative that falls within the column width.

 

Leave Behind Panel

  1. To customize the leave behind panel, open panels/leavebehind/index.html, panels/leavebehind/styles/style.css, and panels/leavebehind/scripts/script.js in an HTML-authoring environment.
  2. The Customizable Functions are:

Panel Functions (panels/leavebehind/scripts/scripts.js)

Function Name

Description

addEventListeners

Event listeners for different elements on the panel are added with this function.

checkIfEBInitialized

Check to see if the API has initialized.

expand

Expands the billboard panel.

initializeCreative

Once the HTML5 API has initialized, then initializeCreative will call the initial creative functions for panel.

initializeGlobalVariables

Initialize the global variables that will be used by the panel.

Note: In custom JS there is code to check whether the LocalStorageName is undefined or "ResponsiveBillboard". And if it is "ResponsiveBillboard ", means the same name is already used in other unique ad so to avoid the sharing same LocalStorageName , we have used adId as a unique LocalStorageName.

var isLocalStorageNameUndefined = !this.localStorageName || this.localStorageName === "undefined" || this.localStorageName === "ResponsiveBillboard";
if (isLocalStorageNameUndefined) {
  this.localStorageName = adId;
}
 

 

Common Customizations

Responsive

To make the billboard behave responsively, the mdSnapPointsAnimation variable should be set to 'Yes'. This will make the billboard grow and shrink to fit in the publisher's allotted space. If mdSnapPointsAnimation is set to 'No', the ad will snap to the widths set in the mdSnapPointsWidth variable, and will not grow or shrink to intermediate sizes between those widths.

If mdSnapPointsAnimation is set to 'No', the responsive billboard will show the largest adaptive size that fits within the current ad width. That size might be smaller than the available width. For example, if publisher provides for a width of 950px, and you have breakpoints set in your custom variables at 900px and 1000px, the 900px size will be displayed.

If you want the ad to always scale up to the width of the publishers page, set mdSnapPointsAnimation to 'Yes'. In this case, if publisher provides for a width of 950px, and you have a breakpoint set at 900px, the 900px size will be displayed and scaled up to 950px width. This may look better than setting mdSnapPointsAnimation to 'No', as the ad will always match the width of publishers page content. However, you need to make sure your ad CSS scales your content properly.

Switching to Multiple Creative

To switch from a responsive creative template to a multiple creative template, set the 'useSingleCreative' variable to 'false' and add a column N div for each creative size you have (where N is an integer from 1 to your total number of sizes). Remove or comment out the div with the id of 'column'.

Setting a Maximum Panel Size

The maximum panel size is determined by the dimensions set for the panel in the Sizmek platform ad settings. For example, if you set your billboard panel dimensions to 970x250, the panel will grow no larger than that size. 

Setting a Minimum Panel Size

The minimum panel size is determined by the lowest breakpoint you set in the mdSnapPointsWidth variable. For example, if your lowest breakpoint is 620, the ad will disappear if the available width on the page goes below 620px. This behavior ensures that the ad is never shown at a size that the design cannot scale to. For example, your ad design might look good at 620px wide, but not at 50px wide. Make sure to set the minimum low enough to display in all situations where the ad should be shown.

Leave Behind Scaling

The leave behind will scale down horizontally if the publisher element that contains the ad is narrower than the width of the leave behind panel. If you think this is a possibility, you should make sure the content inside the leave behind is capable of scaling horizontally. For example, a creative design that is 970px wide will get cut off in portrait mode on iPad, which is only 768px wide. You can use relative positioning or relative CSS units to scale your content down. 

*Deprecated Legacy Adpative HTML5 Billboard manual responsiveness update process:

To switch from a adaptive creative template to a responsive creative template, update the 'useSingleCreative' variable to be 'true' in panels/billboard/scripts/script.js. You also need to delete or comment out all the column div elements (i.e. in the single breakpoint template this would be column1, column2) from panels/billboard/index.html and uncomment the column div.

 

Setting up a Billboard in the Sizmek Platform

Set up in the MDX2.0 Platform

Procedure
  1. Archive the Billboard workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In the Sizmek MDX2.0, under Creative Assets, create a new Workspace by uploading the ZIP file.
  3. Under the Ads section, create an ad using the workspace that you have uploaded.
  4. Set the Ad Format to Billboard and fill out the form.
  1. Add the following panels to the Panels List.
    • billboard: select panels/billboard/index.html for the creative asset. Set the Dimensions to "1272x328". Set "Auto Retract When" to "Never" and "Position Type" to "banner relative".
  1. Make sure to leave the Panel Settings checkboxes unchecked.
  2. Save the ad.
  3. Under the Advanced Features section, customize the Variables to your needs.
  4. Create a new placement for the ad.
  5. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  6. After you've saved your placement, you can then generate preview tags to test on your web site. 

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

Set up in the Sizmek Advertising Suite Platform

Procedure
  1. Archive the Billboard workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. Click Creative > Assets Library, create a new Workspace by uploading the ZIP file.
  3. Click Creative > Ads, and then click New Ad > Blank Ad.
  4. Set the Ad Format to Billboard and fill out the form.
  1. Add the following panels to the Panels List.
    • billboard: Set the Dimensions to "1272x328". Set "Auto Retract When" to "Never" and "Position Type" to "banner relative".
  1. Save the ad.
  2. Under the Advanced Features section, customize the Variables to your needs.
  3. Create a new placement for the ad.
  4. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  5. After you've saved your placement, you can then generate preview tags to test on your web site.

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

 

Custom Script Notice: Since the Billboard 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_HTML5ResponsiveBillboard.js

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

  

Custom Variable

Variable Name

Description

Variable Type

Default Value

mdBillboardPanelName

Billboard panel name on the platform.

String

billboard

mdCollapseAnimationDuration

The collapse animation duration of the billboard panel in seconds.

Number

1

mdExpandAnimationDuration

The expand animation duration of the billboard panel in seconds.

Number

1

mdAutoExpandAnimationDuration

The initial auto expand animation duration of the billboard panel in seconds.

Number

1

mdEasingType

The easing type for the collapse and expand of the billboard panel (0 or none, 1 or linear, 2 or ease-in, 3 or ease-out, 4 or ease-in-out)

Number

4

mdEyeDivZIndex

Set a custom z-index for the EyeDiv. Choose 0 to defer to placement z-index settings.

String

undefined

mdLeaveBehindAlignment

Alignment of the leave behind panel on the publisher page (left, right or center).

String

right

mdLeaveBehindPanelName

Leave behind panel name on the platform.

String

leavebehind

mdAnimateClipping

If this is set to YES, the billboard panel animate and expand, If this set to NO the billboard panel will not animate and just snap and expand.

Boolean

Yes

mdCloseButtonShow

If this is set to YES, the billboard panel will have close button and it will have ability to close the billboard panel.

Boolean

Yes

mdDoesLeaveBehindTakeSpace Determines whether the leave behind overlaps elements on the publisher page. Boolean Yes
mdLocalStorageName

This variable is used to share the expand/collapse state between multiple ads. If multiple ads have the same value, they will share the same state when served. If this is "undefined" the ad will not share state with any other ads.

String

undefined

mdLocalStorageDuration

This variable is used to provide the local storage duration in hours. If 0, the duration will be infinite.

Number

12

mdNeverShowLeaveBehind If true, no leave behind will be shown, even when the billboard panel collapses. The billboard panel will be shown every time the ad loads. Boolean No
mdSnapPointsWidth

This variable is used to provide the creative snap-points between the maximum and minimum width.

If the publisher container for the ad drops below the minimum width you set, the ad will be removed so it does not display incorrectly. Make sure you set your lowest width low enough to display in the lowest size your design will support.

If you set mdSnapPointsAnimation to "Yes" so the ad will scale up to fit the page content.

String

620,824,945,1119,1272

mdSnapPointsAnimation

If set to YES then the billboard will animate fluidly between the snap-points upon browser resize. If set to NO then the billboard will snap without animation on resize.

Boolean

No

mdBackupImgPath

This variable is used to provide the image path for the down-level image.

String

images/billboard.jpg
mdParentLevelsToResize

This variable is only used when the ad is serving a default image.  When set to any value over 0, this number of publisher parent elements of our tag will be resized to the default image size, if they are smaller than the default image serving.

Integer

0
mdIsProgEnabled Whether or not to load the programmatic settings. Boolean No
mdProgSettingsFolderPath Location from which to load the programmatic settings files. String //services.serving-sys.com/programmatic/DomainList/
mdInteractionsCancelAutoCollapse This variable is only used when  there is an auto expand panel. If the user make some interaction the panel will not be closed. Boolean No
mdAutoCollapseTimer if there is an auto-expand panel, it will be closed after "n" milliseconds. Number 0
mdAutoRepositionInterval Ad resize/reposition interval. 0 to turn off the interval. Ad attempts to resize itself every "n" milliseconds.  Even with this value set to 0, the ad will always attempt to resize itself upon browser resize, browser scroll, or orientation change.  This var simply adds an interval by which to attempt to resize/reposition also. Number 0

 

Reported Custom Interactions

The following custom interactions are reported by the ad and can be reviewed in Sizmek's reporting (besides standard ad interactions):

Interaction Name

Description

Billboard_Load

The billboard panel was visible on page load.

Leave_Behind_Load

The leave behind panel was visible on page load.

Ad_Resize_AdShown

The ad started out hidden, but was shown after a page resize.

UserAction

User Interaction send on UserAction button click

clickthrough

Clickthrough Interaction send on clickthrough button click

 

Appendix: EB Video Module

Templates that contain video load a video module. This module allows the video player to track video interactions and metrics. The code that loads this module looks like the code below.

<script type="text/javascript">EBModulesToLoad = ['Video'];</script>

This module already exists in the HTML5 Rich Media Banner templates with video. If you do not need this functionality, you can remove video module by deleting 'Video' from the EBModulesToLoad array. 

 

Change Log

1.1.3

Release: Apr. 20, 2018

  • HotFix: Chrome bug (65): when the panel is expanding/collapsing the animation was not smooth
  • Fixed the initial position of the billboard panel in IE/Edge browsers.
  • Fixed Android issue with the width of the panel

 

1.1.0 

Release: Apr. 19, 2017

  • Updated format to offer a fully “liquid” or “domain configurable” solution.  This allows one tag to be served across different domains where Certification and Support can use the “Domain Settings Admin Tool” to change custom variables, JavaScript and CSS on specific domains so a single tag can work everywhere as expected. (Note: This has previously been referred to as a “programmatic” solution, but is more appropriate for PMPs and smaller networks that have been certified with Sizmek).
  • Fully Optimized Viewability Solution so that it will use the panel that is currently visible (e.g. Billboard panel or Leave Behind)
  • Support for Adkit and allowing you to include DCO elements within your ad amongst other benefits
  • Added support for local previews so you can view individual panels locally on your PC without having to generate an ad

 

1.0.3 CustomScript

Release: Jan. 09, 2017

Custom script updates:

  • Added 2 new external variables: mdDoesLeaveBehindTakeSpace and mdNeverShowLeaveBehind

 

1.0.0

Release: Jan 18, 2016

  • First release

 

Known Issues

  • On Android devices, if you pinch/zoom, the Responsive Billboard may incorrectly align itself in portrait mode due to incorrect reporting from Android browsers

 

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.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments