PRODUCT
Follow

Note

Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Billboard.

Creating an Ad Using a Sizmek Ad Suite Template

When creating a Billboard in a code editor, it is recommended that you start with our official template.

Template Type

Download URL

Billboard Classic

Billboard_1.1.0.zip

Billboard with Video

Billboard_Video_1.1.0.zip

Download the template and then select the desired folder from the list of available dimensions and options.

You can also customize the dimensions according to your requirements. Everything can be personalized; take care to respect the publishers constraints regarding dimensions, Close button, Leavebehind, and Frequency Capping.

Included Files

The following table describes the list of files that are included in the downloadable template.

File Name

Description

Required

Notes

Root Folder

index.html

HTML file for the banner.

Required

Do not modify.

config.js

Empty config file - AdKit dependency.

Optional

This file is not included in the current template. You can create it, following our code snippets, to benefit from bulk upload and customization.

images/backup.jpg

1x1 backup image for the ad, equal to the placement dimensions.

Required

Do not modify.

images/billboard.jpg

Fallback image shown in unsupported browsers.

Required

Replace with your image.

scripts/script.js

JavaScript (logic and tracking) for the banner.

Required

Do not modify.

scripts/localPreview.js

Script that enables local preview of the ad.

Optional

styles/common.css

Common style sheet for all HTML files.

Optional

panels/billboard Folder

index.html

HTML file for the billboard panel.

Required

images/logo.png

Logo image for the billboard content.

Optional

Use if code is required and moved to the HTML.

scripts/script.js

JavaScript for the responsive billboard panel.

Optional

Use if code is required and moved to the HTML.

styles/style.css

Style sheet for the billboard panel.

Optional

Use if code is required and moved to the HTML.

panels/leavebehind Folder

index.html

HTML file for the leavebehind panel.

Required

images/logo.png

Logo image for the leavebehind content.

Optional

Use if code is required and moved to the HTML.

scripts/script.js

JavaScript for the leavebehind panel.

Optional

Use if code is required and moved to the HTML.

styles/style.css

Style sheet for the leavebehind panel.

Optional

Use if code is required and moved to the HTML.

Additional Files in the Video Template

File Name

Description

Required

panels/billboard Folder

images/poster.jpg

Poster image displayed in the video element before the video starts.

Optional

videos/video.mp4

Temporary video that you should replace with your own video.

Required

videos/video.webm

Temporary video that you should replace with your own video.

Optional

General Features

Breakpoints

For any dimension, the Billboard can display a different experience for the user by adjusting to different breakpoints. Examples include Multiple creative and Single creative.

Multiple Creative Demo

Multiple creative uses snapping between breakpoints without a transitional animation (setting useSingleCreative variable to false and using the mdSnapPointsWidth and mdSnapPointsAnimation variables) for multiple publisher requirements.

The following example uses five breakpoints to display different creatives within the same ad. Click here for a demo.

Results:

  • When the browser width is under 620 px, the ad will not display.

  • Here is an example of an ad with dimensions from 620 px to 823 px.

    panel_billboard_5.png
  • Here is an example of an ad with dimensions from 1272 px and larger.

    panel_billboard_1.png

Single Creative Demo

Single creative uses responsive animation between breakpoints as the ad is resized (setting useSingleCreative to true).

The following example represents a setup using five breakpoints to display the same ad, which scales responsively by keeping the same ratio within the same ad. The ratio is calculated with the maximum width and height values of the billboard panel. Click here for a demo.

Note

Note: Use this Ad ID: 1081722205

Results:

  • When the browser width is under 620 px, the ad will not display.

  • Here is an example of an ad with dimensions from 620 px to 823 px.

    panel_billboard_singleCreative_5.png
  • Here is an example of an ad with dimensions from 1272 px and larger.

    panel_billboard_singleCreative_1.png

Leave Behind

Depending of the publisher’s requirements, the Leave Behind can push the website content down or overlap it.

Pushdown

The Leave Behind panel pushes the elements on the publisher page downwards. This is the recommended setting.

panel_leavebehind_1.jpg

In the config.js file:

mdDoesLeaveBehindTakeSpace = Yes;

Overlap

The Leave Behind Panel overlaps elements on the publisher page. This is not common.

panel_leavebehind_2.jpg

In the config.js file:

mdDoesLeaveBehindTakeSpace = No;

Setting up Your Ad in Sizmek Ad Suite

After you finish creating your ad, proceed to setting up your ad in SAS. For more information, see Set up a Billboard.

Additional Resources

Bulk Upload

For the SAS Ad Creation Wizard to recognize your workspace as a Billboard, verify that the config.js file contains the following:

define(
{
"adFormatId": 10342
}
);

For more information, see Set up Multiple Ads Using Ad Creation Wizard.

