PRODUCT
Follow

Overview

Ad Builder Simple Skin format is, as the name suggests, a lean, simple to build skin format that allows you to set your creative as the background of the page, and do the same for gutters / header if you want to.

This format is fully liquid - meaning that it's built for programmatic executions.  For more information on Liquid formats in general, and how to preview the different certified settings, for each of the potential domains of the programmatic channel, please see  Programmatic ready Liquid Custom Formats.

It also supports asymmetric executions, where only one of the gutters is present along with header optionally, as well as the actual skin - background of the site, with it's presence in the build optional as well. 

One of the main features is the capability to add an image background on the publisher's page, this is useful for basic wallpaper executions where the gutters are present as clickable overlays. This allows rapid development, and focus on design and utility, where creative content can be modified with code as well as codelessly via use of platform's custom variables  and additional assets.

An additional layer of logic handles the presence or absence of the gutters, making them hidden if there is no room to display them on the publishers page. This allows for a graceful degradation behavior when the ad is ran on a mobile device or smaller displays, in particular, the gutters are not supported for mobile devices, hence will not show when the ad is viewed in that environment.

SimpleSkin_minidemo.gif

 

Ad Builder Simple Skin is released as a single, apart from the optional header panel, there are 2 gutters (panels) in the template:

  • LeftGutter 
  • RightGutter
  • MainHeader (optional)

The gutters contain an image of Sizmek logo, and the entire visible surface of the creative is clickable. This template makes use of the mdPageBackground custom variable which is enabled by default, and will inject an image to the background of the page spanning from end to end, behind the content and gutters.

 

SimpleSkin_with_header.jpg

SimpleSkin with header panel

 

 

SimpleSkin_-_without_Header.jpg

Simple Skin Template without header panel

 

Demo

The following table provides a link to the demo for the Skin format.

Demo

Preview 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 and environment limitations:

 Feature / Environment

Supported

Responsive

no

Scroll Detection

yes

Domain Configuration via Domain Config Tool (f/k/a Programmatic)

yes

Ad Builder Templates Available

yes

Local Preview

no

Uses AdKit (able to include DCO and Additional Assets)

yes

Polite Loading

yes

Safeframe Support

no

MRAID (in-app Support)

no

Secure Serving

yes

Sizmek Advertising Suite Support

yes

Implementing a Simple Skin

Setting Up a New Ad in Ad Builder

The Simple Skin format is available on Ad Builder. To access the Simple Skin format template on Ad Builder, please click on "Template Gallery" button from the Ad Builder welcome screen

template_gallery_button.png

Click on Format tab, You should be able to find Simple Skin format from the template list. 

template-gallery.jpg

To create a new ad, simply select a template and then click on Create. The new ad will start with a Master_Banner and default (panel) content showing left section of Ad Builder tool. Master_Banner, is a 1x1. You can edit the banner by changing, removing, or adding components based on your requirements.

SimpleSkin_-_banner.jpg

Gutters Panel contains Sizmek logo and the click through button is transparent over all the Ad

SimpleSkin_-_gutters.jpg

 

MainHeader Panel contain Sizmek logo, click through button and text with the name of the template

simpleSKin_-_header.jpg

After you have completed editing your ad, you can click on Save to commit the ad to Sizmek MDX platform and preview your ad. 

Customizing Simple Skin

You may remove or replace any existing element in the template with your own creative assets. However, there is some thing you need to be aware of, you can´t modify the name of the panels. If you change the name of some panel the panel will be as a normal panel.

Extra information:

  • Ad Dimensions: The template is 1x1 with 3 panels in total. Two panels as gutters with 120x600 and the mainHeader is 970x250. You can change the size of the banner and the panels. And you can remove some panel if you need it.

 

  • Gutters: (they are non responsive) the gutters by default are fixed, you can change the behavior with a custom variable. Gutters will be hidden automatically if they don't have enough space between the content and the limits of the browser (height and width)

 

  • Collapse Panel: You can add a close button for any panel and include the collapse event using the adbuilder actions.

 

  • Close SimpleSkin and remove the background image: You have a special option to close all the panels of the Simple Skin and remove the background image if you include all the panels that you have automatically the background will be removed, in this case (gutterLeft, gutterRight and mainHeader).

SimpleSkin_-_close_button.jpg

 

Common Customizations

Change the background image

Automatically an image will be injected in the background of the page. You can change the image and the configuration using the custom variable "mdPageBackground". You will find all the information about this custom variable below.

To change it, please go to the Advanced tab in Ad Settings on Sizmek MDX and change the custom variable mdPageBackground.

 

Setting up Simple Skin in Sizmek Ad Suite

