PRODUCT
Follow

Note

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

Create an Ad using a Sizmek Ad Suite Template

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

Template Type

Download URL

Workspace

Link

After downloading the workspace template, be sure to extract it while preserving the directory structure.

Note

Note: When updating or replacing assets such as images and videos, make sure to also update references to their file names and dimensions found in index.html, style.cs and script.js as necessary.

Included Files

The following files are included in the workspace template download:

File Name

Description

Required

index.html

HTML file for the banner.

Required

panels/headers/index.html

HTML file for header panel.

Required

panels/left_gutter/index.html

HTML file for the left gutter panel.

Required

panels/right_gutter/index.html

HTML file for the right gutter panel.

Required

styles.reset.css

Style sheet that resets the default styles of the browser.

Optional

styles/immersiveTakeover_style.css

Basic style sheet for Simple Skin.

Optional (if code is included in the HTML file)

styles.style.css

Style sheet for the banner and its HTML elements.

Optional (if code is included in the HTML file)

panels/header/styles/style.css

Style sheet for header panel creative.

Optional (if code is included in the HTML file)

panels/left_gutter/styles/style.css

Style sheet for left gutter panel creative.

Optional (if code is included in the HTML file)

panels/right_gutter/styles/style.css

Style sheet for right gutter panel creative.

Optional (if code is included in the HTML file)

scripts/immersiveTakeover_scripts.js

Core script to use and initialize a Simple Skin ad.

Required

scripts/script.js

JavaScript for the banner.

Required

panels/header/scripts/script.js

Core script for the header panel.

Required

panels/left_gutter/scripts/script.js

Core script for the left gutter panel.

Required

panels/right_gutter/scripts/script.js

Code script for the right gutter panel.

Required

images/1x1.jpg

1x1 backup image for the banner.

Required

images/970x250_Default.png

Fallback image shown in unsupported browsers.

Required

images/background_default.jpg

Background image asset to inject in the publisher site.

Optional

Setting up your Ad in Sizmek Ad Suite

After you finish creating your ad, proceed to setting up your ad in Sizmek Ad Suite (SAS). For more information, see: Set up a Simple Skin.

Additional Resources

Preparing for Bulk Upload

If you are planning to upload multiple ads, make sure that the Ad Creation Wizard in SAS recognizes your workspace as a Rich Media Banner banner. Verify that the config.js file contains the following JavaScript:

define({
   "adFormatId": 10438
});

For more information about uploading ads in bulk, see: Set up Multiple Ads Using Ad Creation Wizard.

Shared Libraries

If you are developing ads with 3rd party libraries, use the SAS-hosted versions of dependencies listed in the Ad Serving Shared Libraries.

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.

Customizing Simple Skin

All of the Simple Skin functionality is programmed in the template files. At minimum, the only changes you will need to make are to the loaded image and its style.

Note

Note: When updating or replacing images or videos, make sure to also update references to their file names and dimensions found in index.html and style.css as necessary.

To update the layout, design, and functionality of a template, open the HTML, CSS, and JS files in a text editor.

Common Customizations

Configuring Gutters
Configuring Gutters

To align gutters correctly around the page content, mdContentPlacementSelector to valid CSS selector that will give the page width. To align gutters correctly from top, headerSelector to valid CSS selector to read header height if any.

Gutters can be set to display in fixed location or scroll with page, set mdPosition to either 'fixed' or 'scroll'. Gutters are responsive and adapts to any screen size and they can also set to static width. Setting mdLeftGutterMinWidth/mdLeftGutterMaxWidth or mdRightGutterMinWidth/mdRightGutterMaxWidth to the same value will make gutters gutters with fixed width.

The minimum and maximum width for responsive gutters may be set by updating mdLeftGutterMinWidth/mdRightGutterMinWidth and mdLeftGutterMaxWidth/mdRightGutterMaxWidth.

Gutters can be set to fill the entire available space by updating mdLeftGutterMaxWidth/mdRightGutterMaxWidth to 0. If there is not enough room to show the gutters in the browser, gutters disappear.

All the provided templates have a function that handles keeping aware of the current scroll position. When the ad first loads, the current scroll position is received. Upon any scroll, resize, or orientation change, the new scroll position will be updated. You can access the current scroll position, available in values from 0 to 100 (percentage scrolled), via the global object and properties scrollXPercent and scrollYPercent from the creative script.js. If you want to have code that adjusts positioning when the scrollPositioning is updated, you can put your code in the onPageScroll function in script.js.

Note

Note: Occasionally there is network trouble causing the scroll detection code to fail, so be sure to not rely on scroll position without including backup functionality in case of failure.

Manifest Configuration (config.js file)

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 in SAS. 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.

Custom Variables

Variable Name in SAS

(Variable Key in config.js)