Shared Libraries

If you are developing ads with 3rd party libraries, we recommend that you call these libraries from a CDN (Content Delivery Network) when possible. This will help improve loading time and caching.

Dynamic Creative Optimization

If you need to add dynamic creative optimization (DCO) elements to your creative, see Add Dynamic Elements to Your HTML Ads Using a Code Editor.

Advanced Configuration

The following tables provide additional variables and functions that are available for this format. You can use these additional items to fully customize your ad.

Scripts

Script Code

Location

Description

Type

Editable

panels/billboard Folder

EBModulesToLoad = ['EBAPI'];

index.html

Initializes the AdKit API required for the ad to work properly. For more information, see EBAPI Module.

AdKit Module

DOC_cross_blue.jpg

if(0) EB.initPanelDimensions(1272, 328);

index.html

Initializes the default expansion function for the billboard panel to display correctly. Equal to the maximum billboard panel dimensions.

Function

DOC_tick.gif

panels/leavebehind Folder

EBModulesToLoad = ['EBAPI'];

index.html

Initializes the AdKit API required for the ad to work properly. For more information, see EBAPI Module.

AdKit Module

DOC_cross_blue.jpg

if(0) EB.initPanelDimensions(1272, 66);

index.html

Initializes the default expansion function for the leavebehind panel to display correctly. Equal to the maximum leavebehind panel dimensions.

Function

DOC_tick.gif

Variables

All functions are located in the scripts/script.js file.

Variable Name

Description

Type

Editable

Default Value

panels/billboard Folder

  • closeButton

  • userActionButton

  • clickthroughButton

  • video

Global variables used to select DOM elements

Add, edit, or remove these variables as you modify elements in index.html.

Div ID

DOC_tick.gif

N/A

useSingleCreative

Set this value to false to use multiple ads following each snapPoints.

Boolean

DOC_tick.gif

TRUE

snapPoints

Customize these values to change the columns' range for the billboard panel.

Array

DOC_tick.gif

[0, 628, 824, 951, 1119, 1272]

wasPanelLoadReported

Initial value to track if the billboard panel was correctly loaded and visible after its first expansion.

Boolean

DOC_cross_blue.jpg

FALSE

wasPanelClosed

Initial value to check if the billboard panel was correctly closed.

Boolean

DOC_cross_blue.jpg

FALSE

  • adId

  • rnd

  • uid

These variables store values that are necessary for the ad to run properly after the upload to SAS.

Important

Important: Do not make changes to these variables.

Variable

DOC_cross_blue.jpg

N/A

panels/leavebehind Folder

expandButton

Global variables used to select DOM elements

Add, edit, or remove these variables as you modify elements in index.html.

Div ID

DOC_tick.gif

N/A

wasPanelLoadReported

Initial value to track if the billboard panel was correctly loaded and visible after its first expansion.

Boolean

DOC_cross_blue.jpg

FALSE

  • adId

  • rnd

  • uid

These variables store values that are necessary for the ad to run properly after the upload to SAS.

Important

Important: Do not make changes to these variables.

Variable

DOC_cross_blue.jpg

N/A

Functions

All functions are located in the scripts/script.js file.

Function Name

Description

Additional Code Allowed

panels/billboard Folder

checkIfAdKitReady

Checks to see if the AdKit is ready, and then proceeds to initialize ad.

DOC_tick.gif

initializeCreative

Initializes the ad.

You can add your own script if you want to run a script when the ad is initialized.

DOC_tick.gif

initializeGlobalVariables

Initializes the global variables for HTML objects. In the template, positionAdElements is also called to position the ad elements.

DOC_tick.gif

addEventListeners

Adds all of the event listeners. In the template, the click event for the click-through and user action counter was added. In addition, the webkitendfullscreen event listener for iOS devices was added in order to handle some positioning issues when exiting the full screen video player.

DOC_tick.gif

trackVideoInteractions, getVideos

Initializes video tracking by creating a new instance of the EBG Video Module. It also contains auto-play video functionality in video templates.

DOC_tick.gif

expandAnimStart, collapseAnimStart

Placeholder for your animations when the expand or collapse animation starts.

DOC_tick.gif

expandAnimComplete, collapseAnimComplete

Placeholder for your animations when the expand or collapse animation has finished.

DOC_tick.gif

displayAdDimensions, updateAdDimensions

Functions that display dynamic values of the ad dimensions in the index.html file at <span id="dimensions">.

DOC_tick.gif

handleClickthroughButtonClick

Click event handler for user action button.

DOC_tick.gif

pauseVideo

Pauses the video.

DOC_tick.gif

setColumn

Listener that handles either single or multiple ad columns.

DOC_cross_blue.jpg

setSingleColumn

