PRODUCT
Follow

Note

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

Create an Ad Using a Sizmek Ad Suite Template

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

Download the template and then select the desired folder from the list of available dimensions and options (classic or video).

You can also customize the dimensions according to your requirements. Everything can be personalized, including media controls of the video.

Included Files

The following tables describe the list of files that are included in the downloadable template.

Master Banner Files

File Name

Description

Required

index.html

HTML file for the banner.

Required

config.js

Configuration/manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative.

Optional

styles/style.css

Style sheet for the banner and its HTML elements.

Optional (If you choose to include CSS styling in the HTML file)

scripts/script.js

JavaScript (logic and tracking) for the banner.

Required

scripts/localPreview.js

Script that enables local preview of the ad.

Optional (Does not require uploading)

images/backup.jpg

Fallback image shown in unsupported browsers.

Required

images/logo_white.svg

Sizmek Ad Suite logo. Replace this logo with your own logo, or delete this image if it is not needed.

Optional

images/background.jpg

Sizmek Ad Suite background. Replace this background with your own background, or delete this image if it is not needed.

Optional

Expand Panel Files

File Name

Description

Required

panels/expand/index.html

HTML file for the expand panel.

Required

panels/expand/styles/style.css

Style sheet for the expand panel.

Optional (If you choose to include CSS styling in the HTML file)

panels/expand/scripts/script.js

JavaScript (logic and tracking) for the panel.

Required

panels/expand/videos/video.mp4

Sizmek Ad Suite video. Replace this video with your own video, or delete this video if it is not needed.

Optional

panels/expand/images/poster.jpg

Poster image displayed in the video location in the banner before the video starts and after the video ends.

Optional

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 an Adhesion.

The config.js file includes the manifest ad data. This file contains metadata used to configure the ad in SAS during the upload. For more information about the Manifest files, see Manifest Ad Data.

Additional Resources

Prepare for Bulk Upload

If you are planning to upload multiple ads, make sure that the Ad Creation Wizard in SAS recognizes your Workspace as an Adhesion. Verify that the config.js file contains the following JavaScript:

define({
    "adFormatId": 10328
});

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 sections describe common methods in which to customize your Adhesion

Adhesion Without Expansion

To create an Adhesion banner without any expansion, keep the banner settings and ignore the expand panel settings. In addition, make sure that you remove the expand button from the Master Banner HTML file.

Note

Note: To ensure that the Adhesion displays properly in both web browsers and In-App, keep the Master Banner file, and use its file settings to create the ad. We do not recommend using the expand panel in place of the Adhesion.

Adhesion as a Footnote

Procedure
  1. Set mdHideBannerOnUserScroll and mdHidePanelOnUserScroll to false.

These values determine visibility of the banner and panel while the publisher's page is scrolling. When these values are set to false, both the banner and panel remain visible. These fields are included in the config.js in the Workspace, and on the Master Ad Setup page in SAS (Master Ad Setup > Settings > General > Advanced Features).

  1. Set the x position of the banner to 100.

This places the banner at the right-end of the browser. This option is included on the Master Ad Setup page in SAS (Master Ad Setup > Creative Assets > Panels).

  1. Change mdFullwidthBanner to No.

This field is included on the Master Ad Setup page in SAS (Master Ad Setup > Settings > General).

  1. Set the banner size to 728 x 90.

Since mdFullwidthBanner is set to No, the panel container is not extended to the browser width. Therefore, you need to set the banner size with accurate numbers. The size setup is included on the Master Ad Setup page in SAS (Master Ad Setup > Creative Assets > Panels).

Note

Note: To ensure that the dimensions are correct for the footnote, you must design your creative inside the Adhesion Workspace file. The default dimensions for the banner are 728 x 90, and the leave behind is 100 x 75.

Variables

Variable Name in SAS

(Variable Key in config.js)

Description

Type

Default and Accepted Values

Auto Reposition Interval

(mdAutoRepositionInterval)

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

Integer

Default: 0

Accepted: >0 and <=100

Backup Image Path

(mdBackupImgPath)

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 320 x 250 even though the tag is a 320 x 250 tag.

The Workspace template includes an example that shows the custom variable set to images/970x250_Default.jpg .

String

Default: Undefined

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

eyeDiv ZIndex

(mdEyeDivZIndex)

Sets eyediv zIndex - z-Index of the panel on the publisher's page.

String

Default: Undefined

Accepted: Supported CSS z-Index value

Enable SDK Default Close Button (mdEnableSDKDefaultCloseButton)

Determines whether to use the MRAID default close button rather than the customized one in the template when the ad serves in MRAID (In-app).

Boolean

Default: No

Accepted: Yes/No

Expand Panel Name (mdExpandPanelName)

Name of the expand panel.

String

Default: Expand

Accepted: Any valid name string, must match the panel name in Manifest file (config.js).

Full Width Banner

(mdFullwidthBanner)

Determines whether the banner needs to go to full browser width.

When set to No, the banner uses the placement width from the template (default is 320 px), and the banner is not responsive.

Boolean

Default: Yes

Accepted: Yes/No