Description

Type

Default and Accepted Values

Right Gutter Name

(mdRightGutterName)

Right gutter panel name as set in SAS.

String

Default: rightGutter

Left Gutter Name

(mdLeftGutterName)

Left gutter panel name as set in SAS.

string

Default:leftGutter

Position

(mdPosition)

Gutters div positioning style.

String

Default: fixed

Accepted: fixed or scroll

Page Background

(mdPageBackground)

You will be able to inject a background image only once when the ad is loaded in the publisher's page. You can select the element and the behavior to inject.

String

enabled:false, img:images/background_default.jpg, color:#000000, size:cover, position:top center, repeat:no-repeat, attach:fixed, fade:fade-in, fade_time:3000, inject:body, injectType:div, clickable:false

Auto Reposition Interval

(mdAutoRepositionInterval)

Panel reposition interval. Set to 0 to turn off the interval. Panels reposition in every "n" milliseconds.

Number

Default: 100

Content Width

(mdContentWidth)

Page content width.

Number

Default: 970

Eye Div ZIndex

(mdEyeDivZIndex)

Default z-index of the eye div.

String

Default: undefined

Gutters Default Height

(mdGuttersDefaultHeight)

Gutters default height.

Number

Default: 1000

Gutter Top Position

(mdGutterTopPos)

Defines the top position of the gutters. JavaScript will try to get the value from the current page and apply that value to set the top position of the gutters. However, if JavaScript failed to get any value from the page, it will take the value from this custom variable.

Number

Default: 0

Header Panel Name

(mdHeaderPanelName)

Header panel name as set in SAS.

String

Default: header

Header Size Inheritence

(mdHeaderSizeInheritence)

Header panel behavior will change based on the option selected.

String

Default: 0-781:450,782-1023:250,1024-4000:250

Accepted:

Min Header Width

(mdMinHeaderWidth)

Minimum header width if custom script fails to read page content width.

Integer

Default: 970

Header Panel Top Offset

(mdHeaderPanelTopOffset)

Top offset to display above the header panel.

Integer

Default: 0

Header Panel Bottom Offset

(mdHeaderPanelBottomOffset)

Bottom offset to display above the header panel.

Integer

Default: 0

Show Gutters

(mdShowGutters)

Show or hide gutters.

Boolean

Default: true

Content Offset

(mdContentOffset)

Number of pixels of padding between the width of the content and the start of the gutter panels.

Integer

Default: 0

Content Placement Selector

(mdContentPlacementSelector)

Div reference to detect content of page. A valid CSS selector should be present in this variable to successfully detect the content location and width. When this variable is set to anything other than undefined, mdContentWidth, mdContentAlignment, and mdContentXPosOffset are ignored and are calculated by using the width and location of this element. This is used for purposes of positioning the gutter elements.

There is a new and experimental method to get the widest element from any page automatically by enabling

{"automaticDetection": true}

String

Default: 0

Content X Pos Offset

(mdContentXPosOffset)

Value, in pixels, to offset the detected location of the content area. Positive value moves the content location to the right; negative value moves the content location to the left. This allows for asymmetrical layouts with padding on the left/right. This variable is only used when mdContentPlacementSelector is undefined. This is used for purposes of positioning the gutter elements.

Integer

Default: 0

Header Inject Type

(mdHeaderInjectType)

Header panel injection type.

String

Default: after

Accepted:

  • first: Insert as a first child a div.

  • last: Insert as a last child of a div.

  • after: Insert after a div.

  • before: Insert before a div.

Header Offset

(mdHeaderOffset)

Vertical offset from header; affects header panel and gutter panels.

Integer

Default: 0

Header Placement Selector

(mdHeaderPlacementSelector)

Div reference to inject header panel. A valid CSS selector should be present in this variable to successfully push header panel. If undefined, will inject header at tag location

String

Default: undefined

Gutter Max Width

(mdGutterMaxWidth)

Right gutter maximum width. Set to 0 to define if right gutters should cover available page width on right side of site content.

Integer

Default: 500

Gutter Minimum Width

(mdGutterMinWidth)

Right gutter minimum width.

Integer

Default: 100

ProgEnable

(mdIsDomainConfigEnabled)

Determines whether to load the programmatic settings.

Boolean

Default: false

Programmatic Settings Folder Path

(mdProgrammaticSettingsFolderPath)

Location from which to load the programmatic settings files.

String

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

Auto Scroll Top On Orientation

(mdAutoScrollTopOnOrientation)

In mobile and tablet devices when the orientation is changed automatically, the scroll bar will be moved to the position of the header. If there is no header, it will be moved to the top of the page.

Boolean

Default: true

Inject a background image on the publisher's page