Once you have saved the ad to the platform, you can now use the settings from the platform to setup your ad.

  1. Go to Ad Settings in the Sizmek Ad Suite.
  2. For the Advanced Panel Settings, please make sure Overwrite Creative Settings: Always auto-expand under Auto-Expand is selected.
  3. Set Panel Frequency to Unlimited.
  4. Make sure Show Single Panel at a Time under Multiple Panels is uncheck.
  5. Save the ad.
  6. Create a new placement for the ad.
  7. Fill out the form. Set the Placement type to In Banner and the Banner size to 1x1.
  8. After you have saved your placement, you can then generate preview tags to test on your web site.

Note: Custom Script Notice Since the Simple Skin 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_AdBuilderSimpleSkin.js 

Custom Variables

L, R, C (for Left, Right, and Center, respectively)

Custom Variable Name

Type

Description

Default Value

mdPosition

String

Gutters div positioning style. fixed or scroll

fixed

mdPageBackground

String

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.

 (more information here)

enabled:true, img: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

mdAutoRepositionInterval

Number

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

0

mdContentWidth

Number

Page content width

970

mdEyeDivZIndex

String

The default z-index of the eye div.

undefined

mdGutterTopPos

Number

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

0

mdContentOffset

Integer

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

0

mdContentPlacementSelector

String

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 var is set to anything other than undefined, mdContentWidth, mdContentAlignment, and mdContentXPosOffset are ignored and are instead 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 automatically the widest element from any page. You can enable with this:

{"automaticDetection": true}

Note: You will find more details about this feature below.

undefined

mdHeaderInjectType

String

Header panel injection type

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.

After

mdHeaderPlacementSelector

String

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

undefined

mdIsDomainConfigEnabled

Boolean

Whether or not to load the programmatic settings.

false

mdProgSettingsFolderPath

String

Location from which to load the programmatic settings files.

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

mdAutoScrollTopOnOrientation

Boolean

In mobile and tablet devices when the orientation is changed automatically the scrollbar will be moved to the position of the header. In the case that there is no header will be moved to the top of the page.

true

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

mdContentAlignment

String

Alignment of the content on the page. This var is only used if mdContentPlacementSelector is undefined. This is used for purposes of positioning the gutter elements

C

mdParentLevelsToResize

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

 

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/higth resolution.

 

  • How to add a new background image

In Ad Builder you can open the Asset Library and upload the image that you want to use.

1. Open the Asset Library

SimpleSkin_-_image_asset.jpg

 

2. Select your asset: You can choose an image from the platform or from your computer, after select it, it will be shown in the list of the assets. 

SimpleSkin_-_image_asset_adding.jpg

3. The last setp you need to do it´s change the name of the image in the custom variable "mdPageBackground". Please go to the Advanced tab in Ad Settings on the platform and change the custom variable mdPageBackground. By default uses: "img:background_default.jpg" you can modify it with the name of your asset uploaded.

Example: img:myNewBackground.jpg

simpleSkin_-_customVariable.jpg

 

  •  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. It´s not necesary extra code in the workspace and you can setup different option to show the image in the publisher's page.

 

Default value:
enabled:true, img: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: You have to be careful to use this option at the same time with the mediaqueries option. Because maybe you can overwrite the custom variable result when the Ad is loaded in the page and you will not get the result.

 

Variables

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 which has been uploaded to the platform.

Default: background_default.jpg

 

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.

(more information 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.

(more information here)

Default: cover

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

 

position

The background will be positioned horizontaly or vertically depending of the option selected

(more information 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.

(more information here)

Default: no repeat

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

attach

The background will be injected in the plublisher page with different behaviour when you scroll up/down

(more information 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 It´s the duration of the tween animation when the background is injected in the site.

Default: 3000

Options: number in miliseconds

inject It´s 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 2 ways to inject the background in the publisher´s page.

  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.

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

 

Default: Div

Options: style or div

clickable if it´s 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

 

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 only will need to change the value of the custom variable mdContentPlacementSelector

The basic method is use:

{"automaticDetection": true}

 

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

Variables

Description

Values

search

It´s the type of the element you want to search on the page

Default: "div"

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

horizontalTreshold

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

click_left_gutter Clickthrough fired once the users click on clickthrough button appearing in the left gutter.
click_right_gutter Clickthrough fired once the user clicks on clickthrough button appearing in the right gutter.
click_header Clickthrough fired once the user clicks on clickthrough button appearing in the header.

  

Change Log

Release: May 10, 2018 (v1.0.0)

 

  • Initial release

 

Known Issues

  • A known bug in iPad and iPhone is not possible to use "fixed" property on the background when you use mdPageBackground variable or mediaQueries option or changePageBackground function, instead of "fixed" will be changed to "scroll" only on iPad and iPhone devices 
  • Clickthrough urls are missing when you edit the Ad in the platform setting
  • Special characters are removed after updating some custom variables from adBuilder tool. You can edit the value of some custom variable if you edit the Ad from the platform

 

Copyright 2021 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.

 

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

Comments