Resizes the ad_content ID in the index.html file following the billboard panel's dimensions.

DOC_tick.gif

clickthrough

Click handler for the click through button.

DOC_tick.gif

collapse

Collapses the billboard panel.

DOC_cross_blue.jpg

userAction

Click handler for the user action button.

DOC_tick.gif

panels/leavebehind Folder

checkIfAdKitReady

Check to see if the AdKit is ready and then proceed to initialize ad.

DOC_cross_blue.jpg

expand

Expands the billboard panel.

DOC_tick.gif

initializeCreative

After the HTML5 API initializes, this function calls the initial ad functions for panel.

DOC_tick.gif

initializeGlobalVariables

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

DOC_tick.gif

Custom Variables

Variable Name in SAS

(Variable Key in config.js)

Description

Type

Default and Accepted Values

Billboard Panel Name

(mdBillboardPanelName)

Billboard panel name in SAS.

String

Default: billboard

Collapse Animation Duration

(mdCollapseAnimationDuration)

Collapse animation duration of the billboard panel in seconds.

Number

Default: 1

Expand Animation Duration

(mdExpandAnimationDuration)

Expand animation duration of the billboard panel in seconds.

Number

Default: 1

Auto Expand Animation Duration

(mdAutoExpandAnimationDuration)

Initial auto expand animation duration of the billboard panel in seconds.

Number

Default: 1

Auto Reposition Interval

(mdAutoRepositionInterval)

Automatically repositions panel, if needed, for a specified time interval.

0 turns 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 variable adds an interval by which to attempt to resize/reposition also.

Integer

Default: 0

Accepted: >0 and <=100

Easing Type

(mdEasingType)

Easing setting for billboard panel expansion and collapse.

String

Default: 4 or ease-in-out

Note

Note: Value can either be a number or text, but not both.

Accepted:

  • 0: None

  • 1: linear

  • 2: ease-in

  • 3: ease-out

  • 4: ease-in-out

eyeDiv ZIndex

(mdEyeDivZIndex)

Sets a custom z-Index for the EyeDiv. Select 0 to defer to placement's z-index setting.

String

Default: undefined

Accepted: Supported CSS z-Index value

Leave Behind Alignment

(mdLeaveBehindAlignment)

Alignment of the leave behind panel on the publisher page.

String

Default: right

Accepted:

  • left

  • right

  • center

Leave Behind Panel Name

(leaveBehindPanelName)

Leavebehind panel name in SAS.

String

Default: leavebehind

Animate Clipping

(mdAnimateClipping)

If YES, the billboard panel animates and expands. If NO, the billboard panel will not animate and just snaps and expands.

Boolean

Default: Yes

Close Button Show

(mdCloseButtonShow)

If YES, the billboard panel will have a Close button and it will have the ability to close the billboard panel.

Boolean

Default: Yes

Does Leavebehind Take Space

(mdDoesLeaveBehindTakeSpace)

Determines whether the leave behind overlaps elements on the publisher page.

Boolean

Default: Yes

Local Storage Name

(mdLocalStorageName)

Shares 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

Default: undefined

Local Storage Duration

(mdLocalStorageDuration)

Indicates the local storage duration in hours. If 0, the duration will be infinite.

Number

Default: 12

Never Show Leavebehind

(mdNeverShowLeaveBehind)

If true, no leavebehind will be shown, even when the billboard panel collapses. The billboard panel will be shown every time the ad loads.

Boolean

Default: No

Auto Collapse Timer

(mdAutoCollapseTimer)

Number of milliseconds to collapse the auto-expanded panel.

Float

Default: 8

Accepted: > 0

Interactions Cancel Auto Collapse

(mdInteractionsCancelAutoCollapse)

Cancels Auto on user interaction with auto expand panel.

Boolean

Default: Yes

Accepted: Yes/No

Prog Settings Folder Path

(mdProgSettingsFolderPath)

Location from which to load the programmatic settings files.

String

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

Accepted: Folder path

Snap Points Width

(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 that 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 that design will support.

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

String

Default: 620,824,945,1119,1272

Snap Points Animation

(mdSnapPointsAnimation)

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

Boolean

Default: No

Backup Image Path

(mdBackupImgPath)

Provides the image path for the down-level image.

String

Default: undefined

Accepted: Relative path to the backup image, for example, images/billboard.jpg

Parent Levels to Resize

(mdParentLevelsToResize)

This variable is only used when the ad is serving a default image.

When set to any value over 0, the number of publisher parent elements of our tag resizes to the default image size, if they are smaller than the default image serving.

Integer

Default: 0

Accepted: > 0

Is Prog. Enabled?

(mdIsProgEnabled)

Determines whether to load the programmatic settings.

Boolean

Default: No

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

Comments