It's possible change the body or a specific element in the DOM of the page to inject your background image. You can use a simple background or you can setup a advance setup using breakpoints to select when you want load a specific background. For example you will be able to have a background for mobile devices in portrait mode or for low/high resolution.

There are 3 methods to inject a background in the publisher page:

Note

Note: To avoid conflicts using different methods. When you use a new method the previous method will be deleted to use the new one.

Example: if you use the variable "injectType" with the value "Div" and after you use the "injectType" with the value "style" the Div with the first background will be removed from the page.

  1. The custom variable "mdPageBackground"

    If you use this method you will be able to inject a background image only once when the Ad is loaded. No extra code is required in the workspace, and you can use different options to show the image in the publisher's page.

    Default value: enabled:true, img:images/background_default.jpg, color:#000000, size:cover, position:top center, repeat:no-repeat, attach:fixed, fade:fade-in, fade_time:3000, inject:body, injectType:div, clickable:false

    Note

    Note: Use caution when combining this option with media queries, as one can overwrite the other on ad load, causing unpredictable results.

    Variable

    Description

    Values

    enabled

    You can enable or disable this feature. If it´s TRUE the background will be injected in the publisher's site

    Default: true Options: true/false

    img

    You can put the path of an image that you have in your workspace or you can use a number if you want to select an additional asset

    Default: images/background_default.jpg Options: Numbers / complete path in your workspace

    color

    You can select a Hex color or you can write a color name like "red", "green", etc.. it will be the background color of the page. For more information, see here.

    Default: #000000 Options: Hex. numbers, Red, Blue, transparent, etc..

    size

    The background's size will be different in the page depending on the option selected. For more information, see here.

    Default: cover Options: cover ,contain, auto, percentage, etc..

    position

    The background will be positioned horizontally or vertically depending of the option selected. For more information, see here.

    Default: top center Options: top, center, left, right, bottom, x% y%, xpos, ypos.

    repeat

    The background will be repeated or not. If you want use the repeat option you should be use a small image for a good result. For more information, see here.

    Default: no repeat Options: repeat, repeat-x, repeat-y, no-repeat

    attach

    The background will be injected in the publisher page with different behaviour when you scroll up/down. For more information, see here.

    Default: fixed Options: fixed, scroll, loca, inherit, initial

    fade

    The background will have a tween and you can select between these three options to change the tween animation style. With the value 'none' the background will be shown suddenly without any animation.

    Default: fade-in Options: fade-in, fade-out, fade-in-out, none

    fade_time

    The duration of the tween animation when the background is injected in the site.

    Default: 3000 Options: number in miliseconds

    inject

    The element in the DOM that it will be applied all the setup. You can select a class(.myClass) or id (#myDiv) or a tag name (header).

    Default: body Options: any element in the DOM of the page.

    injectType

    There are two ways to inject the background in the publisher's page.

    Note

    Note: This option will not have a fade-in/out (tween) when the image is shown.

    1. div: the background will be inject inside of a Div (mdBackground) and this Div will be insert it in the element that you have selected in the "inject" variable

    2. style: the background will be inject it in the Style (CSS) of the element that you have selected in the "inject" variable

    Default: Div Options: style or div

    clickable

    If TRUE the background will be clickable on the page with two dynamic, which will be created using 2 divs (without panels for gutters).

    Default: false Options: true/false

  2. From the WorkSpace:Invoke the changePageBackground function that is included in the workspace ImageSkin

    changePageBackground (image, color, size, position, attach, repeat, fade, fade_time, inject, injectType, clickable);

    Variable

    Description

    Values

    img

    You can put the path of an image that you have in your workspace or you can use a number if you want to select an additional asset

    Default: images/background_default.jpg Options: Numbers / complete path in your workspace

    color

    You can select a Hex color or you can write a color name like "red", "green", etc.. it will be the background color of the page. For more information, see here.

    Default: #000000 Options: Hex. numbers, Red, Blue, transparent, etc..

    size

    The background's size will be different in the page depending on the option selected. For more information, see here.

    Default: cover Options: cover ,contain, auto, percentage, etc..

    position

    The background will be positioned horizontally or vertically depending of the option selected. For more information, see here.

    Default: top center Options: top, center, left, right, bottom, x% y%, xpos, ypos.

    repeat

    The background will be repeated or not. If you want use the repeat option you should be use a small image for a good result. For more information, see here.

    Default: no repeat Options: repeat, repeat-x, repeat-y, no-repeat

    attach

    The background will be injected in the publisher page with different behaviour when you scroll up/down. For more information, see here.

    Default: fixed Options: fixed, scroll, loca, inherit, initial

    fade

    The background will have a tween and you can select between these three options to change the tween animation style. With the value 'none' the background will be shown suddenly without any animation.

    Default: fade-in Options: fade-in, fade-out, fade-in-out, none

    fade_time

    The duration of the tween animation when the background is injected in the site.

    Default: 3000 Options: number in miliseconds

    inject

    The element in the DOM that it will be applied all the setup. You can select a class(.myClass) or id (#myDiv) or a tag name (header).

    Default: body Options: any element in the DOM of the page.

    injectType

    There are two ways to inject the background in the publisher's page.

    Note

    Note: This option will not have a fade-in/out (tween) when the image is shown.

    1. div: the background will be inject inside of a Div (mdBackground) and this Div will be insert it in the element that you have selected in the "inject" variable

    2. style: the background will be inject it in the Style (CSS) of the element that you have selected in the "inject" variable

    Default: Div Options: style or div

    clickable

    If TRUE the background will be clickable on the page with two dynamic, which will be created using 2 divs (without panels for gutters).

    Default: false Options: true/false

  3. From the WorkSpace: Using the mediaQueries method: the functions are included in the workspace ImageSkin. You can use mediaQueries method to define the breakpoints you want inject in the CSS of the publisher's page to improve the user experience when the ad is loaded in diferent devices with diferent resolution.

    You can add all the mediaQueries that you need. You only will need the following structure:

    var breakpointsBackgroundsList = [{   mediaQuery: "screen and (min-width: 960px)",   setupBackground: {   img: "images/background_default.jpg",   color: "",   size: "cover",   position: "top center",   attach: "fixed",   repeat: "no-repeat",   fade: "fade-in",   fade_time: 0,   inject: "body"}]

    Customization

    Description

    mediaQuery

    You can add the media query you want use. The basic media queries control the width or/and height but you can include the 'orientation' or advanced behavior like control the minimum device pixel ratio. You don't need to include '@media' in the string. For more information, see here.

    Examples of MediaQueries:

    Note

    Note: These mediaQueries are examples to know how to use it, you can include more mediaQueries for each device you want to show an image properly.

    • For mobile in portrait and landscape:

      only screen and (min-device-width : 375px) and (max-device-width : 667px)

    • For mobile in landscape mode only:

      only screen and (min-device-width : 690px) and (orientation : landscape))

    • For tablets in portrait mode only:

      screen and (min-width:690px) and (max-width:995px) and (orientation: portrait)

    • For all devices with a resolution between 0 px and 959 px:

      screen and (min-width: 0px) and (max-width: 959px)

    setupBackground

    You can setup the behavior of your background for each mediaquery you use. For a good experience you can modify the following values: image, color, size, position, attach, repeat, fade, fade_time, inject

Example:

setupBackground: {   img: "images/background_default.jpg",   color: "#000000",   size: "cover",   position: "top center",   attach: "fixed",   repeat: "no-repeat",   fade: "fade-in",   fade_time: 3000,   inject: "body",   clickable: false}

Automatic detection of the widest element (Experimental feature)

This new feature will search on the content of any page the widest element to setup automatically the custom variables mdContentPlacementSelector and mdContentWidth. it´s designed to use the Immersive Takeover format in networks with the same tag in rotation.

If you want to enable the automatic detection, you will need to change the value of the custom variable mdContentPlacementSelector.

The basic method is to use: {"automaticDetection": true}

If you want to customize the searching of the element you have some parameters to change:

Variable

Description

Values

search

The type of the element you want to search on the page.

Default: "div" Options: div, header, span, button, etc..

horisontalTreshold

You can control the maximum and minimum of the width of the pixels for the element you are searching.

Default: "300,1800" Options: Numbers - minimum/maximum

avoid

All the elements names that you want to skip in the searching process of the widest element.

Default: "header,footer,dfp,google,input,search,hide,nav,fb,module,column" Options: String

priority

The ID or Class names that you want to prioritize in the searching process of the widest element. In the case of a "priority" element is found it will be checked if this element isn't in the "avoid" elements.Example: "#container hide" will be avoided because contain the word "hide" to avoid.

Default: "#container,#wrapper,.container,.wrapper,.main,#main" Options: String

Example:

{"automaticDetection":true,
"search":"div","horizontalTreshold":"300,1800",
"avoid":"header,footer,dfp,google,input,search,hide,nav,fb,module,column",
"priority":"#container,#wrapper,.container,.wrapper,.main,#main"}

Custom Interactions

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

Interaction Name

Description

left_gutter_viewed

(Auto) When left gutter expands for first time.

right_gutter_viewed

(Auto) When right gutter expands for first time.

click_left_gutter

Clickthrough fired once the users click on click-through button appearing in the left gutter.

click_right_gutter

Clickthrough fired once the user clicks on click-through button appearing in the right gutter.

clickable_gutters

Clickthrough fired once the user clicks on the background image when the "clickable" option is enabled in the custom variable mdPageBackground.

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

Comments