Hide Banner on User Scroll

(mdHideBannerOnUserScroll)

Determines whether the banner will be hidden while a user scrolls (or resizes) the publisher's page.

Boolean

Default: Yes

Accepted: Yes/No

Hide Panel on User Scroll

(mdHidePanelOnUserScroll)

Determines whether the panel will be hidden while a user scrolls (or resizes) the publisher's page.

Boolean

Default: Yes

Accepted: Yes/No

Enable Domain Config

(mdIsDomainConfigEnabled)

Sets ad to load with domain configuration.

Boolean

Default: No

Accepted: Yes/No

Minimum Panel Height (mdMinPanelHeight)

Determines the minimum height, in pixels, of the expand panel. Default value is -1 (no minimum). The default value, (-1), is only applied when the mdPanelHeightDependency is set to percentage.

Integer

Default: -1

Accepted: >0

Panel Aspect Ratio

(mdPanelAspectRatio)

Aspect ratio for the panel. This value is only applied when mdPanelHeightDependency is set to aspectRatio.

String

Default: 4:3

Accepted: String in [width ratio]:[height ratio] format

Panel Breakpoints

(mdPanelBreakpoints)

Determines the panel height based on the panel width breakpoints when mdPanelHeightDependency is set to adaptive.

Enter the value using the [width]:[height] format, and add a comma for multiple breakpoints.

For example: 300:200,500:300,749:400 means the following:

  • Set panel height to 200 px when panel width <= 500,

  • Set panel height to 300 px when banner width <= 749

  • Set panel height to 400 px when panel width > 749

String

Default: 300:200,500:300,749:400

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

This is a comma-delimited list of width:height breakpoints. When the ad's width ≥ to the number on the left of the colon, the height is set to the number on the right of the colon. The highest width matched in the list is used.

Panel Fixed Height

(mdPanelFixedHeight)

Determines panel height when mdPanelHeightDependency is set to fixed.

Integer

Default: 416

Accepted: >0

Panel Height Dependency

(mdPanelHeightDependency)

Determines what the panel height is based on.

String

Default: percentage

Accepted:

  • fixed: Based on the value of mdPanelFixedHeight

  • adaptive: Based on the value of mdPanelBreakpoints

  • aspectRatio: Based on mdPanelAspectRatio

  • matchBanner: Based on banner height

  • browser: Based on browser height

  • percentage: Based on the value of mdPanelPercentageHeight

Panel Height Percentage

(mdPanelPercentageHeight)

Determines whether the height of the expand panel should be according to the percentage of the viewport height when mdPanelHeightDependency is set to percentage.

Integer

Default: 25

Accepted: >0 and <=100

Parent Levels to Resize

(mdParentLevelsToResize)

Only applied when serving the default image. Determines the number of levels of parent elements to resize to the default image size.

Integer

Default: 0

Accepted: >0

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

Restrict Page Scroll When Expand

(mdRestrictPageScrollWhenExpand)

Determines whether the user can scroll the publisher page while the expand panel is expanded. This variable is only applied when the expand panel expands to full screen.

Boolean

Default: Yes

Accepted: Yes/No

Functions

Function Name

Location

Description

Additional Code Allowed

checkIfAdKitReady

scripts/script.js

panels/expand/scripts/script.js

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

DOC_cross_blue.jpg

initializeCreative

Initializes the creative.

You can add your own script if you want to run a script when the creative 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

initializeCloseButton

Initializes the close button. Whether to display the close button is based on the serving environment and custom variable.

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

initializeVideo

panels/expand/scripts/script.js

Initializes the video based on the serving environment and custom variable. Determines how to serve the video object and add video tracking to the video module when possible.

DOC_tick.gif

trackUserAction

Triggered when user taps on user action button. It only contains the EB.userActionCounter function call for tracking purposes, but you can add your own functionality.

DOC_tick.gif

clickthrough

Triggered when user taps on click-through button. It calls the EB.clickthrough function to launch the default click-through that is set up in SAS , as well as tracks the clicks from our delivery.

DOC_tick.gif

closeAd

scripts/script.js

Triggered when user taps the close icon on the top- right corner of the banner. This function dispatches the closeAd command to the Adhesion custom JavaScript on the placement level, and closes the ad completely. The function will also track the closeAd user action by calling the EB.userActionCounter function.

DOC_tick.gif

pauseVideo

panels/expand/scripts/script.js

Triggered when the ad is either clicked through, collapsed, or the video is paused.

DOC_tick.gif

onPageScroll

Triggered when user scrolls the page. You may need to modify the function to fit your requirements, and depending on the content to display when the page is scrolled.

DOC_tick.gif

getCustomVar

Returns the custom variable.

DOC_tick.gif

expand

scripts/script.js

Triggered when user taps on expand button. You may need to modify the function to fit your requirements, and depending on thet content to display when the ad expands.

DOC_tick.gif

collapse

panels/expand/scripts/script.js

Triggered when user taps on the close button just after the ad expands. You may need to modify this function to fit your requirements, and depending on the content to display when ad is collapsed.

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

Comments